StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODrag paths in Raphaeljs when rotation or scale is changed
text
Body
copied!<p>I have a question regarding the Raphael JS library (version 2.0.0) and the ability to drag my paths around. I get the drag-function to work with my path, but when I am changing the scale or rotation of my path, the drag-function loses all control and my elements flies everywhere.</p> <p>I have tried to use the draggable-library, but as I can see it does not support Raphael 2.0.0 and therefore I can't use it, since I am using Catmull-Rom curveto in my code which is a new feature in Raphael 2.0.0.</p> <p>Any help would be greatly appreciated! Here is my code:</p> <pre><code>paper = Raphael(document.getElementById("holder"), 768, 1024); var startPath = function () { this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx"); this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy"); }, movePath = function (dx, dy) { var trans_x = (dx)-this.ox; var trans_y = (dy)-this.oy; this.translate(trans_x,trans_y); this.ox = dx; this.oy = dy; }, upPath = function () { // nothing special }; drawing = "M152.854,210.137c-9.438-64.471,22.989-102.26,124.838-96.551s244.094,41.985,152.664,151.667C338.926,374.934,162.761,277.813,152.854,210.137z"; shape = paper.path(drawing);; shape.translate(0,0); shape.scale(1,1); shape.attr({ 'stroke': '#000000', 'fill': 'blue', 'stroke-width': '5', }); shape.drag(movePath, startPath, upPath); </code></pre> <p>So, this is working, but as soon as i add for example the following code it is not working:</p> <pre><code>shape.scale(2,2); shape.rotate(90); </code></pre>

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