Snap SVG - 检查一个转换后的矩形是否完全在另一个矩形内？答案

【问题标题】：Snap SVG - Check if one transformed rectangle is completely inside of another?Snap SVG - 检查一个转换后的矩形是否完全在另一个矩形内？
【发布时间】：2015-04-09 20:50:30
【问题描述】：

我正在使用 Snap SVG 在我正在制作的网络应用程序中操作 SVG。在这个网络应用程序中，我有两个矩形，它们从一个在另一个内部开始，分别称为 rectInner 和 rectOuter。目的是允许用户转换 rectOuter（缩放、旋转、平移），使得 rectInner 始终严格在 rectOuter 内部。需要明确的是，rectInner 永远不会移动或变形。

我解决这个问题的方法是获取 rectInner 和 rectOuter 的边界框，并检查第一个是否严格包含在第二个中。 Snap SVG 提供了一个函数 isBBoxIntersect(rectInner, rectOuter)，但它只告诉我边界框的某些部分是否相交，而不是其中一个包含在另一个中。

有简单的方法吗？

编辑：

现在看来我对边界框的概念有些误解，但问题应该更简单。如果我能在所有变换之后找到计算 rectOuter 四个顶点的方法，那么只要 rectInner 的角在由这些顶点构造的路径的内部，整个矩形就是。我想。

【问题讨论】：

标签： svg snap.svg

【解决方案1】：

##### coffeescript
el = Snap('rect#outer')
mat = el.attr('transform').totalMatrix

left = +el.attr('x')
top = +el.attr('y')
right = left + (+el.attr('width'))
bottom = top + (+el.attr('height'))

console.log(left, top, right, bottom)

points =  {
    x: mat.x(left, top)
    y: mat.y(left, top)
    x2:mat.x(right, top)
    y2:mat.y(right, top)
    x3:mat.x(right, bottom)
    y3:mat.y(right, bottom )
    x4:mat.x(left, bottom)
    y4:mat.y(left, bottom)
}

使用矩阵！您可以在mat 变量中找到更多矩阵。如果 totalMatrix 不起作用，请尝试另一个。

【讨论】：