My current challenge involves transforming a rectangle with position, scale, and angle adjustments while having it masked.
To illustrate my issue, I have created a fiddle file which can be accessed via this link: http://jsfiddle.net/MichaelSel/vgw3qxpg/2/
In the demonstration, when you click on the green rectangle, observe how it moves in relation to the stationary circle positioned above it. This behavior aligns with my desired outcome for these objects.
However, by clicking the button above, the circle now functions as a mask for the green rectangle. Subsequently, any transformations applied cause the circle (mask) to move as well, instead of remaining fixed like before.
While this is a common approach with masks, my application requires the opposite behavior.
I managed to address this dilemma by implementing a contrasting movement in the blue example.
Despite the simplicity of my demo, I aim to incorporate this functionality into a larger application. Is there a more straightforward way to achieve my desired result without encountering similar complexities?
The following code snippet pertains to the green (undesirable) example:
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...")
})
Below is the code for the blue (preferred) example:
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 + "...")
})
Do you have any suggestions or insights that could assist me in resolving this issue? Your help would be greatly appreciated.