0

I would like to move a RaphaelElement and created a simple test case:

var paper = Raphael(0, 0, 500, 500);
var rect = paper.rect(50, 50, 100, 100);
rect.attr("fill", "blue");
rect.matrix.translate(300, 300);

But the rectangle isn't moved. At first I thought that for the matrix was probably not updated correctly and tried this:

//...
alert("" + rect.matrix.x(0,0)); // prints 0
rect.matrix.translate(300, 300);
alert("" + rect.matrix.x(0,0)); //prints 300

Obviously the matrix is changed but the rectangle does not care about that. Therefore I changed my code to:

 rect.matrix=rect.matrix.translate(300,300);

But that either crashes the program or has no effect at all. It seems like I'm missing some sort of update method, to apply a matrix to a RaphaelElement. Something that looks like this:

rect.updateMatrix();

I've searched in the documentation but didn't find such a method. What is the canonical usage of matrices in RaphaelJs?

lhk
  • 27,458
  • 30
  • 122
  • 201

2 Answers2

2

rect.translate(300, 300) will apply a translation or alternatively rect.transform("t300,300")

Also

rect.transform(['m',mat.a, mat.b, mat.c, mat.d, mat.e, mat.f]);

can be used to apply an existing matrix (mat) to the rect.

Paul Richter
  • 10,908
  • 10
  • 52
  • 85
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • rect.translate is deprecated and rect.transform accepts a string. Since there will be a lot of movement in my application I wanted to avoid using transform. Why would they offer matrices, if they aren't usable ? – lhk Jan 03 '13 at 11:14
  • Hey, I just realised that you've answered my other question, too. On how to apply a transform in Raphael. You offered matrices as a solution. Could you post some code, how you would move a RaphaelElement using a matrix ? That would be great – lhk Jan 03 '13 at 11:16
  • 1
    I think matrix is read-only and I suspect it's the consolidation matrix for the transform on the element. – Robert Longson Jan 03 '13 at 11:51
  • Then how am I supposed to replace the transform method by using matrices ? – lhk Jan 03 '13 at 11:52
  • rect.transform("m1,2,3,4,5,6") or perhaps you need to ask a clearer question. – Robert Longson Jan 03 '13 at 12:59
  • With that code, I need a matrix "literal". How can I use a given matrix. Supposing you have a matrix object named mat. How do you apply it to a RaphaelElement elem ? – lhk Jan 03 '13 at 13:33
  • rect.transform(['m',mat.a, mat.b, mat.c, mat.d, mat.e, mat.f]); – Robert Longson Jan 03 '13 at 13:50
0

I found another reference on Stackoverflow that does an awesome job explaining the matrix. It solved my problem.

StackOverflow Matrix clarification

Community
  • 1
  • 1
Michael
  • 173
  • 1
  • 3