get-image-boundaries（获取图片边界多边形）

简介

获取 png 等透明图片中图形的边界组成的点的多边形集合，可以用来进行碰撞检测，点击图片图形区域检测等。

这更适合于当一个工具使用，因为图片越大，内部镂空越多，需要的计算量就越大，而我们所需要的的恰巧是运行后的结果--多边形，所以我们可以提前获取结果来用。

vue版本虽然采用了 worker，不会造成浏览器卡死，但仍然需要耗费一些时间，当然对于小尺寸图片（16 × 16,32 × 32 等）完全不构成负担。

在 vue 中使用

<!-- 安装 -->
npm install --save get-image-boundaries
<!-- 引入 -->
import Boundaries from 'get-image-boundaries'
<!-- 使用 -->
new Boundaries(imageUrl, options).then(res => {
  <!-- res.shapes 为结果数据 -->
})

在 html 页面使用

需要引入 indexJs.js 文件，用法与上同

参数

• imageUrl

  • 图片地址

• options(可选)

  • 包含可在创建对象实例时设置的选项属性的对象。可用属性如下：
    • width： 图片变形尺寸的宽度，如果不传，默认图片原始尺寸宽度naturalWidth。
    • height：图片变形尺寸的高度，如果不传，默认图片原始尺寸高度naturaleight。
      • shapeGreedy：是否贪婪模式，默认false，如果传true，则也会获取图片内部镂空图案的多边形。
        • false 时举例：
        • true 时举例：
      • testLineColor： 测试方法中多边形的颜色，默认#f00。

返回值

• Promise
  • Promise.then(res)
    • res 结构如下
      • width： 获取的宽度。
      • height: 获取的高度。
      • naturalWidth： 图片原始宽度。
      • naturalHeight： 图片原始高度。
      • image： 当前图片。
      • src： 图片路径。
      • shapeGreedy： 贪婪模式是否开启。
      • shapes： 多边形的数组，第一个即是最外围的多边形，其余的为内部的多边形（开启贪婪模式才有多个多边形）。
        • [[{x,y},...]]

方法

• getSimplifyData
  • 将获取到的 shapes 当做参数调用此方法，可以获取简化后的多边形数组集合(因为获取的点是紧密包围图形的，如果遇到一条直线，中间的点可能并不需要，这个方法就是将中间的点去掉的方法)
  • 举例：

  let simpleShapes = res.getSimplifyData(res.shapes);

• test
  • 测试方法，调用此方法，可以在 body 下添加一个显示当前图片及多边形的 canvas。
  • 举例：

  res.test(simpleShapes);