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

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

===============>>#1 票数:6 已采纳

我能想到的唯一方法是使用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);
};

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

===============>>#2 票数:0

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

===============>>#3 票数:0

以下是使用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轴,偏移,然后再次偏移。

  ask by Bas van Dijk translate from so

未解决问题?本站智能推荐:

1回复

无法在y轴上移动对象 - Raphael,Javascript,SVG

我无法在SVG动画中向下移动图像 使用animate()函数我首先移动图像,工作正常: 但是我接着尝试通过改变y值将其向下移动,但它只是进一步推动它:我尝试过: 和 有和没有引号,但他们都移动图像 非常感谢任何帮助。 谢谢
1回复

如何计算SVG变换的旋转/缩放轴坐标(我正在使用Raphael.js)?

我很难理解如何使用Raphael.js计算 SVG变换的旋转/缩放枢轴坐标(例如旋转点)。 简而言之,如果应用诸如image.transform("S1.5R45")之类的变换,则转换将应用于默认的旋转和缩放轴,我不知道如何计算。 举个例子,我把一个小提琴( jsfiddle.net/G
1回复

SVG动画与Raphael沿路径

SVG动画有一个相当有趣的问题。 我正在使用Raphael沿圆形路径设置动画 circlePath方法是我自己创建的一种方法,用于以SVG路径表示法生成圆路径: 到目前为止,一切都很好。 我的对象(obj)沿圆形路径动画。 但: 仅当我以与路径本身相同的X,Y
1回复

不呈现使用raphael的SVG文件

我有以下SVG文件。 当保存为SVG它呈现良好,但是当我用拉斐尔用绘制SVG 本教程中也不会显示。 我认为这是因为尺度或尺寸问题,但不知道如何解决这个问题。 使用Raphael:路径文件 但如果我使用以下路径,它将工作:
3回复

Raphael JS - 使用SVG文件

我已经看过几个线程来解决这个问题,但没有什么可以解决我的问题。 我有一个带有地图和不同地区的SVG文件( http://www.mediafire.com/?5pmyevdwbyrb51f )。 我想做这样的事情: http : //raphaeljs.com/australia.html
2回复

使用Raphael来操纵SVG

是否可以使用Raphael来操作嵌入式SVG图像? 我过去使用Raphael绘制形状,但实际上并没有看到它被用来操纵现有的SVG图像。 如果没有,是否还有其他任何东西可以让我轻松地更改颜色,添加事件等等到嵌入式SVG图像的多边形?
1回复

Raphael嵌套的SVG元素

尝试使用Raphael实现嵌套的SVG元素。 我认为这个问题与 https://groups.google.com/forum/#!topic/raphaeljs/tzdj3y2DDwg 有什么办法吗? 谢谢。
2回复

Raphael + svgweb + svg核心

能否将Raphael js与svg web和svg核心(原始SVG API)一起使用,以便我可以利用所有可用功能? 我试图将它们一起加载,但是什么也不会发生。 也许他们覆盖了彼此的功能。 更准确地说,我的问题再次是我可以将Raphael js和svgweb一起应用于单个SVG。
2回复

在给定x坐标的情况下获取沿SVG路径的点的y坐标

我正在使用raphael.js绘制一个简单的SVG折线图,如下所示: 当用户悬停的图表中,ID等,以显示一个酥料饼的指向在光标的X位置的线,和在Y位置,其中线是等,使得X位置: 我需要采取路径并找到给定X坐标的Y坐标。
1回复

使用Raphael JS拖放SVG

在使用RaphaelJS拖放SVG方面寻求一些建议(示例会很棒)。 我发现了如何拖动在Raphael中创建的对象 但是我需要能够使其适应于单独的SVG文件,因此例如myPage.html具有myImage.svg,我需要能够将myImage.svg拖动到“画布”周围。 我在想类似