HTML5畫布放大我的圖紙

您好，我在HTML5畫布上創建一個像油漆一樣的程序。我有問題，我需要創建一些工具繪圖和縮放。我不知道如何無延遲地創建縮放。繪圖示例：http://jsfiddle.net/x5rrvcr0/HTML5畫布放大我的圖紙

如何縮放我的圖紙？

繪製代碼：

<style> 
     canvas { 
      background-color: #CECECE; 
     } 

     html, body { 
      background-color: #FFFFFF; 
     } 
    </style> 



<script> 
    $(document).ready(function() { 
     var paintCanvas = document.getElementById("paintCanvas"); 
     var paintCtx = paintCanvas.getContext("2d"); 

     var size = 500; 

     paintCanvas.width = size; 
     paintCanvas.height = size; 

     var draw = false; 
     var prevMouseX = 0; 
     var prevMouseY = 0; 

     function getMousePos(canvas, evt) { 

      evt = evt.originalEvent || window.event || evt; 
      var rect = canvas.getBoundingClientRect(); 


      if (evt.clientX !== undefined && evt.clientY !== undefined) { 
       return { 
        x: evt.clientX - rect.left, 
        y: evt.clientY - rect.top 
       }; 
      } 
     } 





     $("#paintCanvas").on("mousedown", function(e) { 
      draw = true; 
      var coords = getMousePos(paintCanvas); 
      prevMouseX = coords.x; 
      prevMouseY = coords.y; 
     }); 

     $("#paintCanvas").on("mousemove", function(e) { 
      if(draw) { 
       var coords = getMousePos(paintCanvas, e); 

       paintCtx.beginPath(); 
       paintCtx.lineWidth = 10; 
       paintCtx.strokeStyle = "#000000"; 
       paintCtx.moveTo(prevMouseX, prevMouseY); 
       paintCtx.lineTo(coords.x, coords.y); 
       paintCtx.stroke(); 

       prevMouseX = coords.x; 
       prevMouseY = coords.y; 
      } 
     }); 

     $("#paintCanvas").on("mouseup", function(e) { 
      draw = false; 
     }); 


    }); 
</script> 



<body> 
    <canvas id="paintCanvas"></canvas> 
</body>

來源

2014-12-02 Your choice

哪裏是你有問題變焦代碼？請張貼，以便我們可以看看它。 – K3N 2014-12-02 08:20:51

我沒有縮放代碼，我需要的想法如何使它：/ – 2014-12-02 08:22:04

如果你想保持在變焦像素化的效果，你需要畫上一個臨時的帆布，那麼只有在將該臨時畫布複製到主屏幕後。
您不再需要放大臨時畫布，只需以1：1的比例繪製即可。複製到視圖畫布時，然後應用所需的縮放（也可能是翻譯）。

請記住，圖紙是消除鋸齒的，所以在縮放時，例如在繪製黑色時會看到一些灰色陰影。

我保留了@FurqanZafar的錄音代碼，因爲如果您想要執行撤消操作時錄製內容是一個好主意：在這種情況下，只需刪除最後一條錄製條目並重新繪製所有內容。

http://jsfiddle.net/gamealchemist/x5rrvcr0/4/

function updatePaintCanvas() { 
    paintContext.clearRect(0, 0, paintContext.canvas.width, paintContext.canvas.height); 
    paintContext.save(); 
    paintContext.translate(cvSize * 0.5, cvSize * 0.5); 
    paintContext.scale(scale, scale); 
    paintContext.drawImage(drawCanvas, -cvSize * 0.5, -cvSize * 0.5); 
    paintContext.restore(); 
}

來源

2014-12-02 12:53:52 GameAlchemist

繼承人的更新小提琴：http://jsfiddle.net/x5rrvcr0/2/基本縮放功能

如果繪製多條路徑上移動鼠標，然後你的草圖將出現斷線或中斷，相反，你應該只中風一個單獨的路徑，直到「mouseup」事件。

然後可以將這些路徑存儲在數組中，後來在不同的縮放級別重繪他們：

function zoom(context, paths, styles, scale) { 
     context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
     context.save(); 
     applyStyles(context, styles); 
     scaleFromCenter(context, scale); 
     for (var i = 0; i < paths.length; i++) { 
      context.beginPath();     
      context.moveTo(paths[i][0].x, paths[i][0].y);     
      for (var j = 1; j < paths[i].length; j++) 
       context.lineTo(paths[i][j].x, paths[i][j].y); 
      context.stroke(); 
     } 
     context.restore(); 
    };

來源

2014-12-02 10:06:29

重繪是不好的解決，因爲如果油漆有獨特的畫筆，如鼠標速度，preasure等變量這種方法不能正確重繪 – 2014-12-02 10:45:31

@Yourchoice ：重繪是要走的路，它將重新繪製完全記錄的內容。它不會處理手柄的壓力，當然，但鼠標不會，如此精細:-) – GameAlchemist 2014-12-02 11:06:50

這種方法就像一個SVG，如果你縮放，你不能看到這個方法上的像素逐像素..我需要逼真的縮放，如果放大我可以看到像@GameAlchemist提到的像素 – 2014-12-02 11:23:39

HTML5畫布放大我的圖紙

回答

相關問題