Question

我正在用Raphael在Javascript中编写一个程序，以便从另一个结束的地方绘制一条路径。我已经尝试了很多方法，并最终使用BBox坐标进行连接，因为我使用的线条相对比较直。我确信可能还有另一种（更好的）方式，但我尝试过的一切都没有用。

我现在遇到的问题是，当我在浏览器中运行程序时，在某些情况下，两条线将在正确的位置连接，而在其他情况下，当我刷新它时，它不会。我真的很困惑，因为我没有改变任何东西。

我认为这可能与时间有关，所以我添加了一个延迟，但这没有用，虽然如果延迟到位且足够长，它只会绘制第二行。

非常感谢任何建议。

window.onload = function(){
var paper = new Raphael(100,0,2000,2000);
var line1 = paper.path("m 300 400 l 100 200");

function lines(){
    line1.animate({"transform":"r102 t120 20"});
}

setTimeout(function box1(){
    var bbox = line1.getBBox();
    var line2 = paper.path("m"+[bbox.x]+" "+[bbox.y2]+"l 200 100");
}, 1000000000000000);

lines();
box1();

};

Answer 1

我现在明白了。我已经使用.onAnimation来延迟第二行的绘制，现在可以正常工作了。

即

function lines(){
    line1.animate({"transform":"r62t40 20"}).onAnimation(function (){
        var bbox = line1.getBBox();
        var line2 = paper.path("m"+[bbox.x]+" "+[bbox.y2]+"l 200 100");
    });
}

Answer 2

不太清楚为什么你仍在制作动画。我会将它们放在一起并围绕一个点旋转。在这里摆弄http://jsfiddle.net/Lmbvm/

var paper = new Raphael(100,0,2000,2000);
var line1 = paper.path("M300 400 l100 200");
var line2 = paper.path("M400 600 l200 100");
var set = paper.set();
set.push( line1, line2 );
set.transform('r50,200,200');

Javascript动画计时

2 个答案: