Question

我想变换一个有面具的矩形（位置，比例和角度）。

我创建了一个小提琴文件来演示我的问题。 http://jsfiddle.net/MichaelSel/vgw3qxpg/2/

单击绿色矩形，然后查看它如何相对于其上方的圆圈移动。矩形在移动，圆圈是静止的。这就是我想要反对的行为。

但现在点击顶部的按钮。圆圈现在是绿色矩形的蒙版，现在按下它时，您可以看到转换也应用于蒙版。（圆圈不会像它不是面具那样保持静止）。

我知道通常不会这样，你想以这种方式对待面具，但对于我的应用，我想要相反。

我能够通过在蓝色示例中创建相反的运动来克服此问题。

有了这个，我的演示非常简单，我希望在一个大应用程序中实现它。有没有办法在没有麻烦的情况下实现我想要的东西？

这是绿色（坏）示例的代码：

  s = Snap("#player")
    rect = s.rect(100, 100, 100, 100).attr({"fill" : "green" })
    circle = s.circle(200, 200, 50).attr({"fill" : "white" })
    rect.attr("mask",circle)
    rect.click(function () {
        rect.transform("t20,10s1.1...")
    })

这是蓝色（好）示例的代码：

    rect2 = s.rect(300, 100, 100, 100).attr({ "fill": "blue" })
    circle2 = s.circle(400, 200, 50).attr({ "fill": "white" })
    rect2.attr("mask", circle2)
    rect2.click(function () {
        rect2.transform("t20,10s1.1...")
        circle2.transform("t-20,-10s"+1/1.1 + "...")
    })

有什么建议吗？

谢谢。

Answer 1

如果将矩形放在一个组中，然后将蒙版应用于组，则可以按照自己喜欢的方式变换矩形，而不会影响蒙版。

s = Snap("#player")
rect = s.rect(100, 100, 100, 100).attr({"fill" : "green" })
g = s.group(rect);
circle = s.circle(200, 200, 50).attr({"fill" : "white" })
rect.click(function () {
    rect.transform("t20,10s1.1...")
})


$("#myButton").click(function () {
    g.attr("mask",circle)
})

http://jsfiddle.net/vgw3qxpg/3/

如何在不将变换应用到蒙版的情况下在Snap.svg中变换形状？

1 个答案: