canvasにおける合成(compositeOperation)に関してです。
compositeOperationは2つの要素が重なる場合に適応されますが、
1つのcanvasの中に2つ以上のcompositeをさせたい場合、
どのように考えればいいでしょうか。
###背景をテキストでマスクさせたい
[インスタンス]
bg:背景
txt:テキスト
javascript
1txt.compositeOperation = 'destination-atop';//重なっている部分だけ残す 2stage.addChild(bg, txt);
2つの場合は正常に合成がされます。
しかし、切り抜きたいテキストが2つ以上の要素がある場合・・
[インスタンス]
bg:背景
txt01:テキスト01
txt02:テキスト02
javascript
1txt01.compositeOperation = 'destination-atop';//重なっている部分だけ残す 2txt02.compositeOperation = 'destination-atop';//重なっている部分だけ残す 3stage.addChild(bg, txt, txt02);
txt01とtxt02をbgで切り抜きたいのですが、
txt02の背面はtxt01なので当然正常に動作せず・・。
そこでcreate.jsのcontainerを使用して、
そのcontainer内だけで合成を完結させようとするも・・
javascript
1txt01.compositeOperation = 'destination-atop';//重なっている部分だけ残す 2txt02.compositeOperation = 'destination-atop';//重なっている部分だけ残す 3 4var container01 = new createjs.Container(); 5container01.addChild(bg,txt01); 6 7var container02 = new createjs.Container(); 8container01.addChild(bg,txt02); 9 10stage.addChild(container01,container02);
やはり正常に動作せず、compositeOperationはcontainerを突き抜けて、
canvas全体に影響を与えてしまうようです。
そのため、現状はテキストごとにcanvasを作りわけていますが、
canvasの数が多くなりすぎ、パフォーマンスも悪くなってしまっています。
どうにか1つのcanvas内でconpositeを何種類も使い分ける方法はないでしょうか?
どうぞよろしくお願い致します。
あなたの回答
tips
プレビュー