我正在尝试在 HTML5 中实现在 Canvas 内“平移”的功能,但我不确定实现它的最佳方法。
目前 - 我正在尝试检测鼠标在 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 中完成“平移”的最佳途径是什么。这不会使用图像,而是实际绘制的对象(如果有任何区别的话)。如果可以,我很乐意回答任何问题。
演示:
最佳答案
这取决于您希望如何通过鼠标移动实现平移,但现在通常是“实时”平移,您可以四处拖动。我试着稍微更新一下你的 fiddle :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
}
关于javascript - 基于鼠标移动的 HTML5 平移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7096921/