Question

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

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

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

我已经设法根据虚构框缩小图像，但无法绕过如何仅在该虚构框中绘制的概念。这些点是随机分布的。

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（更新后的链接）

演示设置画布和上下文，然后用红色填充整体。
然后设置剪辑和遮罩并翻译它。
我们现在有一个“虚拟画布”而另一个图形是完整的
我们现在使用相同的填充操作填充区域，但使用蓝色。现在我们只能看到这个区域被填充，即使大小超出了实际区域
然后我们删除剪辑并画一条线作为我们现在回到完整模式的证据

分区/子画布

1 个答案: