Canvas高级路径操作之拖拽对象的实现

//绘制多边形路径函数
function drawPolygonPath

//多边形类定义
class Polygon{ 
   ...
}

//根据点击事件返回在canvas中的位置
function positoinInCanvas

//获取两点间直线距离
function getDistance

//开始阶段，记录拖拽对象
canvas.onmousedown

//拖拽阶段，画路径，描边
canvas.onmousemove

//结束阶段，更新拖拽对象位置
canvas.onmouseup

polygonArray = []

const polygon = new Polygon(mouseStart.get('x'), mouseStart.get('y'), sideNum, radius);
polygonArray.push(polygon);//记录路径对象

const pos = positionInCanvas(e, canvasLeft, canvasTop);//获取在canvas中的像素位置
//记录鼠标起始点s
mouseStart.set('x', pos.x);
mouseStart.set('y', pos.y);
...
for (let polygon of polygonArray) {
                polygon.createPath();
                if (ctx.isPointInPath(mouseStart.get('x'), mouseStart.get('y'))) {
                    draggingPolygon = polygon;
                    return;
                }
            }

const
    pos = positionInCanvas(e, canvasLeft, canvasTop),
    diff = new Map([
      ['offsetX', pos.x - mouseStart.get('x')],
      ['offsetY', pos.y - mouseStart.get('y')]
    ]);

let
    tempCenterX = draggingPolygon.centerX,
    tempCenterY = draggingPolygon.centerY;

draggingPolygon.centerX += diff.get('offsetX');
draggingPolygon.centerY += diff.get('offsetY');

ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let polygon of polygonArray) {
    drawPolygonPath(polygon.sideNum, 
        polygon.radius, 
        polygon.centerX, 
        polygon.centerY, ctx);
    ctx.stroke();
}

draggingPolygon.centerX = tempCenterX;
draggingPolygon.centerY = tempCenterY;

const
    pos = positionInCanvas(e, canvasLeft, canvasTop),
    offsetMap = new Map([
        ['offsetX', pos.x - mouseStart.get('x')],
        ['offsetY', pos.y - mouseStart.get('y')]
    ]);
draggingPolygon.centerX += offsetMap.get('offsetX');
draggingPolygon.centerY += offsetMap.get('offsetY');
draggingPolygon = null;