How to transform scale and translate an element but not at the same time

[Henry Gunawan]

Hi!

I'm not too good at explaining things and I'm not an English native speaker, so I hope my explanation is not too confusing.

I'm trying to create a handler for external svg that I have loaded. There will be 4 handler on every corner of it: Delete, Move, Rotate, and Resize. Pretty much like this: http://take.ms/tWTBA

The first thing I do is to create the first handler on top left corner. I load the main image from external svg:

var mainsvg = Snap("#main-svg");

Snap.load("tablet.svg", function (loadedFragment) {

var g = loadedFragment.select("g");

g.transform(new Snap.matrix().translate(50,50));

mainsvg.append(g);

After that, I created a path:

var path1 = mainsvg.path("m 262.15788,215.18241 -20,-20 14,0 0,-24 -24,0 0,14 -20,-20 20,-20 0,14 24,0 0,-24 -14,0 20,-20 20,20 -14,0 0,24 24,0 0,-14 20,20 -20,20 0,-14 -24,0 0,24 14,0 -20,20 z");

Next, I scale it:

path1.transform(new Snap.matrix().scale(0.2));

Lastly, I count the distance and translate it to top left of the main image:

var distancePathX = g.getBBox().x - 20 - path1.getBBox().x; //20 is the fixed width of the handler

var distancePathY = g.getBBox().y - 20 - path1.getBBox().y; // 20 is the fixed height of the handler

path1.transform(new Snap.matrix().translate(distancePathX, distancePathY));

Only the last transform has the effect. It is translated, but not scaled. Did I use it incorrectly?

By the way, it works if I do it like this:

path1.transform(new Snap.matrix().scale(0.2).translate(distancePathX, distancePathY));

BUT unfortunately, I need to count the distance AFTER it is scaled. By using above code, I can't count the distances.

Does anyone have any idea how to solve this problem?

[Ian]

If I'm understanding right, you want to combine transformations rather than overwrite.

el.transform( something ) will overwrite any existing transforms on that element.

So what I would do for simplicity in this case, is use transform strings (so you don't need to worry about matrices), so something like this...

path1.transform('s0.2t'+distancePathX+','+distancePathY) or

path1.transform('t'+distancePathX+','+distancePathY+'s0.2t')

depending on which order you want the transforms, it wasn't clear from the question.

[Henry Gunawan]

Thank you for your quick reply.

I can't use transform strings because I need to count the distance path after the handlers are scaled and before they are translated.

The order is: scaled => count distance => translate.

Currently, my solution is: recreate the path, recount every point in the string, so they will have 20px width and height and no need to be scaled.

[Ian]

I think you need to put a testing example on a jsfiddle   there's a blank one here with Snap loaded. https://jsfiddle.net/ian_b/rb1Lay36/