九宫格 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.0.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