效果

操作

1. 鼠标左键：加入路径点
2. 鼠标右键：撤销
3. 鼠标移动：动态绘制区域
4. 双击鼠标左键：清除画布
5. 回车：完成绘图

文件介绍

• index.html：打开可直接查看效果
• useDraw.js：封装的钩子

useDraw使用

import useDraw from './useDraw';

let draw=useDraw()
draw.init(domRef, {
   // 传入一些选项。
   // 绘制完成时的回调（可选）
   onComplete: (points) => {
      console.log('points', points);
   },
   // 初始区域（可选）
   initPoints: [{x:200,y:200},{x:300,y:300},{x:200,y:300}]
   onClear:()=>{ /** 清空画布时的回调 */},
   max:4, // 允许添加的最大点位数
   beforeComplete:(points)=>points.length===4 // 触发完成回调前的判断
   canvasStyle:{
      /** 修改画布样式 */
   }
});

// 传点绘制区域
draw.drawAreaByPoints([{x:200,y:200},{x:300,y:300},{x:200,y:300}])

// 用完后销毁
draw.destroy()