效果概览

支持圆形，矩形，旋转矩形绘制，鼠标像素拾取，图片缩放，图片拖拽，像素测量，roi交集并集补集输出
TODO：实现自由路径绘制，与后台交互数据

实现原理

交集并集差集使用像素做运算，使用0代表没有像素，1代表有像素，然后再做运算

    // 计算交集calculateIntersection(shape1, shape2) {return shape1.map((pixel, index) => pixel && shape2[index] ? 1 : 0);}// 计算并集calculateUnion(shape1, shape2) {return shape1.map((pixel, index) => pixel || shape2[index] ? 1 : 0);}// 计算差集calculateDifference(shape1, shape2) {return shape1.map((pixel, index) => pixel && !shape2[index] ? 1 : 0);}

canvas事件实现

使用两个canvas，使用隐藏的OffscreenCanvas来判断鼠标命中的是哪个元素，需要把shape同时画到两个canvas中，获取隐藏