Search jQuery

jQuery Forum

Screen name:
Ghetolay

Ghetolay's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Get coordinate relative to other elements whith css transform involved
[1Reply]
- 19-Feb-2016 05:34 PM
- Forum: Developing jQuery Core
I'm thinking about a way to get coordinate of an element relative to another element when there is transform applied in between (either directly on those elements or somewhere on the dom tree).

We can easily convert coordinate with the used of getComputedStyle().transform which return the matrix to apply. I have a running code doing it.

We could do this way :

All function would take the first element.

- jQuery.toPageCoordinate() would return a function(x,y) to convert coordinate relative to element into document's coordinate. Depending on which use case we want to handle, this may be useless since UIEvents already returns pageX and pageY.

- jQuery.fromPageCoordinate() would return a function(x,y) to convert document's coordinate into coordinate relative to the element.

- jQuery.positionRelativeTo( element2 ) an utility function using the 2 previous one.

Here is the pseudo code for the 2 first :
1. toPageCoordinate(){
2. var matrix = new Matrix(); //identity matrix
3. var el = this[0];
5. do{
6. matrix.translate( el.offsetLeft, el.offsetTop );
8. var transform = window.getComputedStyle(el).transform;
9. if(transform)
10. matrix.multiply( parseTransform( transform) );
12. el = el.offsetParent;
13. } while( el );
15. matrix.inv();
17. return function(x,y){
18. return matrix.applyVect(x, y);
19. };
20. }
22. fromPageCoordinate(){
23. var matrix = new Matrix(); //identity matrix
24. var el = this[0];
25. var els = [];
27. do{
28. els.push(el);
29. el = el.offsetParent;
30. }while( el );
32. for(var i = els.length-1; i >= 0; i--) {
33. el = els[i];
35. matrix.translate( -el.offsetLeft, -el.offsetTop );
37. var transform = window.getComputedStyle(el).transform;
38. if(transform)
39. matrix.multiply( parseTransform( transform) );
40. }
42. return function(x,y){
43. return matrix.applyVect(x, y);
44. };
45. }
The Matrix object is common stuff and parseTransform() shouldn't be difficult :
1. parseTransform( transformStr ){
2. var floatArr = transformStr.split(/\(|,|\)/).slice(1,-1).map( function(v){
3. return parseFloat(v);
4. });
6. if( floatArr.length == 6 )
7. build a 3x3 matrix from the 6 values
8. else
9. build the 4x4 matrix directly from the 16 values
10. }
So is this a good idea or does jQuery shouldn't introduce Matrix computation ?

cheers.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend