获取弯曲的 svg 对象的渲染边界

Question

我需要知道一个 svg 对象是否与另一个对象相邻。因此我需要得到它的边界。这些对象可以是矩形或路径。当它们是直的时候这很容易，但是当它们弯曲或弯曲时我不知道如何做到这一点。

可以找到我的意思的一个例子 here 或这里的一个简短例子：

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 200 512 512">
   <path d="m 223.40414,282.21605 35.53211,-3.88909 0,-18.73833 -19.79899,-0.17678 c -5.83251,7.19542 -10.70707,15.0451 -15.73312,22.8042 z" id="pB"></path>
</svg>

如果我使用 Box 角，我会创建一个 virtual 直矩形，其相邻对象不等于渲染对象的相邻对象。我该怎么做？

Answer 1

Snap 库为您的问题提供了一些不错的实用程序。您的问题没有定义 "adjacent" 的真正含义。这是一个为路径之间的最大距离设置阈值的函数：

var threshold = 1;

function isAdjacent (id1, id2) {
    var s = Snap("#mysvg");
    var first = s.select('#' + id1);
    var second = s.select('#' + id2);

    var len = first.getTotalLength(first);

    var p1, p2;
    for (var at = 0; at <= len; at += threshold) {
        p1 = first.getPointAtLength(at);
        if ( Snap.closestPoint(second, p1.x, p1.y).distance <= threshold) {
            return true;
        }
    }
    return false;
}

JsFiddle

获取弯曲的 svg 对象的渲染边界

Obtaining rendered borders of a crooked svg-object

javascript

svg

vector-graphics

snap.svg