基于鼠标移动的HTML5平移

我正在尝试在HTML5中实现在canvas内“平移”的function，我不确定实现它的最佳方法。

目前 – 我正在尝试检测canvas上鼠标的位置，如果它在边缘的10％范围内，它将朝那个方向移动，如图所示：

当前边缘检测：

canvas.onmousemove = function(e) { var x = e.offsetX; var y = e.offsetY; var cx = canvas.width; var cy = canvas.height; if(x <= 0.1*cx && y <= 0.1*cy) { alert("Upper Left"); //Move "viewport" to up and left (if possible) } //Additional Checks for location } 

我知道我可以通过在canvas中创建路径并将事件附加到它们来实现这一目标，但我没有用过很多东西，所以我想我会问这里。 此外 – 如果一个“包装”平底锅是可能的将是很棒的（向左平移将最终到达右侧） 。

简介：我想知道在HTML5 Canvas中实现“平移”的最佳途径是什么。 这不会使用图像，而是使用实际绘制的对象（如果这有任何区别）。 如果可以，我会很乐意回答任何问题。

演示：

演示

Answer 1

这取决于您希望如何实现平移鼠标移动，但今天它通常是“实时”平移，因为您可以拖动。 我试着稍微更新你的小提琴： http ： //jsfiddle.net/pimvdb/VWn6t/3/ 。

 var isDown = false; // whether mouse is pressed var startCoords = []; // 'grab' coordinates when pressing mouse var last = [0, 0]; // previous coordinates of mouse release canvas.onmousedown = function(e) { isDown = true; startCoords = [ e.offsetX - last[0], // set start coordinates e.offsetY - last[1] ]; }; canvas.onmouseup = function(e) { isDown = false; last = [ e.offsetX - startCoords[0], // set last coordinates e.offsetY - startCoords[1] ]; }; canvas.onmousemove = function(e) { if(!isDown) return; // don't pan if mouse is not pressed var x = e.offsetX; var y = e.offsetY; // set the canvas' transformation matrix by setting the amount of movement: // 1 0 dx // 0 1 dy // 0 0 1 ctx.setTransform(1, 0, 0, 1, x - startCoords[0], y - startCoords[1]); render(); // render to show changes } 

Answer 2

pimvdb的小提琴很好地展示了这个概念，但实际上并没有起作用，至少对我来说并不适用。

这是一个固定的版本： http ： //jsfiddle.net/VWn6t/173/
它的肉基本相同。

 var startCoords = {x: 0, y: 0}; var last = {x: 0, y: 0}; var isDown = false; canvas.onmousemove = function (e) { if(isDown) { ctx.setTransform(1, 0, 0, 1, xVal - startCoords.x, yVal - startCoords.y); } }; canvas.onmousedown = function (e) { isDown = true; startCoords = {x: e.pageX - this.offsetLeft - last.x, y: e.pageY - this.offsetTop - last.y}; }; canvas.onmouseup = function (e) { isDown = false; last = {x: e.pageX - this.offsetLeft - startCoords.x, y: e.pageY - this.offsetTop - startCoords.y}; };