是否可以在 Konva 中为沿线/路径的形状(标记、圆圈)设置动画。我试图随着时间的推移手动计算位置,但这只有在直线从 A 到 B 的情况下才可行,但我对贝塞尔曲线和多个路径点感兴趣。
所以我想知道 Konva 是否支持这种事情,或者有人可以指导如何解决这个问题。
是否可以在 Konva 中为沿线/路径的形状(标记、圆圈)设置动画。我试图随着时间的推移手动计算位置,但这只有在直线从 A 到 B 的情况下才可行,但我对贝塞尔曲线和多个路径点感兴趣。
所以我想知道 Konva 是否支持这种事情,或者有人可以指导如何解决这个问题。
正如您所确定的,Path 对象在 getLength() 中有一些方便的方法来查找总路径长度,而 getPointAtLength() 则可用于沿长度的任何给定点查找 (x,y)。
如果它对任何人有帮助,我会从另一个问题的另一个片段的输出中构建路径数据。
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>