javascript - 如何更改 Raphael JS 绘制的路径的宽度和高度？

Question

我有路径，然后用 Raphael JS 绘制.代码如下所示:

var paper = Raphael($('#draw_here')[0], '32', '32');

var star = paper.path("M 22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32 z");

star.attr({
    fill: 'white',
    stroke: 'black',
    title: 'This is a STAAAAAAAR!'
});

它有效并绘制了 32 x 32 像素的大星星。 如何改变它的宽度和高度？

我试着这样做:

var paper = Raphael($('#draw_here')[0], 64, 64);

var star = paper.path("M 22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32 z");

star.attr({
    fill: 'white',
    stroke: 'black',
    title: 'This is a STAAAAAAAR!',
    width: 64,
    height: 64
});

...但所有改变的只是“纸元素”的宽度和高度，而不是星号的。

我想做的是当鼠标光标在上面时，星星会变大。

感谢任何建议!

附言路径不是我自己写的，是从Iconic set得到的.

Answer 1

你也必须调整路径!只需在 Raphaël Playground 上试试.

宽度和高度属性只是要绘制的元素的大小，但路径坐标仍然相同。

对于简单的调整大小，您也可以使用

star.transform("s2");

像以前一样将其调整为 2x。

如果不想编辑路径和简单缩放，您应该使用transform方法调整它的大小并translate特定值的完整路径。

star.transform("t32,32 s2");

例如，这会将对象从顶部移动 32px，从左侧移动 32px，并像以前一样将其大小调整为 2x。