gpt4 book ai didi

Javascript Canvas 平移 Canvas

转载 作者:行者123 更新时间:2023-12-03 08:20:37 27 4
gpt4 key购买 nike

当用户按下鼠标并移动它时,我试图平移 Canvas ,但由于某种我看不到的原因,它似乎不起作用。有什么想法吗?

    canvas.addEventListener('mousedown', onMouseDown, false); 

function onMouseDown(event){
var mousePos = new Vector(event.clientX, event.clientY);
mousedown = true;
}

canvas.addEventListener('mouseup', onMouseUp, false);
function onMouseUp(event){
mousedown = false;
}

canvas.addEventListener('mousemove', onMouseMove, false);
function onMouseMove(event){
mousePos = new Vector(event.clientX, event.clientY);
if(onMouseDown){
var difference = mousePos.subtract(previousMousePosition);
pan.add(difference);
}
previousMousePosition = mousePos;
}

pan = new Vector(0, 0);

我还收到一条错误消息,指出 Vector 未定义,还有 mousePos.subtract 的错误消息。这是我的 vector.js:

var Vector = (function () {
function Vector(pX, pY) {
this.setX(pX);
this.setY(pY);

};
Vector.prototype.getX = function() {

return this.mX;
};
Vector.prototype.setX = function (pX) {
this.mX = pX;
};
Vector.prototype.getY = function() {

return this.mY;
};
Vector.prototype.setY = function(pY) {
this.mY = pY;
};

return Vector;
})();

最佳答案

您可以使用翻译转换来平移 Canvas 内容。

context.translate(x,y) 会将 Canvas 原点水平移动 x 像素,垂直移动 y 像素。

因此,要“向右平移”5 个像素,您可以context.translate(-5,0)

使用转换的好处是您不必更改现有的绘图代码 - 翻译会自动将所有绘图向指定方向“移动”。

[添加:展示如何通过用户鼠标拖动实现网络平移]

function log(){console.log.apply(console,arguments);}

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var isDown=false;
var startX,startY;
var netPanningX=0;
var netPanningY=0;

var $results=$('#results');

for(var x=0;x<100;x++){ ctx.fillText(x,x*20+netPanningX,ch/2); }
for(var y=-50;y<50;y++){ ctx.fillText(y,cw/2,y*20+netPanningY); }

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});

function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();

startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);

// Put your mousedown stuff here
isDown=true;
}

function handleMouseUp(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();

mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);

// Put your mouseup stuff here
isDown=false;
}

function handleMouseOut(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();

mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);

// Put your mouseOut stuff here
isDown=false;
}

function handleMouseMove(e){
if(!isDown){return;}
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();

mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);

// dx & dy are the distance the mouse has moved since
// the last mousemove event
var dx=mouseX-startX;
var dy=mouseY-startY;
startX=mouseX;
startY=mouseY;

// accumulate the net panning done
netPanningX+=dx;
netPanningY+=dy;
$results.text('Net change in panning: x:'+netPanningX+', y:'+netPanningY);

ctx.clearRect(0,0,cw,ch);
for(var x=-50;x<50;x++){ ctx.fillText(x,x*20+netPanningX,ch/2); }
for(var y=-50;y<50;y++){ ctx.fillText(y,cw/2,y*20+netPanningY); }

}
body{ background-color: ivory; }
#canvas{border:1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4 id=results>Drag the mouse to see net panning in x,y directions</h4>
<canvas id="canvas" width=300 height=300></canvas>

关于Javascript Canvas 平移 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33763273/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com