RaphaelJS移动旋转元素

当我尝试使用45度旋转移动的普通移动拖动功能尝试移动它时，我有一个旋转45度的矩形。我已经看到很多关于这个的帖子，而且这是为了像这样工作，但我还没有找到一个简单的方法来解决这个问题。RaphaelJS移动旋转元素

我知道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(); 
    }

来源

2013-03-13 fluf

您必须使用“改造”的方法，而不是简单地改变X-Y ATTRS。

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/

请注意，您必须使用大牛逼函变换的字符串（不小牛逼）进行改造绝对而不是相对的。请阅读Raphael关于变换的文档以获得更多信息：http://raphaeljs.com/reference.html#Element.transform

来源

2013-03-13 10:22:26 oyatek

它可以工作，但仍然不是100％，当您选择 - >移动 - >选择 - >移动矩形不断跳出实际位置 – fluf 2013-03-13 10:46:13

再次确认JSfiddle（I updated “onend”方法）> http://jsfiddle.net/pybBq/1/ – oyatek 2013-03-13 11:04:41

RaphaelJS移动旋转元素

回答

相关问题