Raphael svg反转y轴坐标

Question

我正在使用http://raphaeljs.com/的Raphael库并在图表库上工作.对于此库,当Y轴反转时非常有用.现在0,0位于左上角,但我希望它位于左下角.

有可能将一个比例矩阵应用于一个元素,但我想要为我绘制的任何内容反转坐标.有线索吗？

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

简而言之,这一点都不优雅,我尝试的其他任何东西都没有更好.我知道这不是你想听到的,但我建议你习惯于坐标系,除非你只是计划显示静态图表.