@grombolar/polygon.js v1.1.21

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 参数与说明

方法

全屏框选

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);
})