[英]Javascript Canvas panning the 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;
})();
您可以使用translate
转换来平移画布内容。
context.translate(x,y)
将画布原点水平移动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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.