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

发布于 2024-12-18 19:30:42 字数 562 浏览 4 评论 0原文

这可能是一个非常愚蠢的问题，但是我如何绘制一条延伸到 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);

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

原文

This may be a very dumb question, but how do I draw a path that will stretch to a div's width?

I am experimenting with Raphaeljs to make an interactive chart: the user can click sparklines and the lines shift up and down to reveal text content. I see that Raphael's rectangles and other shapes will stretch to width fine by setting the width to 100%, but I can't get a line to do this.

I've set up the paper like this:

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

Set up the line like this:

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

I also set a viewbox but this doesn't seem to make a difference. I can't set a % width on the viewbox anyway:

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

Any help appreciated. Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可是我不能没有你 2024-12-25 19:30:42

我个人在 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');

I've personally had problems with using percentages for defining size of both paper and objects in Raphael, especially with Internet Explorer. The best I could come up with would be to scale the line to fit inside paper, based on the width of the path (assuming that the width is more than the height):

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

回复收藏 0 原文

~没有更多了~