如何将画布缩放到中心，而不是上下文的中心。

10 浏览
0 Comments

如何将画布缩放到中心，而不是上下文的中心。

我有一个大小为400 x 400的画布。在画布上，我画了一个地图区域，大小为200 x 200。

我已将其平移到画布的中心。我可以放大和缩小，一切正常。但是，当我平移时，它会从地图区域的中心缩放。我希望它始终从画布的中心缩放，而不管地图区域在哪里。我觉得我需要以某种方式对平移坐标取反，但我想不出来。

以下是我的代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var canvas1 = document.getElementById("canvasX");
var ctxX = canvas1.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var mapW = 200;
var mapH = 200;
var panX=0;
var panY=0;
var scaleFactor=1.00;
drawTranslated();
function zoomIn(){
    scaleFactor*=1.1; 
  drawTranslated(); 
}
function zoomOut(){
    scaleFactor/=1.1; 
  drawTranslated(); 
}
function panUp(){
    panY-=25; 
    drawTranslated(); 
}
function panDown(){
    panY+=25; 
  drawTranslated();
}
function panLeft(){
    panX-=25; 
  drawTranslated(); 
}
function panRight(){
    panX+=25; 
  drawTranslated(); 
}
function drawTranslated(){
    // 画布
    ctx.clearRect(0,0,cw,ch);
    ctx.save();
    ctx.translate(cw/2, ch/2);
    ctx.translate(panX,panY);
    ctx.scale(scaleFactor, scaleFactor);
    ctx.fillStyle = "Green";
    ctx.fillRect(mapW/-2, mapH/-2, mapW, mapH);
    ctx.restore();
  // 画布X
  ctxX.clearRect(0,0,cw,ch);
  ctxX.save();
  ctxX.translate(cw/2, ch/2);               
  ctxX.beginPath();
  ctxX.moveTo(0, 25);
  ctxX.lineTo(0, -25);
  ctxX.moveTo(-25, 0);
  ctxX.lineTo(25, 0);
  ctxX.closePath();
  ctxX.lineWidth = 1;
  ctxX.strokeStyle = 'Black';
  ctxX.stroke();
  ctxX.restore();
}

#wrapper {position: relative;}
canvas {position: absolute; border: 1px solid Black;}

0