确定绘制到画布中的形状/图形的边界 [英] Determine bounds of shape / graphics drawn into a Canvas

问题描述

我有一个简单的HTML5 Canvas示例，它允许用户在画布上绘制路径。有什么方法可以确定绘制的路径/形状的矩形边界吗？ （即，围绕路径的矩形区域的宽度和高度是多少）。

I have a simple HTML5 Canvas example that lets the user draw paths onto a canvas. Is there any way to determine the rectangular bounds of the path / shape that was drawn? (i.e., what is the width, height of the rectangular region surrounding the path).

我意识到我可以在绘制形状以求出形状时进行数学运算界限，但我想看看是否有更简单的/内置的方式。

I realize I could do the math while the shape is being drawn to figure out the bounds, but im wanted to see if there was an easier / built in way.

推荐答案

我认为您是唯一使用LineTo的人我能想到的一种方式是在用户绘制路径时保持高度和宽度的最小值/最大值。除此之外，从画布中提取信息的唯一方法是使用getImageData，它只会为您提供原始像素信息。

I assume you are using LineTo's the only way I could think of would be to keep a min/max stored for the height and width as the user is drawing paths. Other than that the only way to pull back info from the canvas would be to use getImageData which will only give you raw pixel information.

显示此内容的快速示例

http://jsfiddle.net/dEnAF/

请注意，我只是创建了一堆随机点。要记住的主要事情是将最小/最大值设置为用户创建的第一条路径的坐标。

note I just create a bunch of random points. The main thing to remember is set the min/max vals to the coords of the first path a user creates.

我想你知道，但是，真正的答案是没有，不幸的是，目前还没有内置的方法可以实现。.

I guess you knew that though, so the real answer is no there is unfortunately no built in way currently to do it..

这篇关于确定绘制到画布中的形状/图形的边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！