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;