Javascript 拉斐尔移动旋转元素
我有一个旋转45度的矩形,当我尝试使用普通移动拖动功能沿直线移动它时,它会随着45度旋转而移动。我已经看到很多关于这个的帖子,这是为了这样工作,但我还没有找到一个简单的方法来解决这个问题 我知道raphael.free_transform.js插件,但我不需要90%的脚本 从其他帖子中我知道我应该使用Math.atan2,但唉,我的数学技能并没有那么好 我当前的移动功能如下所示:Javascript 拉斐尔移动旋转元素,javascript,raphael,jquery-svg,Javascript,Raphael,Jquery Svg,我有一个旋转45度的矩形,当我尝试使用普通移动拖动功能沿直线移动它时,它会随着45度旋转而移动。我已经看到很多关于这个的帖子,这是为了这样工作,但我还没有找到一个简单的方法来解决这个问题 我知道raphael.free_transform.js插件,但我不需要90%的脚本 从其他帖子中我知道我应该使用Math.atan2,但唉,我的数学技能并没有那么好 我当前的移动功能如下所示: function (dx, dy) { var att = this.type == "rect"
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();
}
您必须使用“转换”方法,而不是简单地更改x-y属性
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);
我已经在JSFIDLE上为您创建了一个实时演示:
请注意,您必须在转换字符串中使用大的T字母(而不是小的T),以使转换成为绝对的,而不是相对的。请阅读Raphael关于transform的文档以了解更多信息:当您选择->移动->选择->移动矩形时,它可以工作,但仍然不能100%从实际位置弹出OK再次检查JSFIDLE(我更新了“ONED”方法)>