Question

这可能是一个非常愚蠢的问题，但我如何绘制一条延伸到div宽度的路径？

我正在尝试使用Raphaeljs制作交互式图表：用户可以点击迷你图并且线条上下移动以显示文本内容。我看到拉斐尔的长方形和其他形状通过将宽度设置为100％将拉伸到宽度，但我无法得到一条线来做到这一点。

我已经设置了这样的论文：

var SLAPaper = new Raphael( document.getElementById("LineSLA"), "100%", 60);

设置如下所示的行：

var lineSLA = SLAPaper.path("F1 M 0,42L 103,12L 222,45L 390,13L 460,45L 453,27L 455,28L 450,0L 479,25");

我还设置了一个视图框，但这似乎没有什么区别。我无论如何都无法在视图框上设置％宽度：

SLAPaper.setViewBox(0,0,1500,60, true);

任何帮助表示赞赏。感谢。

Answer 1

我个人在使用百分比来定义Raphael中纸张和对象的大小时遇到了问题，尤其是使用Internet Explorer。我能想出的最好的方法是根据路径的宽度来缩放线条以适应纸张内部（假设宽度大于高度）：

var line = SLAPaper.path("F1 M 0,42L 103,12L 222,45L 390,13L 460,45L 453,27L 455,28L 450,0L 479,25");
var scl = SLAPaper.width / line.getBBox().width;
line.transform('S' + scl + ',' + scl + ',0,0');

拉斐尔 - 如何绘制一条延伸到宽度的路径？

1 个答案: