【问题标题】:How to check whether a svg circle inside the svg path如何检查svg路径内是否有svg圈
【发布时间】:2016-06-12 14:49:38
【问题描述】:

有很多方法可以检查路径内的点,但我还没有找到任何可以检查圆(整个对象,而不是中心点)是否在 svg 路径内的算法。 如果你想知道为什么我需要这个算法——我想用不同半径的圆圈 (http://bl.ocks.org/mbostock/1893974) 来填充空间,而那些进入我想用另一种颜色绘制的形状的圆圈。结果,我们得到了色盲人的测试图像,就像 Ishihara 的照片一样。

The expected result like on that picture.

【问题讨论】:

  • 看看这个样本:bl.ocks.org/mbostock/4218871 。甚至有相同的颜色:)
  • 我看到了这个例子,但都是关于路口,我需要入口
  • 与路径算法有距离(搜索“路径上的最近点”)。您需要做的就是检查圆的中心是否在路径内并且到路径的距离大于半径。
  • @PaulLeBeau,非常感谢,这正是我想要的!

标签: d3.js svg


【解决方案1】:

这是一种碰撞检测算法或交集。

第 1 步

用圆形填充你的基本形状

第 2 步

创建主要形状

第 3 步

检测 intersect 并为后面的形状着色。并隐藏主要形状

优点:您可以动态添加形状、动画或动态更改。

对于实现看here

【讨论】:

    猜你喜欢
    • 2022-01-22
    • 1970-01-01
    • 1970-01-01
    • 2015-06-08
    • 1970-01-01
    • 2018-07-01
    • 1970-01-01
    • 2019-06-02
    相关资源
    最近更新 更多