补间Kineticjs形状

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();
}

我希望shape（line）补间到310的高度。再次，我尝试创建Kinetic Tween，但似乎不起作用。

Answer 1

是的，您可以Kinetic.Tween Kinetic.Shape-甚至具有图案笔触的形状。

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

关键要补间一个Kinetic.Shape是有sceneFunc使用Kinetic.Shape属性更改。

例如，此sceneFunc将基于Kinetic.Shape的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成为动画。

例如，此补间动画从当前的x / y到x / y为[100,100]的Kinetic.Shape动画为myShape。

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/