Canvas——实现地图上物体的拖拽和旋转功能

对于地图上已摆放的物体，可以对其进行拖拽、旋转的操作。首先需判断鼠标的点击位置是否位于物体之上，若位于物体之上，令flag为true，方可进行拖拽、旋转的相关操作。

this.context.arc(reactpostions.x, reactpostions.y, 80, 0, Math.PI * 2);

if (this.context.isPointInPath(x, y)) {

    return true;

} else {

    return false;

}

以物体的中心点为中心，点击半径30以内的圆区域视为拖动操作，点击半径30至80之间的圆环区域视为旋转操作。

this.context.beginPath(); 
   
this.context.arc(x0 , y0 , 80, 0, Math.PI * 2);

this.context.arc(x0, y0 , 30, 0, Math.PI * 2, true);

若为拖动操作，则根据鼠标移动的位移更新物体的坐标，若拖动前的物体坐标为W(x0, y0)，拖动后的物体坐标为W1(x1, y1)，鼠标在x轴方向移动的位移为offsetX，在y轴方向移动的位移为offsetY，则有

                                                        

                                                      

若为旋转操作，则物体的旋转弧度rot为

                            

注：atan2 方法返回一个 -pi 到 pi 之间的数值，表示点 (x, y) 对应的偏移角度。这是一个逆时针角度，以弧度为单位，正X轴和点 (x, y) 与原点连线 之间。注意此函数接受的参数：先传递 y 坐标，然后是 x 坐标。

 

更新物体的位置和弧度，对物体进行重绘即可实现物体的拖拽和旋转操作。