实现html5拖曳论文,在Adobe Animate 中实现在 Html5 Canvas 中拖动动画元素 – 微维WeiVa...

在Animate创建的H5内容中,虽然没有直接的拖放API,但可以通过JavaScript来实现元素拖动。通过监听"pressmove"事件,结合全局到本地坐标的转换,可以实现元素跟随鼠标移动的效果。此方法适用于桌面浏览器,暂不支持手机触摸拖动。
摘要由CSDN通过智能技术生成

在Animate制作H5交互内容中,让一个元素能够被鼠标拖动,是以个常用的功能,但是在当前的An版本中,没有关于生成Html Canvas交互的CreateJS api手册,也没有像as3里的拖放、触控和拖动代码片段。不过,既然导出的H5是基于js交互的,那么就可以使用js的方式来解决:

//dragableCar 是一要拖动的原件

this.dragableCar.addEventListener("pressmove", followFinger.bind(this));

function followFinger() {

console.log("X:"+this.parent.mouseX + " Y:"+this.parent.mouseY);

//转换外界坐标到本地坐标

var newPoint = this.globalToLocal(this.parent.mouseX,this.parent.mouseY);

console.log("X:"+newPoint.x + " Y:"+newPoint.y);

this.dragableCar.x = newPoint.x;

this.dragableCar.y = newPoint.y;

}

注:暂不支持在手机上用手拖动

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值