Raphael svg翻译y轴坐标

我正在使用来自http://raphaeljs.com/的Raphael图书馆，并在图表库上工作。对于这个库，当Y轴倒置时它很有用。现在0,0在左上角，但我希望它在左下角。Raphael svg翻译y轴坐标

有可能将一个比例矩阵应用到一个元素上，但我希望坐标在我绘制的任何内容时都是相反的。任何线索？

2011-12-11 Bas van Dijk

与http://stackoverflow.com/questions/4403345/svg-line-chart-on-known-axes类似。 –

这与我猜测的不完全相同，因为缩放应用于对象而不是画布。 –

我可以想出这样做的唯一方法是使用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); 
};

总之，这是不是在所有优雅的，并没有其他的东西我想真的没有更好的。我知道这不是你想听到的，但我会建议习惯坐标系，因为它是，除非你只是计划显示静态图表。

来源

2011-12-14 15:14:46

我只会使用当前的系统。我只是想知道是否有某种魔术功能可以打电话。你的例子证明并不是真的这样。谢谢！ –

迈克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);

来源

2013-06-04 21:10:31 nickvans

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轴，缩放前偏移，然后再次偏移。

来源

2013-07-26 03:47:34 ericsoco

Raphael svg翻译y轴坐标

回答

相关问题