canvas
SmiledrinkCat
收起锐气,踏遍荆棘,拥抱孤独,掩埋姓名,不过为挣足资本的傲气
展开
-
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;}以物体的中心点原创 2020-07-02 14:53:15 · 729 阅读 · 0 评论 -
Canvas——实现地图缩放功能(鼠标焦点不变)
将鼠标放置于地图上某一点,滚动滚轮对地图进行放大缩小的操作,地图基于鼠标焦点处进行放大缩小,即需保证该点放大或缩小后位置保持不变。 如图所示,M(mouseX, mouseY)为鼠标焦点位置,A(x0, y0)点为地图缩放前的绘图起始点,A1(x1, y1)点为地图缩放后的绘图起始点,因缩放前后M点需保持不变,故根据M点对地图起始点的坐标进行换算,设地图缩放前的比例为scale,缩放后的比例为scale’,则有 ...原创 2020-07-02 14:44:34 · 2199 阅读 · 1 评论 -
Canvas——实现地图拖拽功能
在画布上拖拽地图,让地图跟着鼠标焦点移动,即需要每一帧清除画布,在指定点进行地图重绘的操作。根据鼠标的位置移动,换算出地图重绘的起始点即可。如图1所示,A(x0, y0)点为地图拖拽前的绘图起始点,A1(x1, y1)点为地图拖拽后的绘图起始点,假设鼠标在x轴方向移动的位移为offsetX,在y轴方向移动的位移为offsetY,则有清除画布后重新于点A1(x1, y1)处重绘地图即可实现地图的拖拽功能。...原创 2020-07-02 14:40:36 · 1292 阅读 · 0 评论