1

XML 文件中的坐标很少。它们是线、圆和弧。我正在以数据结构读取它们，然后尝试将它们绘制在画布上。我想弄清楚的是如何将画布划分为子画布。例如假设我的画布是

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

我想要实现的是如何从画布上的 x1=200px 和 y1=250 开始制作一个宽度和高度为 200px 的假想窗口。并画出我只有在那个盒子里的图像。

我已经设法根据想象的盒子缩小图像，但无法绕过如何仅在那个想象的盒子中绘制的概念。点是随机分布的。

4

1 回答 1

5

还有其他方法可以实现这一点，但在这种情况下您可能会发现最有用的方法是使用翻译和剪辑蒙版：

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

whereoffsetX/Y是区域的左上角。

但是，如果您需要剪辑，它会变得更加复杂 - 这不是图像的大问题，因为您可以定义目标区域，但对于线条和其他路径操作，您需要使用插值等方式剪辑自己。

这是一个现场演示演示：
小提琴（更新链接）

  • 该演示设置了一个画布和上下文，然后用红色填充整体。
  • 然后如果设置剪辑和蒙版并翻译它。
  • 我们现在有一个“虚拟画布”，另一个图形完好无损
  • 我们现在用相同的填充操作填充该区域，但使用蓝色。现在我们可以看到只有这个区域被填充，即使大小在实际区域之外
  • 然后我们删除剪辑并画一条线作为我们现在回到完整模式的证据
于 2013-07-24T16:05:04.523 回答