我正在使用来自http://raphaeljs.com/的Raphael图书馆,并在图表库上工作。对于这个库,当Y轴倒置时它很有用。现在0,0在左上角,但我希望它在左下角。Raphael svg翻译y轴坐标
有可能将一个比例矩阵应用到一个元素上,但我希望坐标在我绘制的任何内容时都是相反的。任何线索?
我正在使用来自http://raphaeljs.com/的Raphael图书馆,并在图表库上工作。对于这个库,当Y轴倒置时它很有用。现在0,0在左上角,但我希望它在左下角。Raphael svg翻译y轴坐标
有可能将一个比例矩阵应用到一个元素上,但我希望坐标在我绘制的任何内容时都是相反的。任何线索?
我可以想出这样做的唯一方法是使用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);
};
总之,这是不是在所有优雅的,并没有其他的东西我想真的没有更好的。我知道这不是你想听到的,但我会建议习惯坐标系,因为它是,除非你只是计划显示静态图表。
我只会使用当前的系统。我只是想知道是否有某种魔术功能可以打电话。你的例子证明并不是真的这样。谢谢! –
迈克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);
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轴,缩放前偏移,然后再次偏移。
与http://stackoverflow.com/questions/4403345/svg-line-chart-on-known-axes类似。 –
这与我猜测的不完全相同,因为缩放应用于对象而不是画布。 –