easeljs-canvas - 请问createjs中如何让container切除超出container大小的子元素图形

问题描述

问 题

在一个用Easeljs的项目中，遇到了需要一个容器（作为游戏中某一个小屏幕），容器内的显示元素会超出容器外，但是超出的部分仍旧会被正常显示，效果如图：

图片中蓝色区域是container的范围，红色的钩爪是container中的Bitmap元素，但是显然它超出了container的范围，但仍旧完整地显示了出来。

我知道有一个hack的方法是单独建一个stage用作屏幕的canvas，就可以实现边缘外切除的效果，但是想知道有没有正常的方法能实现这样的效果？

解决方案

/**

• 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).

• @property mask

• @type {Shape}

• @default null
  */

this.mask = null;

官方API中写到了container类有一个属性叫做mask，设置container的元素的mask为想要作为遮罩的shape类型元素即可实现遮罩，经测试如图：

这篇关于easeljs-canvas - 请问createjs中如何让container切除超出container大小的子元素图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！