劃分/子畫布

Question

我在XML文件中的座標很少。他們是線條，圓圈和弧線。我正在閱讀它們的數據結構，然後試圖在畫布上繪製它們。我想弄清楚的是如何將畫布分成子畫布。 e.g想我的畫布是

<canvas id="myCanvas" width="800" height="600" role="img"> 
     Your browser does not support the canvas element. 
    </canvas> 

我所試圖實現的是如何使寬度和高度200像素的假想窗口比如從X1在畫布上和Y1 = 250 = 200像素開始。並畫出我只有在那個盒子裏的圖像。

我已經成功地縮小了基於想象盒子的圖像，但無法解決如何僅在該虛擬盒子中繪製的概念。這些點是隨機分佈的。

Answer 1

還有其他的方法來實現這一點，但你可能會發現在這方面最有用的一個是使用翻譯和剪輯遮罩：

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

/// for simplicity, save current settings 
ctx.save(); 

/// move coordinate system to the upper left corner of isolated region 
ctx.translate(offsetX, offsetY); 

/// create a clipping mask by using a simple rectangle 
ctx.beginPath(); 
ctx.rect(0, 0, width, height); 

/// define the last path (rectangle) as clipping mask 
ctx.clip(); 

/// ... draw other things into this region from offset 0... 

ctx.restore(); /// done and back to full canvas 

通過移動整個座標系統到您所在區域的左上角，您可以使用相對於新隔離區域的偏移量。通過添加一個剪輯蒙版，任何在該區域外繪製的東西都將被剪裁。

您需要爲每個地區逐一進行此操作。

另一種方法是向所有繪圖點添加偏移量。例如：

ctx.lineTo(x + offsetX, y + offsetY); 

其中offsetX/Y是該區域的左上角。

然而，它會變得更加複雜，如果你需要裁剪 - 不與圖像一個巨大的問題，你可以定義和目標區域但對於線和另一條路徑的操作，則需要通過插值等

剪輯自己

這裏有一個現場演示證明這一點：
Fiddle（更新鏈接）

• 演示設置畫布和背景，然後填滿整個用紅色。
• 然後，如果設置剪裁和蒙版並翻譯它。
• 我們現在有一個「虛擬畫布」，另一個圖形是完好的
• 我們現在用相同的填充操作填充區域，但是使用藍色。現在我們可以看到只有這個地區充滿甚至大小是實際的區域外
• 然後我們刪除剪輯和畫一條線作爲證據，我們現在又回到了全模式