Question

我用HTML5画布和javascript制作程序就像一个画。绘图发生在背景图像上。如何在背景上一起缩放我的绘图。

放大之前：

enter image description here

缩放后（需要此结果）：

enter image description here

注意：缩放应该是在背景图片上用鼠标点击的地方

Answer 1

我以前做过这个！

首先，我在画布上设置了缩放级别属性。

Main.canvas.zoomX = 1;
Main.canvas.zoomY = 1;

我还保留画布的原始尺寸以供参考。

Main.canvas.originW = Main.canvas.width;
Main.canvas.originH = Main.canvas.height;

我还保留画布的原始左侧和顶部以供参考。

Main.canvas.gLeftStart = 0;
Main.canvas.gTopStart = 0;

然后我设置缩放百分比。每次发生缩放事件时，缩放级别将调整此数量。

Main.canvas.zoomPerc = 0.05;

接下来，我在画布上设置一个事件监听器来监视鼠标滚轮。

Main.canvas.addEventListener('wheel', zoom, true);

现在，我将编写一个快速功能来检索缩放，然后我会解释它。

function zoom(evt)
{
   var x;
   var y;

   Main.canvas.xLayerS = (evt.layerX + (Main.canvas.gLeftStart * -1)) / (Main.canvas.originW * Main.canvas.zoomX);
   Main.canvas.yLayerS = (evt.layerY + (Main.canvas.gTopStart * -1)) / (Main.canvas.originH * Main.canvas.zoomY);

   Main.canvas.leftPerc = Main.canvas.gLeftStart / (Main.canvas.originW * Main.canvas.zoomX);
   Main.canvas.topPerc = Main.canvas.gTopStart / (Main.canvas.originH * Main.canvas.zoomY);

   if(evt.deltaY > 1)
   {
     Main.canvas.zoomX *= 1 +  Main.canvas.zoomPerc;
     Main.canvas.zoomY *= 1 +  Main.canvas.zoomPerc;
   }
   else
   {
     Main.canvas.zoomX *= 1 -  Main.canvas.zoomPerc;
     Main.canvas.zoomY *= 1 -  Main.canvas.zoomPerc;
   }

   var iiDS;
   var cmd;

   Main.canvas.xLayer = Main.canvas.xLayerS * (Main.canvas.originW * Main.canvas.zoomX);
   Main.canvas.yLayer = Main.canvas.yLayerS * (Main.canvas.originH * Main.canvas.zoomY);

   Main.context.clearRect(0, 0, Main.canvas.width, Main.canvas.height);
   Main.context.beginPath();

   Main.canvas.gLeftStart = (evt.layerX -  Main.canvas.xLayer);
   Main.canvas.gTopStart = (evt.layerY -  Main.canvas.yLayer);

   for(iiDS = 0; iiDS < Main.dataPoints.length; iiDS++)
   {
      if(iiDS === 0)
      {
         cmd = 'moveTo';
      }
      else
      {
        cmd = 'lineTo';
      }

      Main.dataPoints[iiDS].xPerc = Main.dataPoints[iiDS].x / Main.range.x;
      Main.dataPoints[iiDS].yPerc = Main.dataPoints[iiDS].y / Main.range.y;

      x = Main.canvas.gLeftStart + (Main.dataPoints[iiDS].xPerc *  (Main.canvas.originW * Main.canvas.zoomX));
      y = Main.canvas.gTopStart + (Main.dataPoints[iiDS].yPerc *  (Main.canvas.originH * Main.canvas.zoomY));

      Main.context[cmd](x, y);
   }

   Main.context.stroke();
}

现在您的画布已经重新调整大小，您需要重新绘制其中的内容。请记住，无论何时重新调整画布大小，都要清除画布。如果你的画布上有一个图像，那么这很简单，重绘那个大小的图像。如果你的画布持有数据点（如图表），那么我建议你使你的数据点在你的图表上有百分比（可能就是那个词），而不是像素位置。

更重要的是，我并不建议您在缩放时重新调整画布的大小和重新定位。你的页面可能会乱七八糟地乱窜。相反，使用百分比（就像我展示的那样）并使用左侧和顶部定位的值作为绘图中的起点。如果数据点是图表中某个方式的某个百分比，则可以按任意大小绘制。另外，你可以在画布之外画画，它只是不可见。那么你的画布就更像是一个视口。

你可以用这种方式做一些非常令人印象深刻的图表，很多公司为此付出了很多钱。玩得开心！

Answer 2

您是否尝试过Context2d.scale（x，y）？您可以执行以下操作

 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');

 context.scale(2, 2);

 paintBackGround(context);
 paintForeGround(context);

scale（factorWidth，factorHeight）按因子缩放画布中的所有坐标，因此它将缩放背景和绘图。这个例子会增加一倍。您不必自己缩放坐标，只需让画布为您完成。这是一个例子： http://www.html5canvastutorials.com/advanced/html5-canvas-transform-scale-tutorial/

这里唯一的问题是：你需要在绘制之前进行缩放，所以你需要一个包含原始未缩放坐标的原始绘图的模型，可以在缩放后绘制（在我的例子中是paintForeGround（））

Scale（）是所谓的转换的一部分。您可以使用canvas的buildin函数进行平移（沿矢量移动）旋转和缩放画布的内容。只需看看html5canvastutorials。这适用于背景中的矩阵多重复制，但使用起来非常简单。

在背景上缩放我的绘图

2 个答案: