1

I have a set of points and lines. The points are simply circles and are important for me to track their positions. If I rotate my set, all elements within the set change position on the canvas. I need to be able to retrieve the position information for each point. If I go to my point and do point.attr('cx'), I can see that nothing has changed. I tried one method where on the point I call var bb = point.getBBox() and this seems to pull the updated point but if I try to set the updated point information on the given point like point.attr('cx',(bb.x + (bb.width / 2)) this is causing my object to move what appears to be the same rotation; so my 15 degree becomes a 30 degree rotation. (I think that is what happens but not sure) I noticed also I can console.log an object and see a point.attrs.cx and it does not update either so I took a shot at manually updating it instead and it caused other odd behaviours. I know this is difficult to follow without seeing it but maybe if there is some general information or some best practice for manipulating a set and making sure you can track the objects within; seems like something that should be built in; but maybe there's a way to easily add it in. Thank you.

Ecropolis
  • 2,005
  • 2
  • 22
  • 27

1 Answers1

1

Here is what I ended up with... the call getBBox() gets new coordinates which get updated to each point's attributes. The call to transform() is my missing piece and the key to answering my question. It resets the transformation data on the object so the point position can be true to coordinates of the canvas.

for (i = 0; i < points.length; i++) {
     var bb = tools.points[i].getBBox();
     points[i].attr('cx',bb.cx);
     points[i].attr('cy',bb.cy);
     points[i].transform('1 0 0 1 0 0');
}

Thanks to the following post for a better understanding of SVG transformations https://www.sarasoueidan.com/blog/svg-transformations/ I also gleaned some good information from this post. What is a "matrix" for in raphael

Ecropolis
  • 2,005
  • 2
  • 22
  • 27