Question

在Konva中是否可以沿lline /路径设置形状（标记，圆形）的动画。我尝试手动计算一段时间内的位置，但这仅在直线从A到B的情况下才可行，但是我对贝塞尔曲线和多个路径点感兴趣。

所以我想知道Konva是否支持这种事情，或者有人可以为如何解决这个问题提供指导。

Answer 1

您已经确定，Path对象在getLength（）中有一些方便的方法来查找总路径长度，并可以使用getPointAtLength（）来查找沿长度的任何给定点的（x，y）。

以防万一，我从another snippet from this other question.的输出中构建了路径数据

var data = [{"x":34,"y":34},{"x":84,"y":64},{"x":141,"y":79},{"x":181.5,"y":78.5},{"x":218,"y":62},{"x":223,"y":40},{"x":240,"y":26},{"x":259.5,"y":25},{"x":271,"y":40},{"x":292.5,"y":53},{"x":311.25,"y":55.5},{"x":330.625,"y":46.75},{"x":332.3125,"y":30.375},{"x":349.15625,"y":10.1875},{"x":374.578125,"y":10.09375},{"x":392,"y":26},{"x":411,"y":36},{"x":444.5,"y":37},{"x":453.875,"y":27.25},{"x":463.25,"y":17.5},{"x":472.9375,"y":10.625},{"x":494.625,"y":15.75},{"x":530,"y":48},{"x":534,"y":88},{"x":540,"y":150},{"x":552,"y":198},{"x":544,"y":227},{"x":522,"y":256},{"x":504.5,"y":263},{"x":471,"y":262},{"x":448,"y":252},{"x":372,"y":214},{"x":290,"y":146},{"x":256,"y":100},{"x":198,"y":104},{"x":182,"y":140},{"x":204,"y":185},{"x":203,"y":201.5},{"x":190,"y":214},{"x":174.5,"y":218},{"x":155,"y":214},{"x":124,"y":222},{"x":113.5,"y":232.5},{"x":95,"y":227},{"x":75.5,"y":211.5},{"x":72,"y":188},{"x":58,"y":136}]

// Set up the canvas / stage
var stage = new Konva.Stage({container: 'container1', width: 600, height: 300});

// Add a layer for line
var layer = new Konva.Layer({draggable: false});
stage.add(layer);

// draw a path.
    var path = new Konva.Path({
      x: 0,
      y: 0,
      stroke: 'cyan'
    });
layer.add(path)

// Load the path points up using M = moveto, L = lineto.
var p = "M" + data[0].x + " " + data[0].y;
for (var i = 1; i < data.length; i = i + 1){
  p = p + " L" + data[i].x + " " + data[i].y;
}
path.setData(p);

// add a circle to be animated along the path
var circle = new Konva.Circle({ x: data[0].x, y: data[0].y, radius: 10, fill: 'Magenta'});
layer.add(circle);

stage.draw();

$('#reset').on('click', function(){

  // Now animate a circle along the path
  var steps = 50; // number of steps in animation
  var pathLen = path.getLength();
  var step = pathLen / steps;
  var frameCnt = 0, pos =0, pt;

    anim = new Konva.Animation(function(frame) {
        pos = pos + 1;
        pt = path.getPointAtLength(pos * step);
        circle.position({x: pt.x, y: pt.y});    
    }, layer);

  anim.start();
})

$('#reset').trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<button style='position: absolute; z-index: 10;' id='reset'>Go</button>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
<div id='img'></div>

在Konva中沿线或路径对形状进行动画处理

1 个答案: