canvas拖拽功能实现

拖拽功能实现"/>

canvas拖拽功能实现

       在默认状态下对图形的操作都是基于左上角为原点进行操作的，但在特定的场景下，我们希望改变原点的位置或者根据鼠标指针实时调整对图形的拖拽位置。这时就需要对原点进行相应的调整。例如我们要实现一个拖拽功能，根据鼠标点击图形上的任何一个位置对图形进行拖拽移动。

       默认状态下，当我们点击图形并拖拽图形时会发现，在我们清空画布后对图形坐标进行重新绘制，发现鼠标指针的拖拽点往往始终偏移到图形的左上角原点位置为指针位置，那如何保持鼠标指针点击图形上的哪个位置就始终保持不变呢。那就涉及到鼠标按下到拖拽操作的两个坐标点 A₁{x₁,y₁} 和 A₂{x₂,y₂} 的换算，即拖拽过程中指针的坐标和鼠标按下时指针的坐标差，即 x₂ - x₁，y₂ - y₁。因为拖拽是一个动作过程，于是得到换算公式为：

话不多说，上实例代码： 

var config = false;
const dom = document.getElementById("canvas");
// TODO 鼠标按下
dom.onmousedown = (e)=>{config = true;A1.x = e.offsetX;A1.y = e.offsetY;
}
// TODO 鼠标移动
dom.onmousemove = (e)=>{if(!config) return;[A.x, A.y] = [A.x + (e.offsetX - A1.x), A.y + (e.offsetY - A1.y)];[A1.x, A1.y] = [e.offsetX, e.offsetY];draw(A.x, A.y);
}
// TODO 鼠标弹起
dom.onmouseup = ()=>{config = false;
}
// 绘制
function draw(x, y){ctx.clearRect(0,0,canvas.offsetWidth,canvas.offsetHeight);ctx.save();ctx.translate(x, y);  // 偏移api(核心偏移)ctx.scale(option.curScale, option.curScale);ctx.drawImage(image,0,0,canvas.width / 2,image.height / (image.width / canvas.width) / 2);ctx.restore();
}

 以上是我的实现思路，分享给大家以供参考。