绘制HTML5 Canvas上的区域

时间:2014-04-09 07:06:49

标签: javascript canvas

我有一个要求,我必须在HTML5画布上绘制区域,使用圆形,矩形,多边形工具绘制区域(这是配置的一部分,即仅定义区域)。稍后在仪表板中(可以查看配置区域)我想在区域内显示小的子区域(动态通过代码),子区域的数量将不固定(但子区域的大小是固定的假设20 X 20 )。我希望这个子区域以这样的方式绘制,即它们在区域中尽可能地适合并且不会出现区域。任何人都可以告诉我最有效的方法。请参阅附图。{{ 0}}

2 个答案:

答案 0 :(得分:0)

您需要使用jquery或javascript图像映射编辑器工具才能这样做..

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

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

看看。

答案 1 :(得分:0)

你想要一个" bin packing"尝试将形状拟合到容器路径中的算法。

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

这是一个帮助您入门的链接:

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

你的"将矩形打包成圆圈"和"将矩形打包成矩形"已经很好地解决了。

您的"在非主路径中打包矩形"可能必须使用非最佳方法通过将路径划分为子容器来解决。这种解决方案的数学计算是可怕的,并使数学家在深夜保持这种状态。

相关问题