@grombolar/polygon.js

CANVAS 绘制多边形

使用方法

NPM 引入

npm install --save @grombolar/polygon.js

import polygon from '@grombolar/polygon.js';

HTML 引入

<script src="polygon.js"></script>
<canvas id="canvas" width="800" height="800"></canvas>
<script>
  const pCanvas = polygon.createCanvas("canvas");
  // 监听点的变化
  pCanvas.on(pCanvas.POLYGON_CHANGE,(data)=>{
    console.log(data);
  })
  // 全屏框选
  const fullscreen = () => pCanvas.fullscreen();
  // 清空全部图形
  const clearAll = () => pCanvas.clearAll();
  // 删除选中图形
  const deletePolygon = () => pCanvas.deletePolygon();
  // 选中多边形
  const deletePolygon = () => pCanvas.selectPolygon();
</script>

Config 参数与说明

Field	Type	Default	Description
lineWidth	number	1	多边形边宽度
lineColor	string	'rgb(0,255,255)'	多边形边颜色
fillColor	string	'rgba(0,255,255,0.6)'	多边形填充颜色
pointRadiu	number	4	多边形顶点半径
pointBorderColor	string	'rgb(0,255,255)'	多边形顶点边框颜色
pointFillColor	string	'rgb(0,255,255)'	多边形顶点颜色
activeLineWidth	number	2	选中的多边形边框宽度
activeLineColor	string	'rgb(21,132,218)'	选中的多边形边框颜色
activeFillColor	string	'rgba(21,132,218,.5)'	选中的多边形填充颜色
activePolygonPointRadius	number	6	选中多边形顶点的半径
activePointRadiu	number	8	选中的点半径
activePointBorderColor	string	'rgb(0,0,0)'	选中的点半径边框颜色
activePointFillColor	string	'rgb(21,132,218)'	选中多边形顶点颜色
fillPath	boolean	true	是否填充多边形
customizeMenu	boolean	false	是否有自定义菜单
superposable	boolean	true	多边形是否可以重叠（碰撞检测）
percentum	boolean	false	坐标是否是百分比
maxNumber	number	-1	绘制多边形数量上限
maxPoint	number	-1	每个多边形点上限
useCanDraw	boolean	false	是否启用开始绘制按钮
autoClose	boolean	true	是否自动闭合当前正在绘制的多边形
selfIntersect	boolean	true	多边形是否可以自相交

方法

全屏框选

function fullScreen():void;

清空全部图形

function clearAll():void;

删除选中图形

function deletePolygon():void;

结束当前绘制

function endDraw():void;

注入多边形

function pushPolygon(polygons:{x:number,y:number}[][]):void;

选中多边形

function selectPolygon(index:number):void;

监听事件

监听多边形点的变化

POLYGON_CHANGE

pCanvas.on(polygon.Events.POLYGON_CHANGE,(data)=>{
  console.log(data);
})

监听选中的多边形变化 ACTIVE_POLYGON

pCanvas.on(polygon.Events.ACTIVE_POLYGON,(data)=>{
  console.log(data);
})

正在绘制的多边形变化 CURRENT_POINTS

pCanvas.on(polygon.Events.CURRENT_POINTS,(data)=>{
  console.log(data);
})

多边形是否发生了重叠 POLYGON_OVERLAP

pCanvas.on(polygon.Events.POLYGON_OVERLAP,(data)=>{
  console.log(data);
})

绘制多边形超出设置的上限 POLYGON_OVERRUN

pCanvas.on(polygon.Events.POLYGON_OVERRUN,(data:{code:1||2,message:string})=>{
  if(data.code == 1){
    console.log(`绘制的多边形个数超出上限`,data.message)
  }else if(data.code == 2){
    console.log(`绘制的多边形点数超出上限`,data.message)
  }
})

当前正在绘制的图形出现自相交 POLYGON_SELF_INTERSECTION

pCanvas.on(polygon.Events.POLYGON_SELF_INTERSECTION,(data)=>{
  console.log(data);
})