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移動旋轉元素

回答

相關問題