Raphael SVG 倒置 y 轴坐标

Question

我正在使用Raphael库 (http://raphaeljs.com/) 并且在开发一个图表库。对于这个库，当Y轴反转时非常有用。现在0,0位于左上角，但是我希望它在左下角。

虽然可以将缩放矩阵应用到元素上，但我想绘制的所有内容都能反转坐标。有什么提示吗？

- Bas van Dijk

---

类似于 http://stackoverflow.com/questions/4403345/svg-line-chart-on-known-axes。 - Erik Dahlström

我猜这并不完全相同，因为缩放应用于对象而不是画布。 - Bas van Dijk

Answer 1

我找到的唯一方法是使用CSS对svg元素应用负缩放（请参见此示例）。（我使用jQuery添加了样式。）

不过，这种方法也存在问题。例如，文本将被镜像，除非您采取措施进行反向操作（例如使用Raphael.el添加的invert()方法）：

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);
};

简而言之，这并不优雅，我尝试的其他方法也没有更好的。我知道这不是你想听到的，但我建议你习惯现有的坐标系，除非你只打算显示静态图表。

- Mike C

---

我只会使用当前的系统。我只是在想是否有一种神奇的函数可以调用。你的例子证明了实际上并没有这样的函数。谢谢！ - Bas van Dijk

Answer 2

Mike 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);

- nickvans

Answer 3

这里是如何使用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));

Raphael将比例变换应用于元素的边界框中心，而不是其原点。要反转y轴，请在缩放之前进行偏移，然后再次进行偏移。

- ericsoco