使用 RaphaelJS 将路径缩放到纸张大小或以像素为单位设置路径尺寸答案

【问题标题】：Scale path to paper size or set path dimensions in pixels with RaphaelJS使用 RaphaelJS 将路径缩放到纸张大小或以像素为单位设置路径尺寸
【发布时间】：2012-03-27 04:00:26
【问题描述】：

我正在尝试缩小使用 RaphaelJS 渲染的图标。使用"transform": "s.5,.5,0,0" 效果很好，但我更希望能够提供绝对像素值，例如20px。一个不错的选择是让路径自动缩放到纸张尺寸。这些都可能吗？

我当前使用transform的代码：

$('.cog-menu-options-icon').each(function (i) {
    paper = Raphael($(this)[0], 20, 20);
    paper.path(window.icons.wrench).attr({ "fill": "#333", "transform": "s.5,.5,0,0" });
});

可以将路径设置为自动缩放以适应纸张吗？路径的高/宽可以以像素为单位设置吗？

【问题讨论】：

标签： javascript jquery raphael

【解决方案1】：

我对 Raphael 不是很熟悉，但是您能使用边界框函数 getBBox() 来获取尺寸，并使用它们来计算正确的比例吗？

$('.cog-menu-options-icon').each(function (i) {
    paper = Raphael($(this)[0], 20, 20);

    var icon = paper.path(window.icons.wrench);
    var max = icon.getBBox().width;
    var h = icon.getBBox().width;
    if(h>max) {
       max = h;
    }
    var scale = 20/max;
    icon.attr({ "fill": "#333", "transform": "s"+scale+","+scale+",0,0" });
});

这里是一个例子：http://jsfiddle.net/xUyRS/

如果路径没有 0,0 原点，我添加了转换图标的代码，并将图标居中。

我还发现 Raphael 有一个带有 getBBox 的错误，该错误会在多次调用同一路径时返回错误结果，因此我使用了带有修复程序的分叉版本。

【讨论】：

我将 prevserAspectioRatio 添加到 svg 并尝试了所有值，但没有任何效果（位置没有变化）。请告诉我为什么会这样。
@rajkamal：我不知道你指的是什么。您的问题是否适用于此代码？也许你应该提出一个新问题。