对于地图上已摆放的物体,可以对其进行拖拽、旋转的操作。首先需判断鼠标的点击位置是否位于物体之上,若位于物体之上,令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 坐标。
更新物体的位置和弧度,对物体进行重绘即可实现物体的拖拽和旋转操作。