Raphael svg翻譯y軸座標

Question

我正在使用來自http://raphaeljs.com/的Raphael圖書館，並在圖表庫上工作。對於這個庫，當Y軸倒置時它很有用。現在0,0在左上角，但我希望它在左下角。

有可能將一個比例矩陣應用到一個元素上，但我希望座標在我繪製的任何內容時都是相反的。任何線索？

Answer 1

我可以想出這樣做的唯一方法是使用CSS對svg元素應用負縮放（請參閱此fiddle）。 （我用jQuery來添加樣式）。

雖然這並非沒有問題。例如，文本將被鏡像，除非你做一些未鏡它（如施加予添加到使用Raphael.el元件翻轉（）方法）：

Raphael.el.invert = function() { 
    this.transform('s1,-1'); 
}; 

另外，如果準備要用鼠標與元素進行交互，你必須調整一些東西。請注意，黑色圓圈使用了一個非常標準的mouseMove函數，但它不起作用 - 它在y中的方向錯誤。所以，你必須做一些像我和其他各界所做的：

function cMove(dx, dy, x,y) { 
    this.attr('cx', x); 
    this.attr('cy', paperHeight - y); 
}; 

總之，這是不是在所有優雅的，並沒有其他的東西我想真的沒有更好的。我知道這不是你想聽到的，但我會建議習慣座標系，因爲它是，除非你只是計劃顯示靜態圖表。

Answer 2

邁克C的決議的一個小問題是，當你創建文本時，你必須知道文本是否會最終反轉。如果你想在最後確保正確的文本（在應用其他轉換之後），我發現它可以很好地改變文本元素的.transform（）以在最後將文本的比例翻轉到正面。

function InvertText(ObjSet){ 
// This function resets the inversion of text such that it is always right side up 
// ObjSet is a raphael paper.set() object 

for (var i=0; i<ObjSet.items.length; i++){ 
    var ThisObj = ObjSet.items[i]; 
    if (ThisObj.type == 'text'){ 
     var tArr = ThisObj.transform(); 

     // Find the scaling factor 
     for (var j=0; j<tArr.length; j++){ 
      if (tArr[j][0] == 's'){ 
       tArr[0][2] = 1; 
       break; 
      } 
     } 
     ThisObj.transform(tArr); 
    } 
} 
} 

你可以使用這樣的：

var ObjSet = paper.set().push(
     paper.text(0,10,'FirstText'), 
     paper.path('M,0,0,v,100,h,20,v,-100,h,-20'), 
     paper.circle(0,0,5) 
     ); 

//Flip everything on the y-axis 
ObjSet.transform('s,1,-1, T,100,100'); 

// Make the text right-side-up 
InvertText(ObjSet); 

Answer 3

Here's how to do it只是RaphaelJS變換，沒有CSS變換。

var SCALE = 2; 

var paper = Raphael(0, 0, 400, 700); 

// box notched at bottom-center and right-center 
var p = paper.path("M0,0 L100,0 L100,40 L90,50 L100,60 L100,100 L60,100 L50,90 L40,100 L0,100 Z"); 

var bounds = p.getBBox(); 

p.attr({ 
    stroke: 'none', 
    fill: [90, '#578A6E', '#34573E'].join("-") 
}) 
.transform("t"+ (-bounds.width/2) +","+ (-bounds.height/2) + 
     "s"+ SCALE +","+ (-SCALE) + 
     "t"+ (bounds.width/2) +","+ (-bounds.height/2)); 

拉斐爾從元素的邊界框的中心，而不是其原點應用比例變換。要反轉Y軸，縮放前偏移，然後再次偏移。