javascript - 如何在 Rapheal js 中在屏幕（浏览器）边缘画一条线？

Question

我想在 Raphael 中绘制（动画一条线）到屏幕/浏览器的边缘，例如从 x=100，y=100 像素到屏幕的最右边缘。

我知道如何做动画部分，我只需要知道如何动态找出最正确的坐标。

如何在不在浏览器中创建水平滚动条的情况下做这样的事情？

这在 Raphael js 中是否可能？

到目前为止我的代码：

var paper = Raphael(100, 100, ???, 1);
var lineToEdge = paper.path("M0 0");
lineToEdge.attr(fillerLine);
var anim = Raphael.animation({path: "M0 0L??? 100"}, 500);
lineToEdge.animate(anim.delay(2500));

？？？ - 会以某种方式给我最正确的 x 位置的变量。

Answer 1

使用 Javascript 的 window.screen 对象来获取此信息。

请参阅： http ://www.javascriptkit.com/howto/newtech3.shtml

所以你的代码看起来像（对不起，我自己没有测试过）：

var paper = Raphael(100, 100, screen.width, 1);
var lineToEdge = paper.path("M0 0");
lineToEdge.attr(fillerLine);
var anim = Raphael.animation({path: "M0 0L"+screen.width+" 100"}, 500);
lineToEdge.animate(anim.delay(2500));