在画布上拖拽地图,让地图跟着鼠标焦点移动,即需要每一帧清除画布,在指定点进行地图重绘的操作。根据鼠标的位置移动,换算出地图重绘的起始点即可。
如图所示,A(x0, y0)点为地图拖拽前的绘图起始点,A1(x1, y1)点为地图拖拽后的绘图起始点,假设鼠标在x轴方向移动的位移为offsetX,在y轴方向移动的位移为offsetY,则有
清除画布后重新于点A1(x1, y1)处重绘地图即可实现地图的拖拽功能。
x1 = x0 + offsetX;
y1 = y0 + offsetY;
this.ctx.clearRect(x0, y0, this.width, this.height);
this.ctx.drawImage(
img, //规定要使用的图片
x1 , y1,//在画布上放置图像的 x 、y坐标位置。
this.width, this.height //要使用的图像的宽度、高度
);