Working with matrices to accumulate transformations

[raffaeler]

Question

I have to draw a custom map supporting translations, rotations and zooming.
The transforms of every gesture is always additive in respect of the previous gestures.
From a math perspective this simply means multiplying the new transform and proceed to the next.

The transform style in React Native apparently does not support matrices (and this is very surprising to me). How can I work with matrices in react-native-svg in order to accumulate the transformations?

Thank you!

[msand]

Perhaps this can help?
https://twitter.com/wcandillon/status/1244988861635268608
https://www.npmjs.com/package/zoomable-svg

[msand]

And yeah, you can use matrices with transforms in react-native-svg, and matrix multiplication follows the normal linear algebra, so just compute what ever product of matrices you want, and give it as a transform to e.g. a G element.

[raffaeler]

I already watched the video last week and also tried to use your zoomable-svg but the problem is that I need to accumulate all the transformations: scaling, rotation and translation.
The video shows that the transform is reset at the end of the gesture: definitely too easy because it never accumulates matrices.

How can I specify a matrix?

• transformMatrix has been deprecated according to the docs
• the transform: {[ matrix: [...] is apparently not working

[msand]

Same way as in any other svg https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Matrix

  <rect x="10" y="10" width="30" height="20" fill="red"
        transform="matrix(3 1 -1 3 30 40)" />

I don't see the problem, you know how to multiply two matrices no?
https://en.wikipedia.org/wiki/Matrix_multiplication#Definition

[raffaeler]

Of course I know.
I did not find the transform="matrix(...)" syntax in the docs.
Is this supported for react-native-svg only or is it standard for all the react-native based libraries?

I would prefer to apply the transforms to the element whose child is the SVG. Is this a potential performance hit?

[msand]

This only works on react-native-svg, as it comes from the svg spec. Would have to do profiling to check performance. Quite likely, natively animated/computed logic would be more performant than a plain js version.

[msand]

and style={{transform: [{matrix: something}]}} should certainly work in both react-native and react-native-svg

[raffaeler]

Thanks. I am probably going to use animation only to smooth the movements, but I only need to apply the transforms to change the map view.

and style={{transform: [{matrix: something}]}} should certainly work in both react-native and react-native-svg

I was not successful in using it on a simple View element filled with a color. Will retry ...

Thank you!

[msand]

There's also this happy chap i tried to help once, might be useful for you as well: #1064

[msand]

But, when I think about it, seems you don't need to accumulate any state at all, you just need to keep track of where the pointers were when the number of active gestures change, if it changes from 0 or 2 to one pointer, keep track of where it was when that happened, and on new gesture events, the distance of the pointer to that point is your translate transform. If it changes from 0 or 1 to 2, store the position of the two pointers, on new events, the change in distance between the two new positions and two initial ones, is your scale transform, the change in angle between them is your rotation, and the distance between the midpoints of the two pairs is your translation. Gestures / states in between should not have any effect / non-linear accumulation affecting the outcome, transform only depends on current pointer data and when the number of active pointers changed.

[raffaeler]

hmm, let's make an example:

• you pinch the map, and it zooms at a specific point (the center of the pinch)
• than you rotate it, with a different pinch point
• now you pan it
  If you now want to zoom or rotate, you need to accumulate those transforms over the previous ones.
  The transforms style (without the matrix) just apply a fixed sequence of translation, rotation, scale.
  Either you keep the matrix and then try to extract the translation, rotation, scale from that matrix, or you will never be able to keep the gestures correctly.
  Since I don't skew, the matrix should be reversable, but never did it as keeping the matrix state is far simpler.
  Do you agree or am I losing something?
  I always worked this way in other technologies and it worked.

[msand]

Ah, yes, when the gesture ends you should accumulate the transform for sure, was just thinking about individual gestures on top of the current state. So the initial transform is the identity, lets call it A, and then you multiply a transform that has the translate, scale, rotate and, offset needed for the just finished gesture, B = TSRO (translate, scale, rotate, offset), and make C = BA the new accumulated transform

[raffaeler]

Exactly.
The video you linked is about Instagram where the photo goes back to the original position after the gesture... that's too easy and I already can do it.
When you go to google maps instead, you accumulate the transformations, so a state is needed (starting, as you said in your last message from the identity matrix) by multiplying every transition (I typically order scale, then rotation and lastly translation).
BTW every time you pinch, you either have a primitive centering the rotation/zoom, otherwise you have to manually translate + rotate/zoom + translate back.

FYI I tried using reanimate and discovered (sadly after two days) they do not support matrices, so I can't work with their library.

[msand]

Alternatively you can have four different transforms, one for each primitive, and accumulate those, will need to consider interactions between translations and scale-rotate in the gestures a bit more carefully then.

[raffaeler]

Since I don't need to skew, they should be reversable.
In this case I could maintain a matrix and then "extract" the separate t,r,s,o parameters. Never did that but in theory it should be possible.