Question

我正在尝试缩小我用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" });
});

路径是否可以设置为自动缩放以适合纸张？路径的高度/宽度可以设置为像素吗？

Answer 1

我对拉斐尔并不熟悉，但您可以使用边界框函数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的错误，它会在多次调用同一路径时返回错误的结果，因此我使用的是带有修复的分叉版本。

使用RaphaelJS缩放纸张大小的路径或设置路径尺寸（以像素为单位）

1 个答案: