問題タブ [globalcompositeoperation]

私はKinetic JSにかなり慣れていません。私が持っているプロジェクトの 2 つの部分でいくつかの .globalCompositeOperation を動作させようとしています。「drawFunc」や「sceneFunc」などを使用して、ここで見つけることができるいくつかの解決策を試しましたが、これまでのところ運がありません。

プロジェクトの一部 'destination-out' を kinetic.Sprite で動作させようとしています:

「backgroundPainted」は Kinetic.Image です。

残念ながら、ここで得られるのは、「backgroundPainted」の上でアニメーション化されているスプライトレイヤーだけですが、複合操作は適用されていません:(。

私が持っている2番目のインスタンスでは、実際には非常に似ています.2つのレイヤーがあり、両方とも内部に形状があり、ステージに追加されています. 上のレイヤーに同じ「sceneFunc」を適用してから描画します。レイヤーは両方とも表示され、コンポジションは適用されません。:(

私が何を見なければならないかについての指針はありますか？たとえば、'drawFunc' が最近 'sceneFunc' に変更されたことがわかります。スタック上でここで見つけることができるほとんどすべての例を試したので、他の何かが変更された可能性があります。

ありがとう

Photoshop のようなプログラムを作りたいです。そこで、globalCompositeOperationを変更して、レイヤーのブレンド プロパティをシミュレートしようとしました

ただし、Kinetic.ContextはglobalCompositeOperationプロパティを実際のcontetx2dに渡しません。

コードをトレースした後http://pastebin.com/4neU7VF8 (変更された kineticJs へのリンクも含まれています)

このようなアクションを可能にするために、 Kinetic.Contextを変更します。

そして、Kinetic.Nodeを変更して、どのglobalCompositeOperationが設定されたかを記憶するようにします。

そして、kinetic.Container.prototype._drawChildrenを変更して 、子ノードが要求するglobalCompositeOperationに基づいて、コンテキストのglobalCompositeOperationを自動的に切り替えるようにします。

それをした後。実際には、 Kinetic.LayerにはいくつかのKinetic.Shapeが含まれています。

ただし、ステージに2つのレイヤーが含まれ、最上位レイヤーにglobalCompositeOperation属性があるなど、ネストされたコンテナでは機能しないようです。レイヤーにこのhttp://jsbin.com/tumef/16/の赤い線が含まれているように

誰かがアイデアを持っていますか、私は何を見逃しましたか?

multiplyHTML キャンバスに描画するときは、ブレンド モードを使用する必要があります。

最新の Chrome/Firefox では期待どおりの結果が得られますが、IE 11 では得られません。クラッシュはしませんが、globalCompositeOperationプロパティを指定しない場合と同じ結果が得られます。

multiplyブラウザーがブレンディング モードをサポートしているかどうかをプログラムでテストするにはどうすればよいですか?

だから私は最近、パーティクルシステムでよく遊んでいます。花火を作ろうと思っていたのですが、「トレイル」の作り方を学ぶ過程で行き詰まりました。私が理解している限り、塗りつぶしスタイルが rgba(0,0,0,0.5); の場合、globalcompositeoperation の destination-out はキャンバス上に黒い透明な画像を置く必要があります。しかし、奇妙なことに、これを行うとキャンバスが白くなります。ここでなぜ、または何が間違っているのかわかりません。ここにペンがあります

私が取り組んでいることに。これは私がグローバルコンポジットを扱っているだけなので……そうです。

私はキャンバスが初めてで、DOM (HTML+JS) アニメーションをキャンバスに移動したいと考えていました。Basic animations - Web API Interfaces |太陽系のアニメーションを真似てみました。MDNと私はそれを行うことができました。フィドル。

に関して問題がありglobalCompositeOperationます。アニメーションでは、地球が影を落としています (不透明度の低い長方形)。月がこの暗い領域を周回しているとき、月は影の長方形の下にあるはずです。私が使用する場合

関数の上部でdraw、意図した結果 ( fiddle ) が得られますが、月と地球は軌道線の下で回転します。私はそれをしたくありません。地球と月の両方が軌道線の上にあり、月が影の四角形の下にあるようにします。それを行う方法はありますか？そうでなければ、影を取り除かなければなりません。

元のアニメーションでは使用されていますが、コードでは使用context.save()しませんでした。context.restore()私は彼らに詳しくありません。私の問題に関連している可能性があります...

Globalcomposite は html5 キャンバスで利用できます。threejsで利用できますか？three.jsで目的地アウト複合操作を実装する方法は?

ありがとうございました。

2D キャンバスに描画するためのさまざまなglobalCompositeOperation オプションdestination-overを確認したところ、基本的にデフォルトと同じですsource-overが、要素が逆に描画されていることがわかりました。

キャンバスが構成を計算してピクセルを描画するときに、これら2つの操作にパフォーマンスの違いがあるかどうかを誰かが知っているかどうか疑問に思っていました。