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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
HTML5:Animate cc交互之“拖拽”“碰撞”功能
1.实现效果:鼠标对某图片按下,并拖动,拖动的物体变成“移液枪”,鼠标不见。移液枪拖拽到试管口时,松开会触发“正确”,如果移液枪没有拖拽到试管口就松开了,会弹出,“错误”2.实现步骤:a.在第一帧帧输入S.stop(); S.ts_txt.text = "";//提示框,清空 S.ts_txt.text = "请拖动合适的试剂到EP管中";//该帧提示文字 S.case1_right1.goto...
h5的拖拽事件 ondrop 实现鼠标跟随 移动盒子
.box,.target{       width: 400px;       height: 400px;       border: 1px solid #000;     }     span{       width: 100px;       height: 100px;       border: 1px solid #000;       border-radius
多文件拖拽上传以及利用Jquery替代HTML5上传控件
最近一直在研究文件上传的各种方法以及使用其他控件去重构HTML5自带的上传控件,这一篇将会总结这段时间研究的文件上传的两种方式,并对这一方面告一段落。本文将分为两部分介绍并解释文件上传的原理和实现过程,第一篇为多文件拖拽上传,类似于QQ邮箱文件拖拽一样;第二篇为使用Jquery代替HTML5上传控件,比较华丽的为每一个文件显示进度条和显示返回结果。第一篇——拖拽文件拖拽即把一个或多个文件从电脑桌面选
H5完成拖拽,复制数据功能~
在React 、Redxu 、Dva框架背景下实现h5拖拽复制~ 需求如图:我想在模板预览组件中拖拽某个模板至页面预览~ 看代码: 要被拖拽的元素设置一些必须的属性:draggable、onDragStart div draggable="true" onDragStart={drag}> 我是模板中的小盒子 div> 在拖拽开始也就是onDragStart 时候进行数据
浏览器兼容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
高效制作动画-Adobe Animate CC
前言说起动画H5,作为一个前端,可谓是“又爱又恨”。爱的是加上动画动效后H5会变得生动有趣,吸引力Max;恨的是做动画时都是一边在脑海中yy效果,一边用css、js代码模拟出来,既低效又不直观,正所谓“产品一句话,设计一根线,重构一身汗”。庆幸的是,你现在看到了这篇文章了,我将结合实例来介绍一下Adobe Animate CC如何高效直观地实现动画效果,并指出一些2018版本新特性。好戏来了首先我...
HTML5:Animate cc交互功能之制作单选框(开关)
1.需要实现的效果 2.步骤: a.实现点击功能 S.xld_btn1.txt.text="";//先将单选框的文本清空 //S.xld_btn1.txt.text是舞台上的"xld_btn1影片剪辑",txt是指文字,text指文字内容 if(!S.xld_btn1.btn_0.hasEventListener("click")) { S.xld_btn1.btn_0...
Demo登录框的可拖拽(原生、jQuery、H5托和放)三种办法实现
此处不考虑兼容性问题,因为在IE8及其以下的版本中不支持事件对象的page坐标系列。所以我们直接使用元素的page系列坐标。 需求: // 1.点击登录按钮,让登录盒子显示在页面上,同时出现遮罩层 // 2.点击登录盒子的关闭按钮,登录盒子消失 // 3.登录盒子可拖拽 思路分析:这里的重点是第三步登录盒子的可拖拽,具体思路如下图: 我们解决盒子拖拽的思路就...
原生javascript实现H5拖拽效果。
一、设置元素为可拖放 首先,为了使元素可拖动,把 draggable 属性设置为 true 二、 ondragstart 和 setData() 当元素被拖动时,事件触发,所调用的函数。 上面例子代码中,ondragstart 属性调用了一个函数,drag(event),规定被拖动的数据。 dataTransfer.setData() 方法设置被拖数据的数据类型和值: functio...
h5原生拖拽功能的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css">
HTML5:Animate cc交互之“常用全局事件及封装” 及功能
一、项目常用的全局事件,总结 //下一步播放事件 nextPlay = function (event) { numframe = S.currentFrame; S.gotoAndPlay(numframe + 1); } //上一步播放事件 PrePlay = function (event) { numframe = S.currentFrame; S.gotoAndPlay...
animate源代码(animate.js)
animate的源代码,在使用时可以直接引用,方便易用,实现各种过渡动画
使用js实现html5的拖拽----升级版
记得在学习html5的时候有一个拖拽的功能 --- drag和drop,后来看到五百丁简历的简历模板也有这功能,但是都有一个局限性,那就是不能随意拖动到任何位置,会有一定的限制。于是想自己实现一个可以完全自由定义模板的简历demo,如下图是简单的一个实现:可以看到里面的元素可以自由地移动所在的位置,可以用这个来实现简历模板的自定义(还未完善)那么如何来实现元素的自定义位置拖拽呢我给大家提供以下代码...
html5实现拖放以及mouse事件实现简单拖拽
    春困夏乏秋打盹,最近懒癌要犯了,为了督促自己学习,小生制定了一个计划——每天收集/记录/学习一个小技巧~~~    今天的小技巧如题,html5实现拖放以及利用mouse事件实现简单拖拽,本文将依次介绍,若有不妥之处,还望这位看官留言指正~~~实例参考博客:http://blog.csdn.net/baidu_31333625/article/details/53811510//=====...
HTML5:Animate cc交互之单页面点击多按钮
1.实现效果 某个帧上面,有1-8个按钮,点击不同的按钮,跳转到相应的帧上面去 2.代码 for (i = 1; i < 8; i++) { if(!S["list_btn" + i].hasEventListener("click")){ S["list_btn" + i].addEventListener("click", listEvent); }//遍历所...
H5的拖曳效果示例
利用H5新增的draggable和ondrag*事件可以用简单的代码完成拖曳事件: H5的拖拽效果实例 #box{ height: 200px; width: 200px; border: 1px solid orange; float: left; } #con{ height: 200px; width: 200px; border: 1
用html5实现图片和文字拖拽到下面的文本框里的Demo
用html5实现图片和文字拖拽到下面的文本框里的Demo jquery-3.3.1.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
HTML5:Animate cc交互之点击1个“按钮”执行多个事件功能
一、实现效果第1次点击按钮可以执行第1个事件,第2次点击按钮,执行第2个事件,以此类推二、js代码s.balloon.addEventListener("click", balloon1Click.bind(s)) function balloon1Click() { if (s.ayNum != 6) { switch (s.ayNum) { ...
关于H5拖拽事件
鼠标拖拽事件在项目中时很常见的,如果用原生js去实现会很复杂,好在H5自带拖拽API。如图: 之前只是实现了点击进度条移动到鼠标点击的地方,话不多说上代码,html代码如下: 0 1/4 1/2 3/4 Max css代码如下: .repair-slider { margin-top: 20px; position: rela
解决Adobe Animate CC 中文版非中文的BUG
最近在使用CreateJS开发h5小游戏,使用到 Adobe Animate cc这个软件,安装Adobe Animate CC 时选择的是中文,安装之后打开显示的是英文版的界面,并非中文版。 原因: 经排查,发现问题在于安装包内的中文语言包zh-CN内的文件是英文的,写的是中文语言包,但实现上是英文语言包,所以用户根本无法使 用中文版,这是Adobe Animate CC 的一个...
HTML5拖放事件与购物车案例
l拖放事件 •draggable : –设置为true,元素就可以拖拽了 •拖拽元素事件 : 事件对象为被拖拽元素 –dragstart ,拖拽前触发 –drag ,拖拽前、拖拽结束之间,连续触发 –dragend , 拖拽结束触发 •目标元素事件 : 事件对象为目标元素 –dragenter ,进入目标元素触发,相当于mouseover –dragover ,进入目标、离
HTML5拖拽上传图片预览
结合拖放事件API,DataTransfer对象和文件读取对象FileList等方面的知识,实现简易拖拽上传图片预览效果。需要了解熟悉个对象的关系以及用法,明确好实现思路!
HTML5拖拽功能实现(步骤进行)
问题:突然奇想,想在我的电影网上加一个收藏(类似于购物车的东西),可以通过拖拽图片进行添加前提:需要了解HTML5中国Loacl Strorage(当然,其他的web存储也行,我用的是Local Stroage)解决:这里主要重点强调关于进行拖拽功能的细节,具体html和css就自己慢慢弄吧首先这里先是对收藏按钮进行点击显示新的div框(存放收藏的电影),二次点击隐藏div框,这里不做过多介绍为可...
H5拖放API基础篇
不要搞错,本文不是讲如何拖地的。看过《javascript精粹》朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了。最近在园子见一园友写了一篇《HTML5 进阶系列:拖放 API 实现拖放排序》,真乃大师之作,大~熊同学作为一代菜鸟(不是宗师),无法与之想比,遂推出基础篇,希望各位园友有所收获。 一个简单的例子–地上有石子捡几个吧
HTML5中利用JavaScript实现拖放(来回)的案例
拖放是 HTML5 中非常常见的功能。  注意: 默认情况下,元素是不可拖动的,为了让元素可拖动,需要将 HTML5 的draggable 属性设置为true。 提示: 链接和图片默认是可拖动的,不需要 draggable 属性。 实现来回拖放的思路: 建立两个框(左框和右框),左框作为图像拖动回来时的容器不设置背景色,右框作为图像拖动出去的容器。 开始示范: 以下是CSS样式 bo...
H5在网页中拖放图片
H5中实现拖放效果,常用的实现方法是利用事件drag和drop; 1.设置元素为可拖放。 <img draggable="true"/> 2.第二步:拖动什么 实现拖放的第二步就是设置拖动的元素,常见的元素有图片,文字,动画,实现拖放功能的是 ondragstart和setData(),即规定当元素被拖动时,会发生什么。 dataTransfer.setData()方法设置被...
浅析H5拖动
拖动很常见,可以自己用jQuery原生拖动实现,也可以可以用jQuery UI插件实现,先看原生拖动实现: html lang="en"> head> meta charset="UTF-8"> title>拖拽title> style> *{ padding: 0; margin: 0;
H5拖拽排序
一、需求 豆果食谱系统,sku列表实现拖拽排序,如图: 二、HTML5拖放API的知识点 首先我们得知道元素怎么才可以被拖放,需要设置它们的draggable属性,其中img和a标签的dragable属性默认是true,不需要我们手动设置。   拖放API的监听事件如下: dragstart: 源对象拖拽开始; drag: 源对象拖拽的过程中; dragend: 源对象拖拽结束;...
H5本地图片拖拽到网页指定的位置框内
新建文件drap_and_drop.html, 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #containe
HTML5拖放(drag and drop)与plupload的懒人上传
本文转载自:http://www.cnblogs.com/lovesong/p/5014584.html HTML5拖放(drag and drop)与plupload的懒人上传HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能。 简述HTML5拖放拖放是HTML5标准的一部分,任何元素都能够拖放,也能够将本地的文件拖放到
Html5 Canvas 系列_绘图三(H5 拖放组件)
h5拖放组件,将图片拖放到目标DIV.
H5 drag&drop 写一个拖动定位的demo
概述 实现思路 运用h5新的apidragdrop具体属性阅读这里 具体实现 踩坑 兼容性 新增拖动只改变文本的值 新增依次移动效果 总结概述完成的效果是,父元素内的单个元素item可以通过拖拽定位。在线地址 ps:目前效果是拖拽目标以及定位目标互换位置,后面一点会做拖拽目标添加到定位目标之前,定位目标之后的元素一次向下移动实现思路 实现思路是每一个li标签都是一个可以成为拖拽目标的元素,
实现一个拖拽然后原路返回的功能
话不多说;直接上代码(复制粘贴即可使用) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"
html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽等
html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽等
H5拖拽应用——简单购物车
无标题文档 *{margin:0;padding:0;} li{list-style:none; float:left; width:200px; border:1px #000 solid; margin:30px;} li img{ height:260px;width:200px;} p{ height:20px; border-bottom:1px #333 dashed;}
H5图片上传,拖拽图片上传,裁剪图片上传
H5图片上传 参考: MDN Web 文档 : Using files from web applications MDN Web 文档 :FileReader 对象 一、选择文件上传 html <!-- 文件表单 --> <input type="file" id="input"
HTML5实现简单的拖放功能
HTML5实现简单的拖放功能
用原生JS实现HTML5的元素拖拽功能
昨天遇到的一个面试题,题目是这样的:页面上有个元素A和带放置元素B,实现将A拖拽并且下放到B,然后改变B的颜色。以下都是废话,抒发一下心情请跳过,直接看代码吧昨天写的比较简陋,今天想想在写一遍做个记录,越来越感受到每次面试都是一次很好的学习的机会。发现自己的不足,然后继续前进。希望昨天的面试s可以顺利通过,希望最后一个收获一个满意的offer吧!代码如下:大家有更好的实现方法,不妨跟我分享一下吧&...
实现拖拽上传图片h5
文章来自:源码在线https://www.shengli.me/h5/325.html    
自制html5拖拽功能实现的拼图游戏
<!--代码如下,最下面给出了我测试用的9张250*250的图片切片--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>drag拖拽</title> <style>
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 区块链技术怎么实现 用java实现班级通讯录