【问题标题】:Is it possible to change the Raphael JS (or SVG) coordinate system?是否可以更改 Raphael JS(或 SVG)坐标系?
【发布时间】:2011-11-13 22:40:44
【问题描述】:

我正在使用 RaphaelJS 库,我注意到它非常面向像素。我想画一些随视口缩放的东西。是否可以将画布坐标系重新定义为从 0 到 1,所以如果我画一个以 [0.5, 0.5] 为中心的圆,即使容器的大小发生变化,它也会保持在其容器的中间?

这可能更像是一个 SVG/VML 问题,因为即使 Raphael 无法做到这一点,我也总是可以直接访问底层的 svg 元素。

【问题讨论】:

    标签: svg raphael vml


    【解决方案1】:

    我不知道这是否是最好的答案,但我找到了一种方法来获得一些我正在寻找的东西。如果忽略宽度/高度参数,或者使用 '100%',则可以使用 setViewBox 命令设置自己的坐标系。

    var canvas = Raphael("container");
    canvas.setViewBox(0, 0, 1, 1, true);
    

    当然,问题在于这会缩放所有内容,包括笔触、背景等。这使得很难有像笔触宽度这样的东西,而不是 1px。

    【讨论】:

    • 其实用vector-effect="non-scaling-stroke"不管怎么变换都可以得到1px的笔画。
    • 不确定 Raphael 是否原生支持
    • 可以通过 $(SomeRaphaelElement.node).css({'vector-effect':'non-scaling.stroke'}); 来添加;
    • 这里有一个小提琴演示拉斐尔纸拉伸以填充具有动画大小变化的 div,无论是否使用 setViewBox jsfiddle.net/fa9zbnyd/2
    猜你喜欢
    • 1970-01-01
    • 2015-09-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多