这确实是一个问题,但我根本不知道从哪里开始。我目前正在一个网站上工作,我们引用了以下网站作为引用:
http://exhibitions.guggenheim.org/storylines/
http://www.apple.com/uk/start-something-new/
如您所见,两者具有相同的效果并允许您在视口(viewport)内平移“ Canvas ”。我到处搜索,但找不到任何文档或插件。我找到的最接近但它仍然不允许您使用 mouseMove
平移的是:http://jmpressjs.github.io/jmpress.js/#/home
不过就像我说的,它离我想要达到的目标还有很远的距离。人们可能知道的任何想法、想法、建议或插件都将不胜感激!
最佳答案
用鼠标平移 Canvas
您可以使用 ctx.translate(x,y)
函数平移 Canvas ,但此函数是相对的,如果您不了解矩阵数学,则使用起来可能会很棘手。或者使用 ctx.setTransform(1,0,0,1,x,y)
,其中最后两个数字设置 Canvas 上的原点位置。这个函数是绝对的,所以你不需要跟踪当前的变换矩阵。原点是坐标 0,0 所在的位置。
使用设置转换
所以如果你将原点设置为
ctx.setTransform(1,0,0,1,canvas.width/2,canvas.height/2)
然后在0,0处画一个圆
ctx.beginPath();
ctx.arc(0,0,100,0,Math.PI*2);
ctx.fill();
它将出现在 Canvas 的中心,因为那是新原点所在的位置。
实现
现在您只需使用鼠标进行平移。
首先创建var来追踪原点位置
var originX = 0; // default to the top left of the canvas.
var originY = 0;
根据您的渲染方式,以下内容将标记何时更新 Canvas 转换
var panOnMouse = true; // if you are using requestAnimationFrame
// or another realtime rendering method this should
// be false
然后创建一个辅助函数来设置原点
function setCanvasOrigin(ctx){
ctx.setTransform(1,0,0,1,originX,originY);
}
鼠标
现在鼠标事件监听器和跟踪鼠标移动首先是一个对象来保存鼠标信息。
var mouse = {
x : 0, // holds the current mouse location
y : 0,
lastX : null, // holds the previous mouse location for use when mouse down
lastY : null, // as this is unknown start with null
buttonDown : false, // true if mouse button down;
panButtonID : 1, // the id of the pan button 1 left 2 middle 3 right
}
然后创建事件监听器以获取mousemove
、mousedown
和mouseup
function mouseEvent(event){
if(buttonDown){ // if mouse button is down save the last mouse pos;
mouse.lastX = mouse.x;
mouse.lastY = mouse.y;
}
mouse.x = event.offsetX;
mouse.y = event.offsetY;
if (mouse.x === undefined) { // for browsers that do not support offset
mouse.x = event.clientX;
mouse.y = event.clientY;
}
// now handle the mouse down
if (event.type === "mousedown" && event.which === mouse.panButtonID ) {
mouse.buttonDown = true; // flag the pan button is down;
mouse.lastX = mouse.x; // set the last pos to current
mouse.lastY = mouse.y;
}
// now do the pan is the mouse is down
//
if(mouse.buttonDown){
originX += mouse.x - mouse.lastX; // add the mouse movement to origin
originY += mouse.y - mouse.lastY;
if(panOnMouse ){
setCanvasOrigin(ctx);
}
}
// handle the mouse up only for the pan button
if (event.type === "mouseup" && event.which === mouse.panButtonID) {
mouse.buttonDown = false;
}
}
如果您将 panOnMouse
设置为 false,则在主渲染循环开始时调用 setCanvasOrigin
。
现在所需要做的就是将鼠标事件监听器添加到 Canvas 。
canvas.addEventListener("mousemove",mouseEvent);
canvas.addEventListener("mousedown",mouseEvent);
canvas.addEventListener("mouseup",mouseEvent);
最后的笔记
因此,现在当用户使用正确的鼠标按钮单击并拖动时, Canvas 原点将被拖动到任何需要的地方。它甚至可以在屏幕外。像往常一样画出所有内容。
要重置平底锅只需将原点设置为零
originX = 0; // default to the top left of the canvas.
originY = 0;
setCanvasOrigin(ctx); // set the transform
因为原点移动了 Canvas 上的鼠标位置与平移的 Canvas 坐标不匹配。要获得鼠标在平移 Canvas 上的位置,只需从鼠标中减去原点。可以在鼠标事件函数的末尾加上
mouse.realX = mouse.x - originX; // get the mouse position relative to the
mouse.realY = mouse.y - originY; // panned origin
如果用户在平移时离开 Canvas ,您可能会丢失鼠标弹起事件并使按钮卡住。您可以监听 mouseout
和 mouseover
事件来控制在这些情况下发生的事情。
这就是如何用鼠标平移 Canvas 。
关于javascript - 可平移 Canvas 效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35475468/