填充复杂形状(绘制线条)

Question

我们在这里看到的填充效果http://hakim.se/experiments/html5/coil/非常棒.我甚至猜不出任何关于如何填充这样的填充物(在绘制你的时候关闭形状会看到你正在创建封闭形状的填充物)可能会起作用.

请问有什么想法吗？

Answer 1

听起来你正在寻找整体的高级流程.如果不对该站点使用的方法进行逆向工程,我可以考虑这样做.

从鼠标当前位置的一个点开始.每隔一段时间,

1. 从鼠标的上一个位置绘制一个线段到鼠标的当前位置.
2. 删除太旧的线段.

3. 如果新线段与任何现有线段相交(Google"检测线段交叉点"或类似线段),则将它们在它们相交的点处分开(搜索"交叉点处的算法分割线段"可能会使您到达那里).

   假设你从一开始

      o----o
       \
        \     o
         \   /
          \ /
           o
   

   并从右侧的点添加一个段,向左延伸:

      o----o
       \
   o----------o
         \   /
          \ /
           o
   

   请注意,新段与现有线段相交.在交叉点拆分它们:

      o----o
       \
   o----o-----o
         \   /
          \ /
           o
   

   注意,o表示线段的结束.我们已经从四个段(其中两个段相交)变为六个线段,其中四个段具有共同点.

   这些步骤将为您提供连续的线段跟踪.现在让我们弄清楚它们是否形成一个多边形:

4. 通过每个线段端到端的步骤.标识在多个不相邻的段之间共享的线段的第一端.找到结束后,将所有线段绘制到该点:

      ●----●
       \
        ●
   

5. 从另一端开始,做同样的事情.

      o----o
       \
   ●----●
   

6. 所有剩余的线段都是多边形的一部分.现在,在画布上绘制封闭的多边形.

      o----o
       \
   o----●-----●
         \.../
          \./
           ●
   

7. 最后,是时候弄清楚多边形中包含哪些圆圈了.使用上面实际形成多边形的段列表,使用"算法点在多边形内部"之类的搜索来点击Web.