拉斐尔在旋转后拖动物体

时间:2016-05-18 12:33:10

标签: javascript rotation raphael drag

拉斐尔有问题。在任何变换(例如缩放,旋转应用于它)之后,我无法正确拖动对象。

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();

这是一个例子。

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

如何更正我的移动功能,以便它可以正确地将对象移动到光标方向?

1 个答案:

答案 0 :(得分:0)

以下是解决方案:

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

大写T解决了这个问题。

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