如何在动画期间缩放画布？

Question

我有两个按钮可以放大和缩小我的画布动画

<button id="zoomInButton">Zoom ++</button>
<button id="zoomOutButton">Zoom -- </button>

 <canvas id="myCanvasmatchPage" > 
        Sorry, your browser doesn't support canvas technology
</canvas>

我有一个使用 setInterval 和画布的动画循环（省略）。为了不让每个 setInterval 发生缩放，它必须在绘图函数循环之外。事实上 ctx.scale 在按钮点击时被重置。

$('#myCanvasmatchPage').attr({width:100,height:200}).css({width:'100px',height:'200px'});       

var canvas = document.getElementById("myCanvasmatchPage");
ctx = canvas.getContext("2d");
ctx.translate(0.5,0.5);

var nextFrame =0;
var animationData = [];

var canvasZoom = 1; //initial is scale 100%
var incrementZoom = 0.05;
$("#zoomInButton").click(function ()
   {
     canvasZoom += incrementZoom;
     ctx.scale(canvasZoom, canvasZoom);
   });
 $("#zoomOutButton").click(function ()
   {
     if (canvasZoom > 1){//i dont want to allow a less than 100% scale zoom
           canvasZoom -= incrementZoom; 
           ctx.scale(canvasZoom, canvasZoom);
    }
   });  


var draw = function(){
    //cannot set scale within animation loop! keeps resetting!
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(images['background'], 0, 0, 622, 924, 0, 0, 311, 462);

                if (nextFrame<=animationData.length){
                    //animation loop
                }else{
                    clearTimeout(draw);//get out of the loop
                    return;
                }

                nextFrame++;    
    }
    setInterval(draw,200);  

我目前对这段代码的体验是 zoomIn '有效'，但 zoomOut 没有。控制台日志向我显示，canvasZoom 确实上下一致地上下浮动 0.05（有时也是 0.05000001 哈哈），但画布不会负向缩放。

这让我觉得问题在于画布的清除而不是缩放。

Answer 1

当 Canvas 的 context2D 是一个状态机时，您犯了一个非常常见的错误，即认为 scale 将 设置 比例，它会将每个变化累积在彼此之上（expl scale X2 然后 scale x2 == 比例 X4 ）。

这个问题的常见答案是保存（）你的上下文，做你的变换，做你的图画，然后恢复（）它。

所以只是给你方向（未经测试）：

function Transform() {
   this.scale = 1;
   this.rotation = 0;
   this.translation = {x:0, y:0 };
   this.zoomIn = function () {
    this.scale+=0.5;
   };
   this.zoomOut = function () {
    this.scale-=0.5;
   };
   this.translate(x,y) = function (x,y)  { 
     this.translation.x+=x;  // OR +=x*currentZoom;
     this.translation.y+=y;  // OR +=y*currentZoom;
   };
   this.rotate = function (angle) {
      this.rotation+=angle;
   };
   this.applyTransform = function (ctx) {
       ctx.translate(translation.x, translation.y);  // ?? order ??
       ctx.scale(currentZoom, currentZoom);          // ?? order ??
       ctx.rotate(rotation);                   
   }
}

var imageTransform = new Transform();

function drawImage(img) { 
  ctx.save();
  ctx.translate(img.width/2, img.height/2);
  imageTransform.applyTransform(ctx);
  ctx.drawImage(img, -img.wdth/2, -img.height/2);
  ctx.restore();
}

平移/缩放/旋转的顺序实际上取决于您的意图：您是在移动相机还是移动图像？你是缩放相机还是图像？ （仅当要显示的项目不止一项时，问题才相关）。

希望这会有所帮助。

Answer 2

虽然我研究了 @GameAlchemist 的更彻底的解决方案，但这里将是一个简单转换问题的解决方案。感谢 GameAlchemist 指出（非常重要！）规模变化是累积的！

在点击函数中，保留一个干净的基础副本以进行缩放（此处为 initialZoom）很重要

    var initialZoom = 1;    //100% same as container (less border)
    var zoomCounter = 1;
    var incrementZoom = 0.05;
    var canvasZoom = 1;//just to declare

 $("#zoomInButton").click(function ()
   {
     canvasZoom = initialZoom + incrementZoom;
    zoomCounter = zoomCounter + incrementZoom;//so i can track compared to original and block cumulative < 100&
     ctx.scale(canvasZoom, canvasZoom);
   });
 $("#zoomOutButton").click(function ()
   {
     if (zoomCounter > 1){//i dont want to allow a less than 100% scale zoom
           canvasZoom = initialZoom - incrementZoom;
           zoomCounter = zoomCounter - incrementZoom;
           ctx.scale(canvasZoom, canvasZoom);
    }
   }); 

现在看看 GameAlchemist-s 解决方案是否能让我更轻松地进行多重变换！