放大我在背景上的繪畫

Question

我使用HTML5 canvas和javascript製作繪畫程序。繪圖發生在背景圖像上。如何在一起放大我的繪畫背景。

之前放大它：

放大它後（需要這個結果）：

注：變焦應該在哪裏點擊風趣h鼠標在背景圖片上

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; 

接下來，我在畫布上設置了一個事件監聽器來監視mousewheel。

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

規模（factorWidth，factorHeight）中的秤被因素畫布所有座標，所以這將擴大的背景和繪圖。這個例子會增加一倍。你不必自己調整座標，只需讓畫布爲你做。 下面是一個例子： http://www.html5canvastutorials.com/advanced/html5-canvas-transform-scale-tutorial/

唯一的問題就在這裏：你需要擴展在繪製之前，所以你需要一個包含原始未縮放座標的原畫一個模型，可以縮放後得出（paintForeGround（）在我的例子中）

Scale（）是所謂Transformations的一部分。您可以通過使用畫布的構建函數進行翻譯（沿矢量移動）旋轉和縮放畫布的內容。只要看看html5canvastutorials。這適用於背景中的矩陣多項式，但使用起來非常簡單。