StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy is Raphael.js animating to incorrect coordinates?
text
Body
copied!<p>I'm trying to do a simple animation in Raphael.js in which a paper.text object is moved from its current position to another position. Here is some of my code (there is far too much to post all of it):</p> <pre><code>songPos = getSongPosition(this, charIndex); letter.path.animate({x: songPos.x, y: songPos.y, "font-size": this.correctFontSize}, 500, onAnimationComplete); </code></pre> <p>Here is the Letter object being referenced in the above code:</p> <pre><code>function Letter(args) { this.letter = args.letter || "A"; this.correct = args.correct || false; this.transformation = args.transformation || ""; this.initX = args.x || 0; this.initY = args.y || 0; this.path = null; } Letter.prototype.buildPath = function() { this.path = paper.text(this.initX, this.initY, this.letter); if(this.transformation) { this.path.transform(this.transformation); } return this; }; </code></pre> <p>The problem is I'm printing the <code>x</code> and <code>y</code> values returned by <code>getSongPosition</code>, and they're correct, but the animate method is sending my text object somewhere off-screen. I've also tried just setting the animation attributes to <code>{x: 0, y: 0}</code>, but I still get the same results. I can post more of the code if it is necessary.</p> <p>Any help would be greatly appreciated.</p> <p><strong>UPDATE 1:</strong> Part of my program requires I be able move objects to specific coordinates. Some of the objects will be rotated and others will not, so I wrote this:</p> <pre><code>Letter.prototype.getMoveTransform = function(x, y) { var bbox = this.path.getBBox(true); var dx = x - bbox.x; var dy = y - bbox.y; return "T" + dx + "," + dy + (this.transformation == null ? "" : this.transformation); }; </code></pre> <p>I believe this is the root of my problem. This function is supposed to generate the transformation required to move a rotated object to (x, y). I'm not sure why I have to re-rotate the object on every animation.</p> <p><strong>UPDATE 2:</strong> I have somehow solved my problem. I would post my solution, but I don't understand why any of this works/didn't work in the first place anymore.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload