遮罩 Mask

      Mask 组件可以将 GameObject 的展示范围进行裁剪，使用前需要安装渲染器。

      Demo

      安装

      使用 NPM

      1. npm i @eva/plugin-renderer @eva/plugin-renderer-mask

      在浏览器中

      1. <script src=“https://unpkg.com/@eva/plugin-renderer-mask@1.2.x/dist/EVA.plugin.renderer.mask.min.js“></script>

      使用

      1. import { Game, GameObject, resource, RESOURCE_TYPE } from ‘@eva/eva.js’
      2. import { RendererSystem } from ‘@eva/plugin-renderer’
      3. import { Img, ImgSystem } from ‘@eva/plugin-renderer-img’
      4. import { Mask, MaskSystem, MASK_TYPE } from ‘@eva/plugin-renderer-mask’
      6. resource.addResource([
      7.   {
      8.     name: ‘heart’,
      9.     type: RESOURCE_TYPE.IMAGE,
      10.     src: {
      11.       image: {
      12.         type: ‘png’,
      13.         url: ‘//gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png’
      14.       }
      15.     },
      16.     preload: false
      17.   },
      18.   {
      19.     name: ‘tag’,
      20.     type: RESOURCE_TYPE.SPRITE,
      21.     src: {
      22.       image: {
      23.         type: ‘png’,
      24.         url: ‘//gw.alicdn.com/mt/TB1KcVte4n1gK0jSZKPXXXvUXXa-150-50.png’
      25.       },
      26.       json: {
      27.         type: ‘json’,
      28.         url: ‘//gw.alicdn.com/mt/TB1d4lse4D1gK0jSZFsXXbldVXa.json’
      29.       }
      30.     },
      31.     preload: true
      32.   }
      33. ])
      35. const game = new Game({
      36.   systems: [
      37.     new RendererSystem({
      38.       canvas: document.querySelector(‘#canvas’),
      39.       width: 750,
      40.       height: 1000
      41.     }),
      42.     new ImgSystem(),
      43.     new MaskSystem()
      44.   ]
      45. })
      47. game.scene.transform.size = {
      48.   width: 750,
      49.   height: 1000
      50. }
      52. const image = new GameObject(‘image’, {
      53.   size: { width: 200, height: 200 }
      54. })
      55. image.addComponent(
      56.   new Img({
      57.     resource: ‘heart’
      58.   })
      59. )
      60. game.scene.addChild(image)
      61. image.addComponent(
      62.   new Mask({
      63.     type: MASK_TYPE.Circle,
      64.     style: {
      65.       x: 100,
      66.       y: 100,
      67.       radius: 70
      68.     }
      69.   })
      70. )
      72. const image1 = new GameObject(‘image’, {
      73.   size: { width: 200, height: 200 },
      74.   position: { x: 400, y: 300 }
      75. })
      76. image1.addComponent(
      77.   new Img({
      78.     resource: ‘heart’
      79.   })
      80. )
      82. image1.addComponent(
      83.   new Mask({
      84.     type: MASK_TYPE.Img,
      85.     style: {
      86.       width: 100,
      87.       height: 100,
      88.       x: 20,
      89.       y: 20
      90.     },
      91.     resource: ‘heart’
      92.   })
      93. )
      94. game.scene.addChild(image1)
      96. const image2 = new GameObject(‘image’, {
      97.   size: { width: 200, height: 200 },
      98.   position: { x: 100, y: 400 }
      99. })
      100. image2.addComponent(
      101.   new Img({
      102.     resource: ‘heart’
      103.   })
      104. )
      106. image2.addComponent(
      107.   new Mask({
      108.     type: MASK_TYPE.Sprite,
      109.     style: {
      110.       width: 100,
      111.       height: 100,
      112.       x: 20,
      113.       y: 20
      114.     },
      115.     resource: ‘tag’,
      116.     spriteName: ‘task.png’
      117.   })
      118. )
      119. game.scene.addChild(image2)

      参数

      type: MARK_TYPE

      style: object

      类型Type属性
      圆形MASK_TYPE.Circle{style: {x,y,radius}}
      椭圆MASK_TYPE.Ellipse{style:{x,y,width,height}}
      矩形MASK_TYPE.Rect{style:{x,y,width,height}}
      圆角矩形MASK_TYPE.RoundedRect{style:{x,y,width,height,radius}}
      多边形MASK_TYPE.Polygon{style: {paths: [x,y,x,y,x,y]}} 或者 {style: {paths: [{x,y},{x,y},{x,y}]}}
      图片MASK_TYPE.Img{resource,style:{x,y,width,height}}
      精灵图MASK_TYPE.Sprite{resource,spriteName,style:{x,y,width,height}}

      ,