Javascript Canvas平移画布

Question

我试图在用户按下鼠标并移动它时平移画布，但由于某种原因我看不到它似乎没有工作。有什么想法吗？

    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;
})();

Answer 1

您可以使用translate转换来平移画布内容。

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

所以到＃34;右边＆＃34;您可以{5}像素context.translate(-5,0)。

使用转换的好处在于您不必更改现有的绘图代码 - 翻译将自动转换＆＃34;所有图纸都在指定的方向上。

[添加：展示如何从用户鼠标拖动中进行网络平移]

＆＃13;

＆＃13;

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); }

}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;