KineticJS - 繪製複雜的形狀

我想在KineticJS中創建一個複雜的形狀。KineticJS - 繪製複雜的形狀

我嘗試了很多方法，並搜索了很多，我得出結論，我應該創建一個新的Kinetic.Shape的內容。但是當我這樣做時，形狀被創建，但沒有填充。

全黑。

這裏是我的代碼：「dude.js」的內容

var complexShape = new Kinetic.Shape({ 
     drawFunc: function(){ 
     <?php include_once "script/dude.js" ?> 
    } 
}); 

//Add the shape to the layer 
layer.add(complexShape);

部分：（整件事是約4000線）

var ctx = this.getContext(); 
    // calque1/Groupe 
    ctx.save(); 

    // calque1/Groupe/Groupe 
    ctx.save(); 

    // calque1/Groupe/Groupe/Trac 
    ctx.save(); 
    ctx.beginPath(); 
    ctx.moveTo(325.6, 98.6); 
    ctx.bezierCurveTo(322.3, 86.4, 322.7, 73.7, 326.7, 60.6); 
    ctx.bezierCurveTo(317.3, 47.6, 309.7, 39.8, 303.7, 37.0); 
    ctx.bezierCurveTo(295.8, 42.3, 290.8, 61.0, 288.7, 93.1); 
    ctx.bezierCurveTo(283.5, 71.4, 282.5, 51.1, 285.7, 32.0); 
    ctx.bezierCurveTo(280.5, 22.3, 275.1, 14.8, 269.5, 9.5); 
    ctx.bezierCurveTo(265.6, 5.8, 261.7, 3.1, 257.6, 1.5); 
    ctx.bezierCurveTo(256.8, 4.1, 256.0, 6.8, 255.3, 9.5); 
    ctx.bezierCurveTo(249.2, 31.9, 247.5, 53.9, 250.1, 75.5); 
    ctx.lineWidth = 3.0; 
    ctx.strokeStyle = "rgb(75, 39, 111)"; 
    ctx.lineCap = "round"; 
    ctx.lineJoin = "round"; 
    ctx.stroke();

結果普通帆布VS KineticJS：

http://i.imgur.com/bM7ugyC.jpg

來源

2013-11-15 mykadam

你沒有正確使用Shape類。您需要訪問傳遞到繪圖函數的Kinetic上下文對象。另外，正如Mark指出的那樣，您需要使用Kinetic.Context方法來處理填充和筆劃。速記符號是在繪圖函數的末尾使用context.fillStrokeShape（this）。看看這個教程：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

另外，您還可以使用路徑插件，它可以讓你與SVG路徑定義形狀。這裏有一個教程：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/

來源

2013-11-16 22:07:45

嗯，我現在明白了！我可能需要一段時間來創建所有這些形狀。謝謝埃裏克！ – mykadam

Kinetic.Shape給你一個圍繞畫布上下文的包裝，而不是實際的HTML畫布上下文。

要執行衝程/填充，你打電話給你drawFunc

這片神奇的方法，這裏面的「神奇」的方法調用，然後填寫（）和中風（）的實際背景。

// both fill and stroke 

context.fillStrokeShape(this);

但是，您還有其他問題。

單個Kinetic.Shape只會在drawFunc中做1個填充和描邊。

因此，具有多個填充和描邊的複雜形狀將不起作用。

你至少有2種選擇：

使用包含多個Kinetic.Shape對象的一組。
「欺騙」通過獲取實際的畫布背景：var ctx=this.getContext()._context

來源

2013-11-15 19:26:22 markE

謝謝馬克！「作弊」的工作，但我不想這樣做，不那麼幹淨，我有一些錯誤。我可以使用一組形狀。 – mykadam

KineticJS - 繪製複雜的形狀

回答

相關問題