canvas - キャンバス コンテキストで KineticJS 形状を直接描画することは可能ですか?

Question

Jaws フレームワークを使用して小さなゲームを作成しています。KineticJS を使用して、キャンバス コンテキストにいくつかの図形を描画したいと考えています。最初にステージとレイヤーを作成せずに、コンテキストに直接形状を描画することは可能ですか? 何かのようなもの

var circle = new Kinetic.Circle({...params...);
circle.draw(myContext);

Answer 1

各 KineticJS オブジェクトには、そのプロパティとして drawFunc があると思います。それを取り出してキャンバスに直接貼り付けることができれば、ステージやレイヤーは必要ないのではないでしょうか。

しようとしています...

うーん..いいえ。drawFunc はオブジェクト依存のプロパティを使用しています。つまり、this.getRadius() です。

ただし、drawFunc を出力することで、どのように描画されるかを確認できます。

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
var circle = new Kinetic.Circle({
    x: 250,y: 250, radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4
});

console.log(circle.drawFunc);
</script>

その console.log コマンドの出力を次に示します。

function (canvas) {
    var context = canvas.getContext();
    context.beginPath();
    context.arc(0, 0, this.getRadius(), 0, Math.PI * 2, true);
    context.closePath();
    canvas.fillStroke(this);
}