九宫格 NinePatch

      我们经常会遇到一些尺寸不固定，但是周围或四遍样式不变形的图片，也就是 .9 图，例如消息气泡，如果直接设置宽高会将整个气泡图片拉变形。 下图中，第二个是通过九宫格创建的气泡，最后一个是直接把图片拉伸创建的，前两个明显符合预期。Demo

      image.png

      安装

      使用 NPM

      1. npm i @eva/plugin-renderer @eva/plugin-renderer-nine-patch

      在浏览器中

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

      使用

      1. import { Game, GameObject, resource, RESOURCE_TYPE } from ‘@eva/eva.js’
      2. import { RendererSystem } from ‘@eva/plugin-renderer’
      3. import { NinePatch, NinePatchSystem } from ‘@eva/plugin-renderer-nine-patch’
      5. resource.addResource([
      6.   {
      7.     name: ‘nine’,
      8.     type: RESOURCE_TYPE.IMAGE,
      9.     src: {
      10.       image: {
      11.         type: ‘png’,
      12.         url: ‘https://img.alicdn.com/tfs/TB17uSKkQ9l0K4jSZFKXXXFjpXa-363-144.png‘
      13.       }
      14.     },
      15.     preload: false
      16.   }
      17. ])
      19. const game = new Game({
      20.   systems: [
      21.     new RendererSystem({
      22.       canvas: document.querySelector(‘#canvas’),
      23.       width: 750,
      24.       height: 1000,
      25.       backgroundColor: 0xffffff
      26.     }),
      27.     new NinePatchSystem()
      28.   ]
      29. })
      31. const patch = new GameObject(‘patch’, {
      32.   size: { width: 360, height: 145 },
      33.   origin: { x: 0, y: 0 },
      34.   position: {
      35.     x: 10,
      36.     y: 10
      37.   },
      38.   anchor: {
      39.     x: 0,
      40.     y: 0
      41.   }
      42. })
      43. const ninePatch = patch.addComponent(
      44.   new NinePatch({
      45.     resource: ‘nine’,
      46.     leftWidth: 100,
      47.     topHeight: 40,
      48.     rightWidth: 40,
      49.     bottomHeight: 40
      50.   })
      51. )
      53. const patch1 = new GameObject(‘patch1’, {
      54.   size: { width: 660, height: 345 },
      55.   origin: { x: 0, y: 0 },
      56.   position: {
      57.     x: 10,
      58.     y: 300
      59.   },
      60.   anchor: {
      61.     x: 0,
      62.     y: 0
      63.   }
      64. })
      66. const ninePatch1 = patch1.addComponent(
      67.   new NinePatch({
      68.     resource: ‘nine’,
      69.     leftWidth: 100,
      70.     topHeight: 40,
      71.     rightWidth: 40,
      72.     bottomHeight: 40
      73.   })
      74. )
      76. game.scene.addChild(patch)
      77. game.scene.addChild(patch1)

      参数

      resource string

      资源名称

      spriteName

      如果资源类型是 Sprite 可设置此属性

      leftWidth

      对应下图 A

      topHeight

      对应下图 C

      rightWidth

      对应下图 B

      bottomHeight

      对应下图 D

      image.png

      ,