在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在深夜。