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