补间动力学形状

Question

我有一个在Kineticjs中创建的自定义形状，我需要像线一样补间的形状。我该怎么做呢？我尝试过创建一个Kinetic Tween，但这似乎无法正常工作。

var grnStripe = new Image();
grnStripe.onload = start;
grnStripe.src = 'images/GreenStripe-01.png';
function start(){
grnLine = new Kinetic.Shape({
    sceneFunc: function (context) {
        var ctx = this.getContext()._context;
        var pattern = context.createPattern(grnStripe, 'repeat');
        ctx.beginPath();
        ctx.moveTo(379.5, 270);
        ctx.lineTo(379.5, 270);
        ctx.strokeStyle = pattern;
        ctx.lineWidth = 2.5;
        ctx.stroke();
    }
});
line_layer.add(grnLine);
line_layer.draw();
}

我希望形状（线）补间到310的高度。再次，我试图创建一个动能补间，但它似乎不起作用。

Answer 1

是的，你可以Kinetic.Sween一个Kinetic.Shape - 甚至是一个有图案笔划的形状。

[关于补充Kinetic.Shape的一般答案]

补间Kinetic.Shape的关键是使用Kinetic.Shape属性进行sceneFunc更改。

例如，这个sceneFunc将根据Kinetic.Shape的x＆amp; x绘制一个矩形。 y属性。

sceneFunc: function(context) {
  var x=this.x();
  var y=this.y();
  context.fillRect(x,y,20,20);
},

然后你可以使用Kinetic.Tween来改变Kinetic.Shapes的x / y，这样就可以为rect设置动画。

例如，此补间会将名为myShape的Kinetic.Shape从其当前x / y设置为动画，并将x / y设置为[100,100]。

tween = new Kinetic.Tween({
    node: myShape, 
    duration: 1,
    x: 100,
    y: 100,
  });

[基于您之前关于模式描边线的问题的具体答案]

Kinetic.Shape上下文不允许您绘制图案描边线。

作为一种解决方法，您可以获取实际的html上下文，该上下文允许使用模式描边线。

补间时出现“重影问题”：

然而，当你想补间这个充满图案的线条时，你会遇到“鬼影”问题，因为Kinetic实际上为每一层使用了2个画布，并且你的图案填充线错误地定位在第二个击中画布上（一个“幽灵”） “）。这是可以预料的，因为不能期望Kinetic能够知道你在实际的html环​​境中得到了什么。

您可以通过在自定义Kinetic.Shape中定义hitFunc来解决此重影问题。这允许Kinetic正确地将您的图案填充线放置在其第二个命中画布上。鬼影消失了。

这是一个小提琴演示了模式填充线的解决方法：

http://jsfiddle.net/m1erickson/GpSbd/