Question

我正在使用Snap SVG在我正在制作的网络应用中操纵SVG。在这个Web应用程序中，我有两个矩形，一个在另一个内部，称为rectInner和rectOuter。目的是允许用户转换rectOuter（缩放，旋转，平移），使rectInner始终严格在rectOuter内。要清楚，rectInner永远不会移动或被转换。

我遇到这个问题的方法是获取rectInner和rectOuter的边界框，并检查第一个是否严格包含在第二个内。 Snap SVG提供了一个函数isBBoxIntersect（rectInner，rectOuter），但它只告诉我边界框的部分是否相交，而不是一个包含在另一个内。

有一种简单的方法吗？

修改

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

Answer 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不起作用，那就试试另一个。

Snap SVG - 检查一个变换的矩形是否完全在另一个内部？

1 个答案: