なぜ要素のmaskは要素と一緒に変位したり変形したりしないのですか?
2345 ワード
前に「双十一攻略ページ」を作っていたときにこの細部を発見しましたが、その時はあまり気にしていなかったので、今日また遭遇しました.
createjsのコード:
rect.y==0、スクリーンショットは以下の通りです.
rect.y==20、スクリーンショットは以下の通りです.
maskのBUG
maskの使用中に、要素のmaskは要素に従って変形(rotate,scale,skew)に変位しないことが分かった.
オリジナルcanvasにはmaskという概念はなく、maskはcss 3の
createjsのmaskから
CreateJSのドキュメントではmaskについて次のように説明しています.
A Shape instance that defines a vector mask (clipping path) for this display object. The shape's transformation will be applied relative to the display object's parent coordinates (as if it were a child of the parent).https://www.createjs.com/docs...
文書は、
ソースから分析:https://www.createjs.com/docs...
このブロックの論理は簡単です. Line 769「DisplayObjectインスタンス」にmaskが存在するか否かを判断し、第2ステップに進む場合は、第5ステップに進む は存在しない. Line 770はmaskのマトリクス情報を取得し、Line 771 ctxはmaskのマトリクスを累積する. Line 774 ctx.clip()ペイント可能領域をロックする(すなわち、マスクを追加する). Line 776 mtx.invert()はmaskと逆方向のマトリクスを生成し、Line 777 ctxはmaskの逆方向マトリクスを累積する. Line 780はインスタンスのマトリクス情報を取得し、Line 786 ctxはインスタンスのマトリクスを累積する.
第4ステップは、maskのマトリクスがそれ自体にのみ影響を及ぼすことを示す重要なステップである.
実は私もソースコードを見て初めて原生canvasには
結論
なぜ要素のmaskは要素と一緒に変位したり変形したりしないのですか?答えは:要素とmaskは兄弟関係です.
要素をmaskの変位と変形と同期させるにはどうすればいいですか?この要素に
createjsのコード:
var stage = new createjs.Stage(canvas);
var container = new createjs.Container();
var rect = new createjs.Shape();
rect.graphics.beginFill("#ff0000").drawRect(0, 0, 750, 1206);
var mask = new createjs.Shape();
mask.graphics.beginFill("#000000").drawRect(0, 0, 750, 100);
rect.mask = mask;
container.regX = container.regY = container.x = container.y = 375;
rect.y = 0; // 20, BUG
container.addChild(rect);
stage.addChild(container);
stage.update();
rect.y==0、スクリーンショットは以下の通りです.
rect.y==20、スクリーンショットは以下の通りです.
maskのBUG
maskの使用中に、要素のmaskは要素に従って変形(rotate,scale,skew)に変位しないことが分かった.
オリジナルcanvasにはmaskという概念はなく、maskはcss 3の
mask
属性の概念を借りてPIXI or CreateJSに現れたようだ.一方,原生Canvasはclip
法を用いてmask
効果を実現し,原生canvasの観点からmaskとmaskを適用する要素の地位は同等である.createjsのmaskから
CreateJSのドキュメントではmaskについて次のように説明しています.
A Shape instance that defines a vector mask (clipping path) for this display object. The shape's transformation will be applied relative to the display object's parent coordinates (as if it were a child of the parent).https://www.createjs.com/docs...
文書は、
mask
がmaskを適用した要素の親のサブ要素に相当することを明確に指摘しているが、簡単に言えば、maskとmaskを適用した要素は兄弟関係(平級)である.このように、maskとmaskを適用した要素は互いに独立した2つの要素であり、これも「要素のmaskが要素に従って変位したり変形したりしない」根本的な原因であると言える.ソースから分析:https://www.createjs.com/docs...
このブロックの論理は簡単です.
第4ステップは、maskのマトリクスがそれ自体にのみ影響を及ぼすことを示す重要なステップである.
mtx.invert
メソッドの定義は、次のとおりです.https://www.createjs.com/docs... 実は私もソースコードを見て初めて原生canvasには
clip
という方法があることを知った.これまでmaskはglobalCompositeOperation
で実現されたと勘違いしていたので、maskを適用した後、性能に影響を与えるかどうか疑問に思っていたが、今から見れば、maskは性能に影響を与えない.結論
なぜ要素のmaskは要素と一緒に変位したり変形したりしないのですか?答えは:要素とmaskは兄弟関係です.
要素をmaskの変位と変形と同期させるにはどうすればいいですか?この要素に
container
を装着し、変位と変形はこのcontainerによって完成した.