AnimateCC H5怎么用event.offsetX/Y实现同步拖拽?

想用AnimateCC H5来研究一下event.offsetX/Y,大致概念是两个点连成一条线,拖拽Cpoint1可控制两个点与线的整体拖动,拖拽Cpoint2可控制线的方向与长短。

this.stop();
var home = this;

var ShapeLine1 = new createjs.Shape(); 
var graphics1 = ShapeLine1.graphics;
graphics1.beginStroke("white");
graphics1.setStrokeStyle(3); 
graphics1.moveTo(home.Linepoint1.x, home.Linepoint1.y);
graphics1.lineTo(home.Linepoint2.x, home.Linepoint2.y);

home.addChild(ShapeLine1);
init();

home.Linepoint1.addEventListener("mousedown", StartLine1)
home.Linepoint1.addEventListener("pressup", StopLine1)

function StartLine1()
{
    canvas.addEventListener('mousemove', MoveLine1)
}

function StopLine1()
{
    canvas.removeEventListener('mousemove', MoveLine1)
}

function MoveLine1(event)
{
    var e = event

    home.Linepoint1.x = stage.mouseX / stage.scaleX
    home.Linepoint1.y = stage.mouseY / stage.scaleY

    home.Linepoint2.x = e.offsetX + (home.Linepoint2.x - home.Linepoint1.x)
    home.Linepoint2.y = e.offsetY + (home.Linepoint2.y - home.Linepoint1.y)

    init();
}
/**这段本意是想通过获取鼠标事件的坐标,加上两点坐标的差值来定位新的Linepoint2,现在就出现个问题,Linepoint1在拖动的时候,Linepoint2的坐标在事件中会不断放大**/


home.Linepoint2.addEventListener("mousedown", StartLine2)
home.Linepoint2.addEventListener("pressup", StopLine2)

function StartLine2()
{
    canvas.addEventListener('mousemove', MoveLine2)
}

function StopLine2()
{
    canvas.removeEventListener('mousemove', MoveLine2)
}

function MoveLine2()
{
    home.Linepoint2.x = stage.mouseX / stage.scaleX
    home.Linepoint2.y = stage.mouseY / stage.scaleY
    init();
}


function init(){
    graphics1.clear();
    graphics1.beginStroke("white");
    graphics1.setStrokeStyle(3);
    graphics1.moveTo(home.Linepoint1.x, home.Linepoint1.y);
    graphics1.lineTo(home.Linepoint2.x, home.Linepoint2.y);
    }

我是设计师所以只能明白AnimateCC H5中的编程逻辑,还请大神指点!

0

1个回答

解决了,在命令function MoveLine1()中加入点位绑定,创建Cp1.x/y,再用home.Linepoint1.x-Cp1.x

function MoveLine1()
{
var Cp1 = {
x: (home.Cpoint2.x - home.Cpoint1.x),
y: (home.Cpoint2.y - home.Cpoint1.y)
}

home.Linepoint1.x = stage.mouseX / stage.scaleX
home.Linepoint1.y = stage.mouseY / stage.scaleY

home.Linepoint2.x = home.Linepoint1.x-Cp1.x
home.Linepoint2.y = home.Linepoint1.y-Cp1.y

init();

}

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
h5拖拽
事件有dragstart dragging dragend dragenter dragover dragleave drop end在drop后 dragover默认阻止拖放元素到其他元素 需e.preventdeafult才能触发drop事件 可以通过transferdata传输数据 drop事件中操作dom即可(vue中操作对应数据) ...
H5拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5拖放元素</title> <style> /*目标元素*/ .goal_bo
H5实例教学--从AnimateCC到CreateJS入门
源码以及资源地址下载:链接: http://pan.baidu.com/s/1kU8LBTH 密码: j7hu 首先,打开flash文件,可以看到库里面有几个待使用的元件 我们先用软件自带的发布功能发布一下快捷键 alt+shift+F12,也可以在文件里选择发布 发布后在flash文件旁边会有一个html和一个js 我们打开demo...
h5原生拖拽功能的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css">
怎么用 javascript 实现拖拽
在网页上实现拖拽其实不难,第一我们需要知道鼠标的位置,第二我们需要知道当用户点击一个网页元素时这个元素要能够拖拽。--------------------------------------------------------------点此查看示例一 --------------------------------------------------------------获取鼠标移动信息开始我...
event.clientX 和event.offsetX
event.clientX 和event.offsetX分别是什么含义?哪里有资料可查?
h5简单的拖拽排序,
原本是打算用户移动端的, 但考虑移动端的滑动和滚动(暂不知道也没有去搜索决解方案, 但是就算实现了也会有很多麻烦, 以后再考虑) .drag-containter > div { height: 100px; margin-top: 4px; border: 1px solid #930309; } function drag(ev) { ev.dataTr
H5 可拖拽验证码
H5 移动 拖拽 验证码
h5新特性拖拽购物车
 html> lang="en"> charset="UTF-8"> Title *{margin: 0;padding: 0;} li{list-style: none;} li{float: left;width:200px;border:1px solid #000;margin: 10px;}
h5拖拽文件上传及进度条
html5实现拖拽的几个事件 绑定在拖拽元素上的事件     ondragstart    开始拖拽元素触发     ondrag           拖拽时触发     ondragend     拖拽完成触发 绑定在指定区域元素上的事件 这里需要注意的是,如果dragover事件中不阻止默认事件,drop事件就不会触发 var box = document.querySelec...
H5元素拖拽效果
需引入hammer.min.js库/*拖拽效果*/ //获取相关CSS属性    var getCss = function(o,key){        return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];       };     ...
【H5】 拖拽7事件:
【H5】 拖拽7事件 被拖拽元素事件: ondragstart 拖拽开始的时触发 (触发一次) ondrag 连续触发拖拽事件 ondragend 拖拽结束触发 (触发一次) 拖拽进入的元素事件: ondragenter 鼠标进入目标元素内触发 (触发一次) ondragover 鼠标在目标元素内持续触发 ondragleave 鼠标离开目标元素时触发事件 (触发一次) ond...
h5拖拽封装
<p>rn <br />rn</p>rn<p>rn <p>rn 20周年限定一卡通!<span style="color:#337FE5;">可学Java全部课程</span>,仅售799元(原价7016元),<span style="color:#E53333;">还送漫威正版授权机械键盘+CSDN 20周年限量版T恤+智能编程助手!</span>rn </p>rn <p>rn 点此链接购买:rn </p>rn <table>rn <tbody>rn <tr>rn <td>rn <span style="color:#337FE5;"><a href="https://edu.csdn.net/topic/teachercard?utm_source=jsk20xqy" target="_blank">https://edu.csdn.net/topic/teachercard?utm_source=jsk20xqy</a><br />rn</span>rn </td>rn </tr>rn </tbody>rn </table>rn</p>rn<span>&nbsp;</span> rn<p>rn <br />rn</p>rn本阶段以H5 + CSS3 + 移动端框架为主,最后通过项目实战加深对移动端的认识
H5拖拽7个事件
1.简介 (1)蓝图 拖动源 放置目标 拖放并不是单纯的把目标从一个地方移动另一个地方,其实是促成成功交互的操作过程中的反馈。 光标指示当前的位置是否可防置目标 用户提示是移动、链接或者复制 鼠标经过的地方样式改变,提示此处可以放置。 为满足以上的要求,浏览器在拖拽的每个过程中发起一系列的事件。 数据传输:一组对象,这个对象用来公开存储,拖动数据存储是拖放操作的基础。可以将传输数据理解成拖放的中央...
H5拖拽排序
一、需求 豆果食谱系统,sku列表实现拖拽排序,如图: 二、HTML5拖放API的知识点 首先我们得知道元素怎么才可以被拖放,需要设置它们的draggable属性,其中img和a标签的dragable属性默认是true,不需要我们手动设置。   拖放API的监听事件如下: dragstart: 源对象拖拽开始; drag: 源对象拖拽的过程中; dragend: 源对象拖拽结束;...
H5第一章拖拽
1.H5是属于移动端的,不存在兼容问题,在HTML中写上draggable=“true” 打开元素,可以拖拽元素,下面就用一段代码来进行展示 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;拖拽&amp;lt;/title&
h5的draggable属性实现拖拽Tree组件
1.通过在render中给每个树节点添加domProps属性,使节点支持拖拽效果,也可以选择在父组件传入draggable属性控制树是否可拖拽 domProps: { draggable: this.draggable }, 2.dragstart方法获取到原节点和它的父节点,drop方法获取目标节点,将原节点从父节点删除并添加到目标节点childr...
基于H5实现的react拖拽排序组件
拖拽排序组件Github地址:https://github.com/VicEcho/VD... 因为使用了react.js技术栈,所以封装优先考虑输入和输出。基于数据驱动去渲染页面、控制拖拽元素的顺序。 由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop)。当然,如果要求兼容性丰富,使用鼠标点击...
原生javascript实现H5拖拽效果。
一、设置元素为可拖放 首先,为了使元素可拖动,把 draggable 属性设置为 true 二、 ondragstart 和 setData() 当元素被拖动时,事件触发,所调用的函数。 上面例子代码中,ondragstart 属性调用了一个函数,drag(event),规定被拖动的数据。 dataTransfer.setData() 方法设置被拖数据的数据类型和值: functio...
用鼠标事件实现拖拽
首先复习一下鼠标事件:click: 在用户单击主鼠标按钮,或者按下回车键时触发。 mousedown:用户按下任意鼠标按钮时触发,不能通过键盘触发; mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发。 mouseleave: 在鼠标光标移动到元素范围之外时触发 mousemove:当鼠标指针在元素内部移动时重复地触发,不能通过键盘事件触发这个事件; mouseout:
用JQuery 实现拖拽
用JQuery 实现各个模块的拖拽, 像在www.163.com上输入账号密码 跳转到的界面一样。rn邮箱、博客、相册 等模块的拖拽。给个例子,哥在线等。
用MapXtreme2004+vb.net怎么实现地图上点的拖拽?
我想实现用鼠标选中一个点,按住后拖放到另外一个地方。原来在MapX5中是可以实现的,现在换成MapXtreme2004,而且又是B/S结构,不知道该怎么做了。有人做过吗?rn解决了分好说,多谢了!
用H5实现下拉框
可以使用HTML5 list 属性。list 属性需要应用到 input 框上,然后内容写一个自定义的 id然后在任意位置放一对 datalist 标签,并给 datalist 框一个 id,和 list 属性指向的 id 一致即可。在 datalist 标签下放列表项,每个列表项用 option 元标签来表示,option 标签里用 value 属性填写内容,label 属性来做提示。下面是示例
拖拽阴影效果怎么实现
listctrl控件拖出一项,想实现像window上拖动文件过程中,会产生一个文件阴影的效果,也就拖动产生当前项的阴影,按CTRL会在阴影右下角出现个“+”求指点,万分感谢
怎么实现拖拽最大化!
win7下拖动窗口标题栏到屏幕顶端就会自动最大化,但窗口style是WS_POPUP的不行,怎么实现既能自绘窗口,又能拖拽最大化?像搜狗、迅雷等都能实现。哪位会的指教一下。
怎么实现文件的拖拽?
我做一个播放器,象WINAMP一样, 可以拖拽文件到我的播放控制窗体rn我的播放控制窗体是CDialogrnrnrn怎么实现?????????
h5怎么实现扫一扫
想在h5页面上实现扫一扫功能,即用户通过浏览器访问这个网页,点击后能调用手机端本地的扫一扫功能,读取二维码信息,UC浏览器实现了这个功能,但是不知道是怎么实现的,求大神们指点,使用navigator.getUserMedia也只能访问到手机的摄像头,而不是扫一扫的功能
请问event.offsetX在mozilla中用什么可以实现?
如题,谢谢rn
H5 之 拖拽功能的简单用法
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta http-equiv="X-UA-Com...
H5 图片拖拽前端实例
&amp;lt;!doctype html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt;  &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;  &amp;lt;meta name=&quot;Generator&quot; content=&quot;EditPlus®&quot;&amp;gt;  &amp;lt;meta name=&quot;Author&quot;
怎么用多线程实现进度条同步上传
DiskFileItemFactory factory = new DiskFileItemFactory();//磁盘缓存rn ServletFileUpload upload = new ServletFileUpload(factory);//创建一个文件上传处理器rn upload.setFileSizeMax(5 * 1024 * 1024 * 1024);rn//监听文件上传进度,可在控制台打印进度rn upload.setProgressListener(new ProgressListener() rn @Overridern public void update(long bytesRead, long contentLength, int items) rn String all = bytesRead + "";rn double d = Double.parseDouble(all);rn System.out.println("当前文件是大小是:" + contentLength / 1024 + "KB,已上传" + bytesRead / 1024 + "KB,当前已上传:" + (int) (d / contentLength * 100) + "%");rn rn );rn InputStream stream = null;rn FileOutputStream writer = null;rn try rn //上传文件,并解析出所有的表单字段,包括普通字段和文件字段rn List itemList = upload.parseRequest(request);rn for (FileItem item : itemList) //遍历表单字段rn if (!item.isFormField()) //如果不是普通的表单字段rn //首先将文件上传到服务器rn String name = item.getName();rn stream = item.getInputStream();rn if (!checkExcel(stream)) //判断上传的excel的表头是否正确rn return;rn rn String path = this.getServletContext().getRealPath("");rn File filepath = new File(path.replaceAll("build", "") + "/WEB-INF/anjuexcel");rn if (!filepath.exists()) rn filepath.mkdir();//如果没有文件夹创建一个新的文件夹rn rn if (name.contains("\\")) rn name = name.substring(name.lastIndexOf("\\"));//去掉完整路径,只保留文件名rn //注意IE或FireFox中获取的文件名是不一样的,IE中是绝对路径,FireFox中只是文件名。rn realpath = path + name;rn File file = new File(realpath);rn if (!file.exists()) rn file.createNewFile();//创建新的文件rn rn writer = new FileOutputStream(file);rn int data;rn data = stream.read();rn while (data != -1) rn writer.write(data);rn data = stream.read();rn rn writer.close();rn stream.close();rn rn rn catch (Exception ex) rn Logger.getLogger(ImpotBzsfwhsxxAction.class.getName()).log(Level.SEVERE, null, ex);rn finally rn if (writer != null) rn writer.close();rn rn if (stream != null) rn stream.close();rn rn rn我这里没有写线程,求指点
怎么用C#实现视频和字幕同步?
用C#做视频播放器时间怎么实现 视频画面和字幕文件的同步?各位大侠请帮帮忙!
怎么用SQLSERVER实现两个数据库同步??
新年好,rn我试过在sqlserver工具中能定阅,但是好象还是说一些些问题出来了。rn你们能不能在我的QQ里介绍一个怎么用SQLSERVER实现两个数据库同步呀。rn谢谢你们了。rn我的QQ是:1482860
拖拽过程中,drop()怎么用?
要监听拖拽过程的释放动作,是否是使用DropTargetListener中的drop()方法?rn应该如何将要监听的Component和这个Listener结合起来呢?rn我用的Component是一个JTree
用jq实现拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #gitem{ overflow: hidden; } #gitem ul{ overflo
用面向对象的方法实现拖拽
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;style&amp;gt; #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100...
event.offsetX和event.clientX的区别
event.offsetX和event.clientX的区别是什么???
浏览器兼容event.offsetX的方法
火狐浏览器不支持e.offsetX,解决方法function getOffsetX(e){ var e =e||window.event; var srcObj = e.target || e.srcElement; if (e.offsetX){ return e.offsetX; }else{ var rect = srcObj.g
文件夹同步怎么实现?
源文件一个几十G大的文件夹,对它实现文件同步到指定的路径下。rn肯定不能全部复制,要求就增量和修改的部分做同步。rn网上找了个例子如下rn[code=Delphi(Pascal)]unit FileSysThread;rnrninterfacernrnusesrn Windows, SysUtils, Classes, comctrls;rnrntypern TFileSysNotifyThread = class(TThread)rn privatern ErrCode: Integer;rn KillAddress: PInteger;rn NotifyHandle: THandle;rn WatchPath: string;rn WatchMask: Integer;rn procedure SignalFileNotification;rn protectedrn procedure Execute; override;rn publicrn constructor Create(const AWatchPath: string; AWatchMask: Integer; var Myself: TFileSysNotifyThread);rn destructor Destroy; override;rn end;rnrnimplementationrnrnuses Dialogs;rnrnconstructor TFileSysNotifyThread.Create(const AWatchPath: string; AWatchMask: Integer; var Myself: TFileSysNotifyThread);rnbeginrn inherited Create(True);rn WatchPath := AWatchPath;rn WatchMask := AWatchMask;rn KillAddress := Addr(Myself);rn Priority := tpLower;rn FreeOnTerminate := True;rn Suspended := False;rnend;rnrndestructor TFileSysNotifyThread.Destroy;rnbeginrn if NotifyHandle <> THandle(-1) thenrn FindCloseChangeNotification(NotifyHandle);rn inherited Destroy;rn KillAddress^ := 0;rnend;rnrnprocedure TFileSysNotifyThread.Execute;rnbeginrn NotifyHandle := FindFirstChangeNotification(PChar(WatchPath), True, WatchMask);rn if NotifyHandle <> THandle(-1) thenrn while not Terminated do beginrn ErrCode := WaitForSingleObject(NotifyHandle, 250);rn case ErrCode ofrn Wait_Timeout:rn ;rn Wait_Object_0:rn beginrn Synchronize(SignalFileNotification);rn FindNextChangeNotification(NotifyHandle);rn end;rn else ;rn end;rn end;rnend;rnrnprocedure TFileSysNotifyThread.SignalFileNotification;rnbeginrn ShowMessage('文件已改变! ');rnend;rnrnend.rn[/code]rn看了下是采用线程实现的,但是看不大懂constructor TFileSysNotifyThread.Create(const AWatchPath: string; AWatchMask: Integer; var Myself: TFileSysNotifyThread);rn为什么这么构造? 线程知识薄弱 求教达人讲解下~~rn
怎么实现同步问题?
我自己写一个分布式的数据库,在对资料作修改,删除,插入时怎么实现同步问题10