Flash cc + html 5：移动之间画线objects

Question

我是一名动画师，正试图涉足编码领域，但我对基础知识有些迷茫。

这是一个简单的角色行走循环，我正在尝试在 body [ManBody] 和脚部 [foot01] 之间使用代码 [arcTo] 绘制腿部。

线条继续绘制，body 移动 - 但线条在每一帧都重新绘制 - How/Where 我 stage.update();所以它只是一条绘制到舞台上的线，然后在移动部件之间移动？

//mouse cursor
stage.canvas.style.cursor = "none";
this.ManBody.mouseEnabled = false;
this.addEventListener("tick", fl_CustomMouseCursor.bind(this));

function fl_CustomMouseCursor() {
    this.ManBody.x = (stage.mouseX+350) * 0.5 ;
    this.ManBody.y = (stage.mouseY+200) * 0.5;
}

//line
createjs.Ticker.addEventListener("tick",fl_DrawLineCont.bind(this));
createjs.Ticker.setFPS(10);

function fl_DrawLineCont(event) {

var stroke_color = "#ff0000";
var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color)
.moveTo(this.ManBody.x, this.ManBody.y)
.arcTo(this.foot01.x, this.foot01.y, this.ManBody.x, this.ManBody.y, 50).endStroke());
this.addChild(shape);
    stage.update(event);
}

Answer 1

你每帧都创建形状，你应该在这个之外创建它并像这样重新绘制它的图形：

var stroke_color = "#ff0000";
var graphics = new createjs.Graphics()
var shape = new createjs.Shape(graphics);
this.addChild(shape);
function fl_DrawLineCont(event)
{
    graphics.clear();
    graphics.beginStroke(stroke_color);
    graphics.moveTo(this.ManBody.x, this.ManBody.y).arcTo(this.foot01.x, this.foot01.y, this.ManBody.x, this.ManBody.y, 50).endStroke();
    stage.update(event);
}

Flash cc + html 5：移动之间画线objects

Flash cc + html 5: draw lines between moving objects

html

javascript

flash

flash-cc