在HTML5 Canvas上绘制区域 [英] Plot area's on HTML5 Canvas

问题描述

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

I have a requirement where i have to draw areas on HTML5 canvas, area are drawn using circle,rectangle,polygon tool(This is part of configuration i.e only defining the area's). Later in Dashboard(where the configured area's can be viewed) i want to show small sub area's within the area(dynamically through code), the number of sub area's will not be fixed(but the size of sub area's is fixed assume 20 X 20). I want this sub area's to be plotted in such a way that they fit the best possible in their area's and does not come out of area.Can anyone please tell me the most efficient way of doing this. Refer to this image.

推荐答案

全部简而言之，您的问题似乎与包装问题类问题有关（ http://en.wikipedia.org/wiki/Packing_problem [ ^ ]）



关于SO的问题似乎与你的几乎相同，可以在这里找到： http://stackoverflow.com/questions/3516044/fill-arbitrary-2d-shape-with-given-set-of-rectangles [ ^ ]



该问题的公认答案参考了AndrásHegedüs1982年的研究论文，称为通过矩形覆盖多边形的算法 - 链接 [ ^ ]（费用

When all boiled down, it seems that your question relates to the Packing Problem class of problems (http://en.wikipedia.org/wiki/Packing_problem[^])

A question on SO that seems almost identical to yours may be found here: http://stackoverflow.com/questions/3516044/fill-arbitrary-2d-shape-with-given-set-of-rectangles[^]

The accepted answer to that question makes reference to a research paper from 1982 by András Hegedüs, called Algorithms for covering polygons by rectangles - link[^] (which costs

35或要求适当的机构访问）并提出建议来搜索引用它的论文。



几乎可以肯定它所描述的算法的开源实现。有了一些时间和正确的搜索条件，您将有希望找到有用的东西。

35 or requires appropriate institute access) and makes the suggestion to search for papers that cite it.

There are almost certainly open-source implementations of the algorithm it describes. With some time and the right search-terms, you'll hopefully be able to find something useful.

这篇关于在HTML5 Canvas上绘制区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！