0

当我尝试使用正常移动拖动功能沿直线移动它时，我有一个旋转 45 度的矩形，它随着 45 度旋转移动。我已经看过很多关于此的帖子，并且打算像这样工作，但我还没有找到解决此问题的简单方法。

我知道 raphael.free_transform.js 插件，但我不需要 90% 的脚本。

从其他帖子中我知道我应该使用 Math.atan2 但可惜我的数学技能不是那么好。

我当前的移动功能如下所示：

function (dx, dy) {
        var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy}; 
        this.attr(att);
        for (var i = connections.length; i--;) {
            r.connection(connections[i]);
        }
        r.safari();
    }
4

1 回答 1

1

您必须使用“转换”方法而不是简单地更改 xy 属性。

var data = {};
var R = Raphael('raphael', 500, 500);
var rect = R.rect(100, 100, 100, 50).attr({fill: "#aa5555"}).transform('r45');
var default_transform = rect.transform();

var onmove = function (dx, dy) {
    rect.transform(default_transform + 'T' + dx + ',' + dy);
};
var onstart = function () {};
var onend = function () {
    default_transform = rect.transform();
};

rect.drag(onmove, onstart, onend);

我在 JSfiddle 上为您创建了一个现场演示：http: //jsfiddle.net/pybBq/

请注意，您必须在转换字符串中使用大T字母（不是小t）来使转换成为绝对而不是相对。请阅读 Raphael 关于转换的文档以获取更多信息：http ://raphaeljs.com/reference.html#Element.transform

于 2013-03-13T10:22:26.453 回答