getBBox() only gets initial bounding box, so relative translations are off

[Willy Nolan]

In a previous thread, the very helpful Ian showed how to use a loaded element's initial bounding box to "offset" transformations.  While this works great for some tasks, if the element has already been translated (like if we load it into the page and translate it to the right position) this does not work.  Can anyone explain to me how I could do constant translations (like making an object follow a stylus or finger drag on touch events) on objects that have already been translated?   Here is a fiddle demonstrating how the BBox coordinates are not updated and throw things off. Thanks,

http://jsfiddle.net/computersarecool/m2tL7/1/

[Ian]

This is where it 'can' get complicated :). There's a few different approaches. I'm assuming you don't know in advance the previous transforms (otherwise you could just subtract the offset initially and keep it simpler).

You could do something like the following... http://jsfiddle.net/m2tL7/5/

function move(dx,dy) {

    cap.transform(cap.transform().globalMatrix.invert().toTransformString() + 't' + (xcord - dx) + ',' + (ycord - dy ) );

    //Formula works only if there is no initial transformation

}

So we add an inverse/opposite of the existing transform to your string. I'm not sure how solid that solution will be, depending on what else you have going on. Its also possibly not the most efficient in other cases, but it could be useful to grasp conceptually. 

[Willy Nolan]

Ahh, your solution is just so close, unfortunately I found a small issue.  I need this solution because I am going to be using Snap with a touch device and I want to get .SVGs that are loaded into the page to be able to follow a touch.  I have to translate the elements to get them in the right place when they are loaded (that is where the group transforms happen).  Your new technique works if there is an initial offset and then only a single event (like a button press) to move them to a specific point.  Unfortunately, with a touchevent, the Matrix.invert() gets called again and again (flipping itself each time), this makes the .svg go crazy.  Check out this fiddle:

The cap follows the mouse at first, but if you switch the function from move(x, dx, y, dy) to moveTo(x, dx, y, dy)  (way down at the bottom) you will see the issue.

http://jsbin.com/wimop/3/edit

Thank you so much for your help.

P.S. How did you get that embedded code area in your previous post?

Thanks

[Ian]

I think thats because you are grabbing the elements transform every time there is a mousemove. If there is an initial transformation, you need to grab that once at the start only, and use that to be relative to. If you grab it each time there is a mousemove, you end up applying a transformation you have just changed. So here is a quick adjustment, see if this makes more sense... http://jsbin.com/hewidofo/1/

To get code in the post there is a {} symbol near the font sizes on the right hand size when you post.

[Willy Nolan]

Yes, this method is very very good.  I was just trying to figure out if there is a way to make it work when objects have their matrices adjusted later.  For instance, on this one, I added a line that moves the group when you click the mouse.  This shifts the group by 50x50px and then messes up the original equation.  The method so far is great, I was just hoping that I could move the sliders around dynamically and still get the caps to follow my mouse/finger press...
http://jsbin.com/pojoj/1/edit

[Ian]

To get around that problem, you probably want to take the slider matrix as a base, rather than the cap matrix I think, so its always relative to that...so something like this... http://jsbin.com/jebebizi/3/