缩放我的在背景的图画 [英] Zoom my drawing on the background

问题描述

我使程序像一个油漆与HTML5画布和javascript。绘图发生在背景图像上。

I make program like a paint with HTML5 canvas and javascript. Drawing takes place on the background image. How to zoom my drawing on the background together.

放大之前：

Before zoom it:

>

缩放（需要此结果）：

After zoom it (need this result):

注意：缩放应该是鼠标点击背景图片的位置

Note: zoom should be where clicked with the mouse on the background image

推荐答案

我已经做过了！

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

First of all, I set a zoom level attribute on my canvas.

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

我还保留画布的原始大小以供参考。

I also retain the original size of the canvas for reference.

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

我还保留原来的左边和顶部的画布供参考。

I also retain the original left and top of the canvas for reference.

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

然后设置缩放百分比。

I then set a zoom percentage. The zoom level will be adjusted by this amount every time that the zoom event occurs.

Main.canvas.zoomPerc = 0.05;

接下来，我在我的画布上设置一个事件监听器来监视mousewheel。

Next, I set an event listener on my canvas to watch for mousewheel.

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

现在，我要写一个快速函数来检索缩放，然后我将解释

Now, I'm going to write a quick function to retrieve the zoom, then I'll explain it.

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

现在画布已调整大小，您需要重新绘制是在它。记住，任何时候你调整一个画布的大小，你清除画布。如果你的画布持有一个图像，那么这很简单，重新绘制那个大小的图像。如果你的画布是持有数据点（如图表），我建议你让你的数据点有百分之如（可能是一个字）位置沿图表，而不是像素位置。

Now that your canvas has been re-sized, you will need to redraw whatever was in it. Remember, any time that you re-size a canvas, you clear the canvas. If your canvas was holding an image, then that's simple, redraw that image at that size. If you canvas was holding data points (like a chart) then I would suggest that you make your data points have percentage like (probably a word for that) positions along your chart, not pixel positions.

更重要的是，我不建议你重新调整大小和重新定位你的画布缩放。你的页面可能会混乱和那种方式。相反，使用大小的百分比（如我所示），并使用左侧和顶部定位的值作为绘图中的起点。如果数据点是跨图表的某种百分比的方式，则可以以任何大小绘制。此外，你可以画出你的画布外，它只是不可见。你的画布将更像一个视口。

More importantly though, I do not suggest that you ever re-size and re-position your canvas on zoom. Your page can get jumbled up and sloppy that way. Instead, use the percentages for size (like I showed you) and use the values for left and top positioning as starting points in your drawing. If a data point was a certain percentage of a way across a chart, it can be drawn at any size. Plus, you can draw outside of your canvas, it just won't be visible. Your canvas would then be more like a view-port.

你可以做一些非常令人印象深刻的图表，这很多公司支付了很多钱。有乐趣！

You can do some really impressive charting this way, which a lot of companies pay a lot of money for. Have fun!

这篇关于缩放我的在背景的图画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！