为什么元素的 mask 不跟随元素一起位移或形变？

JouyPub 发布于2019-08-21 17:31 / 1201人阅读

摘要：可以这样说，和应用了的元素是两个彼此独立的元素，这也是元素的不跟随元素一起位移或形变的根本原因。结论为什么元素的不跟随元素一起位移或形变答案是元素与是兄弟关系。

之前在做「双十一攻略页」的时候就发现这个细节，但是当时没有太在意，今天又遇到了。

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 更像是借用了 css3 中的 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 相当于(as if) 应用了 mask 的元素的父级的子元素；简单地说，mask 与应用了 mask 的元素是兄弟关系（平级）。可以这样说，mask 和应用了 mask 的元素是两个彼此独立的元素，这也是「元素的 mask 不跟随元素一起位移或形变」的根本原因。

从源码上分析：https://www.createjs.com/docs...

这一块的逻辑很简单：

Line769 判断「DisplayObject实例」是否存在 mask，如果存在进入第二步，不存在进入第5步

Line 770 获取 mask 的矩阵信息，Line 771 ctx 累加（transfrom） mask 的矩阵;

Line 774 ctx.clip() 锁定可绘画区（即添加蒙层）；

Line 776 mtx.invert() 生成一个与 mask 反向的矩阵，Line 777 ctx 累加 mask 的反向矩阵；

Line 780 获取实例的矩阵信息，Line 786 ctx 累加实例的矩阵。

第4步其实很重要，它表示 mask 的矩阵只对它自身产生影响。
mtx.invert 方法的定义在：https://www.createjs.com/docs...

其实我也是看了源码才知道原生 canvas 还有一个叫 clip 的方法，之前我一直误以为 mask 是用 globalCompositeOperation 实现的，所以我一起怀疑应用了 mask 后会不会影响到性能，如今看来：mask 并不会影响性能。

结论

为什么元素的 mask 不跟随元素一起位移或形变？
答案是：元素与 mask 是兄弟关系。

如何让元素与它mask的位移与形变同步？
给这个元素套上一个 container，位移和形变由这个 container 完成。

私有云专线服务元素的样式 html新增的元素 java的表格元素 jsp的语法元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89626.html

为什么元素的 mask 不跟随元素一起位移或形变？

摘要：可以这样说，和应用了的元素是两个彼此独立的元素，这也是元素的不跟随元素一起位移或形变的根本原因。结论为什么元素的不跟随元素一起位移或形变答案是元素与是兄弟关系。之前在做「双十一攻略页」的时候就发现这个细节，但是当时没有太在意，今天又遇到了。 createjs 的代码： var stage = new createjs.Stage(canvas); var container = n...

yimo 2019-08-05 17:58 评论0 收藏0
Matlab实现二维数字图像相关（2D Digital Image Correlation, 2D-

摘要：数字图像相关技术按照其测量的维数，可以被分为二维数字图像相关和三维数字图像相关。注意，没有使用形变子区中心点作为参考点，是有两个原因的，第一个原因是由于本身对于我们来说依然是未知点，它只不过是一个 ...

nifhlheimr 2021-11-23 09:51 评论0 收藏0
canvas-深入与应用秘籍

摘要：优点避免掉帧完全依赖浏览器的绘制频率，从而避免过度绘制，影响电池寿命。滤镜介绍返回一个对象，用来描述区域隐含的像素数据，这个区域通过矩形表示，起始点为宽为高为。作用是创建一个新的空的特定尺寸的对象。前言去年在公司内部做了一次canvas的分享，或者说canvas总结会更为贴切，但由于一直都因为公事或者私事，一直没有把东西总结成文章分享给大家，实在抱歉~分享这篇文章的目的是为了让同学...

denson 2019-08-05 18:13 评论0 收藏0