補間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形狀

回答

相關問題