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