在HTML5上绘制区域Canvas

Question

我有一个要求，我必须在HTML5画布上绘制区域，使用圆形，矩形，多边形工具绘制区域（这是配置的一部分，即只定义区域）。后来在Dashboard中（可以查看配置区域）我想在区域内显示小的子区域（通过代码动态显示），子区域的数量不会被固定（但是子区域的大小是固定的假设为20 X 20 ）。我希望这个分区的绘制方式能够尽可能适合他们的区域，并且不会出现在区域内。任何人都可以告诉我这样做的最有效的方法。请参阅附件图像。

Answer 1

您需要使用jquery或javascript影像地图编辑工具来做到这一点..

http://www.jqueryrain.com/?5X9o88Va

http://www.codeproject.com/Articles/593037/Image-Map-Editor-Fabric-vs-ImageMapster-and-Virtua

看看。

Answer 2

你想要一个“bin包装”算法，试图将形状适合你的容器路径。

Bin包装解决方案根据要包含的元素的形状和容器的形状而有所不同。

这里是一个链接，让你开始：

http://en.wikipedia.org/wiki/Packing_problem

你的“包矩形进圈”和“包成长方形矩形”已经很好地解决了。

您的“非主要路径中的包装矩形”可能必须通过将您的路径划分为子容器而使用非最佳方式来解决。这种解决方案的数学是可怕的，并保持mathemeticians在深夜。