补间Kineticjs形状

我有一个在Kineticjs中创建的自定义形状，我需要形状补间就像一条线。我会如何去做这件事？我试过创建一个动力学补间，但似乎不能正常工作。补间Kineticjs形状

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的高度再一次，我试图创建一个动力学吐温，但它似乎没有工作。

Mock of what I need

来源

2014-02-07 User

你可以提供你想要的形象呢？ –

我不允许提供我正在使用的实际图片。我会像给你回答的最后一个问题一样给你占位符图像。 ''http：// www.html5canvastutorials.com/ demos/assets/yoda.jpg'' – User

我的问题是在mspaint中创建一个模拟你想要什么？ –

是的，你可以Kinetic.Tween一个Kinetic.Shape - 甚至是用图案描边形状。

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

到补间使用Kinetic.Shape属性Kinetic.Shape由具有sceneFunc变化的键。

例如，此sceneFunc将根据该Kinetic.Shape的属性绘制矩形。

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设置为和x/y [100,100]。

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

[一个明确的答案基于你以前的约图案描边线的问题之一]

的Kinetic.Shape背景不容许你画一个图案描边线。

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

A“重影问题”补间时：

但是，当你想吐温你有一个“鬼影”问题这个图案填充线，因为动力学实际使用2个画布的每个层和你的图案 - 填充线不正确地位于第二个命中画布上（“鬼”）。这是可以预料的，因为Kinetic不能期望知道你在你的实际html上下文中绘制了什么。

您可以通过在自定义Kinetic.Shape中定义hitFunc来修复此重像问题。这可以让Kinetic正确地将您的图案填充线放置在第二个打印画布上。重影消失了。

下面是一个小提琴展示您的图案填充线的解决方法：

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

来源

2014-02-07 19:58:19 markE

补间Kineticjs形状

回答

相关问题