放大/缩小画布，保持绘制点

Question

我将图片加载到画布并在这个非常简单的函数中绘制几个点：

var addPoint = function($x, $y, $context) {
    $context.fillStyle="#FF0000";
    $context.fillRect($x, $y, 3, 3);
    $("#points").append(
      $("<li>").append("Point nr "+ totalPoints()).append(
        "<a href='#' class='remove_point' data-x='"+$x+"' data-y='"+$y+"'>[delete]</a>"
      )
    );
    bindRemove($context);
  };

我想添加缩放功能。我想我需要在画布上下文中使用scale()函数来实现我的目标。问题是我想保留之前在画布上绘制的所有点（矩形）。我将这些点存储在简单的ul列表中。执行scale（）后，我需要重绘画布，可能会松开这些点。放大/缩小后，它们的坐标不同，需要再次计算。

如何缩放画布并保留以前添加的分数？

Answer 1

是的，您可以使用数组中的javascript对象存储所有矩形定义。

var rects=[];
rects.push({x:20,y:20,width:25,height:15,color:'red'});
rects.push({x:75,y:100,width:50,height:35,color:'green'});
rects.push({x:150,y:75,width:40,height:75,color:'blue'});
rects.push({x:100,y:225,width:50,height:50,color:'gold'});

然后缩放你可以：

• 清除画布

• 使用context.scale

缩放画布

• 使用矩形对象重绘所有矩形

• 取消缩放画布以准备将来的任何绘图

这是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;

var scale=1.00;

var rects=[];
rects.push({x:20,y:20,width:25,height:15,color:'red'});
rects.push({x:75,y:100,width:50,height:35,color:'green'});
rects.push({x:150,y:75,width:40,height:75,color:'blue'});
rects.push({x:100,y:225,width:50,height:50,color:'gold'});

drawRects();

//
function drawRects(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.scale(scale,scale);
  for(var i=0;i<rects.length;i++){
    var r=rects[i];
    ctx.fillStyle=r.color;
    ctx.fillRect(r.x,r.y,r.width*scale,r.height*scale);
  }
  ctx.setTransform(1,0,0,1,0,0);
}


//
canvas.addEventListener('DOMMouseScroll',handleScroll,false);
canvas.addEventListener('mousewheel',handleScroll,false);


//
function handleScroll(e){
  e.preventDefault();
  e.stopPropagation();

  var delta=e.wheelDelta?e.wheelDelta/30:e.detail?-e.detail:0;
  if (delta){
    scale+=(delta>=0)?.01:-.01;
    drawRects();
  }
};

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>Click in Canvas then use mousewheel to zoom</h4>
<canvas id="canvas" width=400 height=400></canvas><br>