基于鼠标运动的HTML5摇摄
基于鼠标运动的HTML5摇摄
提问于 2011-08-17 17:26:20
我试图在HTML5的画布中实现"pan“功能，我不确定实现它的最佳方法。
目前-我正在尝试检测画布上的鼠标在哪里，如果它在边缘的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
}我知道我可能可以通过在画布中创建路径并将事件附加到它们来实现这一点，但是我并没有对它们进行过多的工作，所以我想我应该在这里问一问。此外-如果一个“包装”的平底锅是可能的，那将是令人敬畏的(向左的平移将最终到达右边)。
摘要：--我想知道在HTML5画布中实现“平移”的最佳途径是什么。这不是使用图像，而是使用实际绘制的对象(如果这有任何区别的话)。如果可以的话，我很乐意回答任何问题。
演示：
演示
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-08-17 17:39:32
这取决于您希望如何通过鼠标移动来实现摇摄，但今天，它通常是“实时的”摇摄，因为您可以拖动。我试着更新一下你的小提琴：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
}Stack Overflow用户
发布于 2013-09-12 06:00:20
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};
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7096921
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号