javascript 基于鼠标移动的 HTML5 平移
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7096921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Panning based on Mouse Movement
提问by Rion Williams
I'm trying to implement functionality to "pan" inside a canvas in HTML5 and I am unsure about the best way to go about accomplishing it.
我正在尝试实现在 HTML5 中的画布内“平移”的功能，但我不确定实现它的最佳方法。
Currently - I am trying to detect where the mouse is on the canvas, and if it is within 10% of an edge, it will move in that direction, as shown:
目前 - 我正在尝试检测鼠标在画布上的位置，如果它在边缘的 10% 内，它将朝那个方向移动，如图所示：
Current Edge Detection:
电流边缘检测：
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
}
I know I could probably accomplish this by creating paths within the canvas and attaching events to them, but I haven't worked with them much, so I thought I would ask here. Also - if a "wrapping" pan would be possible that would be awesome (panning to the left will eventually get to the right).
我知道我可能可以通过在画布中创建路径并将事件附加到它们来实现这一点，但我对它们的处理不多，所以我想我会在这里问。另外 - 如果可以使用“包装”平底锅，那将会很棒（向左平移最终会向右平移）。
Summary:I am wondering what the best route is to accomplish "panning" is within the HTML5 Canvas. This won't be using images but actual drawn objects (if that makes any difference). I'll be glad to answer any questions if I can.
简介：我想知道在 HTML5 Canvas 内完成“平移”的最佳途径是什么。这不会使用图像，而是使用实际绘制的对象（如果这有什么不同的话）。如果可以，我很乐意回答任何问题。
Demo:
演示：
回答by pimvdb
It depends on how you want panning with mouse movement to be implemented, but today it's often 'realtime' panning in that you can drag around. I tried to update your fiddle a little: http://jsfiddle.net/pimvdb/VWn6t/3/.
这取决于您希望如何通过鼠标移动实现平移，但今天通常是“实时”平移，您可以四处拖动。我试着稍微更新你的小提琴：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
}
回答by chad
pimvdb's fiddle shows the concept nicely but doesn't actually work, at least not for me.
pimvdb 的小提琴很好地展示了这个概念，但实际上并没有用，至少对我来说不是。
Here's a fixed version: http://jsfiddle.net/VWn6t/173/
The meat of it is basically the same.
这是一个固定版本：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};
};
