补间 Kineticjs 形状答案

【问题标题】：Tweening a Kineticjs Shape补间 Kineticjs 形状
【发布时间】：2014-02-07 13:51:17
【问题描述】：

我在 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 的高度。我再次尝试创建 Kinetic Tween，但它似乎不起作用。

【问题讨论】：

你能提供你想要的图片吗？
我不允许提供我正在使用的实际图像。我会给你占位符图像，就像你为我回答的最后一个问题一样。 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
我的问题是在 mspaint 中创建一个你想要的模拟？
好的，我加了一个例子
我还是不清楚

标签： javascript canvas kineticjs

【解决方案1】：

是的，您可以 Kinetic.Tween 一个 Kinetic.Shape——甚至是带有图案笔触的形状。

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

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

例如，这个 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，这反过来会为矩形设置动画。

例如，这个补间将动画一个名为 myShape 的 Kinetic.Shape 从它当前的 x/y 到 [100,100] 的 x/y。

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

[根据您之前关于图案描边线的一个问题的具体答案]

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

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

补间时的“重影问题”：

但是，当您想要补间这条充满图案的线条时，您会遇到“重影”问题，因为 Kinetic 实际上为每一层使用 2 个画布，并且您的图案填充线条错误地定位在第二个命中画布上（“重影” ”）。这是意料之中的，因为 Kinetic 无法知道您在实际的 html 上下文中绘制了什么。

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

这是一个 Fiddle，演示了您的图案填充线的解决方法：

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

【讨论】：