【发布时间】:2011-11-13 22:40:44
【问题描述】:
我正在使用 RaphaelJS 库,我注意到它非常面向像素。我想画一些随视口缩放的东西。是否可以将画布坐标系重新定义为从 0 到 1,所以如果我画一个以 [0.5, 0.5] 为中心的圆,即使容器的大小发生变化,它也会保持在其容器的中间?
这可能更像是一个 SVG/VML 问题,因为即使 Raphael 无法做到这一点,我也总是可以直接访问底层的 svg 元素。
【问题讨论】:
我正在使用 RaphaelJS 库,我注意到它非常面向像素。我想画一些随视口缩放的东西。是否可以将画布坐标系重新定义为从 0 到 1,所以如果我画一个以 [0.5, 0.5] 为中心的圆,即使容器的大小发生变化,它也会保持在其容器的中间?
这可能更像是一个 SVG/VML 问题,因为即使 Raphael 无法做到这一点,我也总是可以直接访问底层的 svg 元素。
【问题讨论】:
我不知道这是否是最好的答案,但我找到了一种方法来获得一些我正在寻找的东西。如果忽略宽度/高度参数,或者使用 '100%',则可以使用 setViewBox 命令设置自己的坐标系。
var canvas = Raphael("container");
canvas.setViewBox(0, 0, 1, 1, true);
当然,问题在于这会缩放所有内容,包括笔触、背景等。这使得很难有像笔触宽度这样的东西,而不是 1px。
【讨论】:
vector-effect="non-scaling-stroke"不管怎么变换都可以得到1px的笔画。