KineticJS - 複雑な形状を描く

StackOverflow https://stackoverflow.com//questions/20006048

  •  20-12-2019
  •  | 
  •  

質問

KineticJSで複雑な形状を作成したいと思います。

私は多くの方法を試してたくさん検索しました、そして、私は新しいキネチックを作成するべきという結論に来ました。しかし、私がするとき、形は作成されますが、塗りつぶしされていません。

それはすべて黒です。

これが私のコードです：

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

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

"dude.js"の内容の一部:(全体は約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();
.

結果通常キャンバス対KineticJS：

href="http://i.imgur.com/bm7ugyc.jpg" REL="noFollow">> http://i.imgur.com/bm7ugyc.jpg

役に立ちましたか？

解決

形状クラスを正しく使用していません。描画関数に渡されたキネティックコンテキストオブジェクトにアクセスする必要があります。また、マークが指摘されているように、FillsやStrokesを処理するためにKinetic.Contextメソッドを使用する必要があります。短縮表記は、描画関数の最後にcontext.fillstrokehape（これを）を使用することです。このチュートリアルを見てください：

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

あるいは、SVGパスでシェイプを定義できるパスプラグインを使用することもできます。これについてのチュートリアルがあります：

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

他のヒント

Kinetic.Shapeは、キャンバスのコンテキストの周囲にラッパーを与えます。実際のHTMLキャンバスコンテキストではなく、

ストローク/塗りつぶしを実行するには、drawFunc

内部にこの "Magic"メソッドを呼び出します。

このMagicメソッドは、実際のコンテキストでfill（）とstroke（）を呼び出します。

// both fill and stroke

context.fillStrokeShape(this);
.

もう1つの問題があります。

単一のキネチカル。Shapeは、DurpFunc内に1つの充填とストロークしかやるでしょう。

そのため、複数の塗りつきやストロークを持つ複雑な形状は機能しません。

あなたは少なくとも2つの選択肢を持っています：

  1. 複数のキネチカルを含むグループを使用します。

    2. 実際のキャンバスのコンテキストを取得することで

  2. 「チート」：var ctx=this.getContext()._context

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top