dadafgf 2019-01-22 11:46 采纳率: 100%
浏览 624
已采纳

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中的编程逻辑,还请大神指点!

  • 写回答

1条回答

  • dadafgf 2019-01-22 13:51
    关注

    解决了,在命令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();
    

    }

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥50 winform中使用edge的Kiosk模式
  • ¥15 关于#python#的问题:功能监听网页
  • ¥15 怎么让wx群机器人发送音乐
  • ¥15 fesafe材料库问题
  • ¥35 beats蓝牙耳机怎么查看日志
  • ¥15 Fluent齿轮搅油
  • ¥15 八爪鱼爬数据为什么自己停了
  • ¥15 交替优化波束形成和ris反射角使保密速率最大化
  • ¥15 树莓派与pix飞控通信
  • ¥15 自动转发微信群信息到另外一个微信群