Question

请参阅我的示例：https://jsfiddle.net/ksumarine/x7f9yLb7/4/

我有一个.Stage有一个偏移量，它将0,0放在画布的底部中心。它有一个.Layer，它从x，y坐标数组中绘制一个对象路径的.Shape。

let routes = [{x: #, y: #}, {x: #, y: #}, ......] // example routes

let testStage = new Konva.Stage({
    container: con,
    x: 0,
    y: 0,
    width: 300,
    height: 300,
    offsetX: ((300 / 2) * -1),
    offsetY: (300 * -1)
});

let testLayer = new Konva.Layer();

let testShape = new Konva.Shape({
    sceneFunc: function(context) {
        context.beginPath();
        for (var i = 0; i < routes.length - 1; i++) {
            context.moveTo(routes[i].x, routes[i].y);
            context.lineTo(routes[i + 1].x, routes[i + 1].y);
        }
        context.strokeStyle = '#000';
        context.lineWidth = 1.5;
        context.stroke();
   }
});

testLayer.add(testShape);
testStage.add(testLayer);

////////////这里是按钮点击事件

animateButton.addEventListener('click', e => {
    let i = 0;
    let _ctx = testLayer.getContext()._context;
    let draw = () => {
        setTimeout(() => {
            if (routes.length) {
              _ctx.clearRect(0, 0, 300, 300);
              _ctx.beginPath();

              _ctx.moveTo(routes[0].x, (routes[0].y * -1));
              for (let p = 1, plen = i; p < plen; p++) {
                  _ctx.lineTo(routes[p].x, (routes[p].y * -1));
              }
             _ctx.strokeStyle = '#000';
             _ctx.lineWidth = 1.5;
             _ctx.stroke();
             (i === routes.length - 1) ? i = 0: i++;
           }
           requestAnimationFrame(draw);
         }, 1000 / 59.940);
    }
    draw();
 });

此时的所有内容都运行良好，路径按预期绘制。我想用Konva.Animation来展示对象是如何移动的，但我无法弄明白或找到任何帮助的例子。

我已经在按钮eventListener中添加了普通的Canvas JS作为所需效果的示例，但是使用testLayer上下文来绘制，将0,0放回到左上方...而不是我想要的。 / p>

有人能指出我使用Konva.Animation来实现这个目标吗？

Answer 1

对于那些遇到此问题的人，11月18日再次被问到，这次有两个答案。见他们here

Konva.js：是否可以为路径/形状设置动画？

1 个答案: