CODEWITHSUNDEEP
javascriptrotationraphaeldrag
Artem Shevtsov
Artem Shevtsov

Reputation: 516

Raphael drag object after rotation

I have a problem with Raphael. I can't drag object properly after any transformations such as scale, rotate applied to it.

var text;

Raphael.el.draggable = function () {
            var start = function () {
                    this.ox = 0;
                    this.oy = 0;
                },
                move = function (dx, dy) {
                    var x = dx - this.ox,
                        y = dy - this.oy;
                    this.transform("...t" + x  + "," + y);
                    this.ox = dx;
                    this.oy = dy;
                },
                end = function () {
                };
            this.drag(move, start, end);
            return this;
        };

var paper = Raphael(document.getElementById('canvas'), 300, 300);
paper.rect(0, 0, 300, 300).attr('fill', '#dedede');
text = paper.text(150, 150, 'ABC');
text.attr('font-size', 48);
text.transform('...r90');
text.draggable();

Here is an example.

https://jsfiddle.net/rzj4e4x8/1/

How to correct my move function so it can move object to the cursor direction properly?

Upvotes: 1

Views: 256

Answers (1)

Artem Shevtsov
Artem Shevtsov

Reputation: 516

Here is the solution:

this.transform("...T" + x  + "," + y);

capitalized T fixes the problem.

https://jsfiddle.net/rzj4e4x8/4/

Upvotes: 1

Related Questions