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
});

...但所有变化都是“纸元素”的宽度和高度，而不是明星的。

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

感谢任何建议！

P.S。我自己没有写路径，它来自Iconic set。

Answer 1

你也必须调整路径！只需在Raphaël Playground上尝试。

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

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

star.transform("s2");

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

如果您不想编辑路径并进行简单缩放，则应使用transform方法调整其大小，并translate将完整路径调整为某个值

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

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

如何改变Raphael JS绘制的路径宽度和高度？

1 个答案: