Javascript Raphael svg反转y轴坐标
我正在使用拉斐尔图书馆从和工作的图表库。对于此库,Y轴反转时非常有用。现在0,0在左上角,但我希望它在左下角Javascript Raphael svg反转y轴坐标,javascript,svg,raphael,Javascript,Svg,Raphael,我正在使用拉斐尔图书馆从和工作的图表库。对于此库,Y轴反转时非常有用。现在0,0在左上角,但我希望它在左下角 有可能对元素应用比例矩阵,但我希望对我绘制的任何元素的坐标进行反转。有什么线索吗 我能找到的唯一方法是使用CSS对svg元素应用负比例(见下图)。(我使用jQuery添加样式) 不过,这并非没有问题。例如,文本将被镜像,除非您执行一些取消镜像的操作(例如应用我使用Raphael.el添加到元素中的invert()方法): 此外,如果您要使用鼠标与元素交互,则必须调整内容。请注意,黑圈使用
有可能对元素应用比例矩阵,但我希望对我绘制的任何元素的坐标进行反转。有什么线索吗 我能找到的唯一方法是使用CSS对svg元素应用负比例(见下图)。(我使用jQuery添加样式) 不过,这并非没有问题。例如,文本将被镜像,除非您执行一些取消镜像的操作(例如应用我使用Raphael.el添加到元素中的invert()方法): 此外,如果您要使用鼠标与元素交互,则必须调整内容。请注意,黑圈使用了一个相当标准的mouseMove函数,但它不起作用-它在y方向上移动方向错误。所以你必须像我在其他圈子里做的那样:
function cMove(dx, dy, x,y) {
this.attr('cx', x);
this.attr('cy', paperHeight - y);
};
简言之,这一点也不优雅,我尝试过的其他东西也没有比这更好的。我知道这不是你想听到的,但我建议你习惯坐标系的现状,除非你只打算显示静态图表。迈克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);
}
}
}
只有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轴,请在缩放前进行偏移,然后在缩放后再次进行偏移。类似于。我想这不完全相同,因为缩放应用于对象而不是画布。我将仅使用当前系统。我只是想知道是否有什么神奇的功能可以调用。你的例子证明,实际上并没有这样的例子。谢谢
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);
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));