0

KineticJS で結合された画像ファイル (スプライト) から部分的な画像 (クロップ) で形状を塗りつぶす「正しい」方法について少し混乱しています。

画像の残りの部分は見えませんが、完全な画像を描画するように見える、定義されたオフセットで fillPatternImage を使用できるようです。スプライトが比較的大きく、適切にトリミングされていないことの影響により fps が劇的に低下したため、これらの形状を追加のレイヤーに移動した後、許容できるパフォーマンスしか得られませんでした。

私が見つけたすべての選択肢は、属性「塗りつぶし」と別の属性「画像」を使用していますが、これは毎回黒い背景になるようです。

Image-shape を使用すると役立ちますが、私の形状が長方形になることはめったにないため、ほとんど使用できません。

KineticJS のドキュメントでは、トリミング座標の指定 (「ちょうど」のオフセット、幅と高さなし) について言及されていないため、絶対に正しい方法は何ですか?

4

1 に答える 1

0

絶対的な「絶対的な正しい方法」は、プラットフォームと特定のコードによって異なりますが、.

スプライトを見たことがありますか？http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-sprite-tutorial/ .

単純なアニメーション スプライトをマスクするには、各描画の後に単純な JavaScript に加えてこれを使用します。

context.globalCompositeOperation = 'destination-in';

少なくとも、複合操作を使用した drawImage のパフォーマンスは、Webkit で手動で形状を描画するよりも優れています。

于 2013-03-12T14:18:18.350 に答える