我对 raphael.js 有很多问题,希望有人能帮助我。
第一个问题:为什么他们不给我画两条不同的路径?是因为它在同一个画布/div中吗? !解决了!
function animateLine(canvas, divName, time, durzeit, colorNumber, pathString) {
$('#' + divName).ready(
function () {
var line = canvas.path(pathString).attr({
stroke: colorNumber
});
var length = line.getTotalLength();
$('path[fill*="none"]').hide().delay(time).animate({
to: 1
}, {
duration: durzeit,
step: function (pos, fx) {
var offset = length * fx.pos;
var subpath = line.getSubpath(0, offset);
canvas.clear();
canvas.path(subpath).attr({
'stroke-width': 1,
stroke: colorNumber
});
},
});
}, function () {
$('path[fill*="none"]').glow();
});
};
var canvas = Raphael('canvas', 400, 400);
animateLine(canvas, "canvas", "1000", "2000", "#03ae8c", "m87.118,11.764c2.236,7.58,7.497,14.165,9.474,22.045c2.957,11.786,3.704,24.38,2.293,36.434c-1.808,15.449-6.275,29.477-10.602,44.306c-5.588,19.152-6.986,38.342-2.33,57.733c2.296,9.562,7.805,20.21,15.25,26.768c7.399,6.517,16.052,11.587,23.489,18.181c7.456,6.61,9.146,21.192,8.788,30.781c-0.196,5.247-2.378,8.792-4.234,13.449c-1.405,3.526-3.309,6.689-4.824,10.113c-0.353,0.797-0.681,1.17-0.725,2.137");
animateLine(canvas, "canvas", "1000", "4000", "#ff0072",
"m214.552,10.879c1.197,1.98-7.28,12.149-8.41,14.51c-5.543,11.586-6.496,22.61-5.73,35.377c1.028,17.148,12.397,31.641,21.652,45.415c13.984,20.811,26.343,43.782,27.046,69.358c0.339,12.338,0.575,25.059-0.037,37.387c-0.522,10.504-4.778,17.693-8.019,27.26c-1.225,3.618-1.75,7.167-4.138,9.959c-3.883,4.54-9.488,9.212-15.544,10.005c-3.437,0.45-9.848,1.725-13.016-0.599");
我不会清理画布,所有路径都会显示。我试图删除函数 canvas.clean()。但它显示了像素化的路径。那不是最好的解决方案...
第二个问题:我只想要发光效果,但它不起作用。
}, function () { $('path[fill*="none"]').glow(); });
我将“绘制”/动画 10 条或更多不同的路径,它们应该从不同的时间开始,并且发光效果很重要。但没有任何效果,我从 2 天开始就在处理这个代码。我应该以不同的方式处理这段代码吗?
编辑:其他问题....为什么他们绘制我的第一条路径一次,第二条路径两次......?T_T