自上次发帖以来,我在墙纸中取得了一些进展-修复了很多以前的问题
今天,如果有人愿意,我想提供一些指导:
我正在使用的最后一个小部件是Audio Visualizer。我对唯一性的追求并非没有问题(...您真的可以成为没有此属性的程序员吗?)。这是我正在建模的参考,这是我几周前在After Effects中制作的可视化工具。 https://youtu.be/cHweVjmBmP4
在Javascript和Wallpaper Engine的“局限性”中,无论如何,我可以在输出中复制这些尖锐的弯曲和曲线吗?我最初认为使用arcTo()方法的变量在这里会有所帮助。.但是我不清楚切线将使用什么坐标。什么公式可以帮助解释受影响的数据。
这是目前的代码。感谢Michael Fedora编写了此类可访问的代码。通过阅读,我已经学到了很多关于算法的知识,甚至通过我自己进行测试也学到了很多。我将继续设法解决这个问题,但是我们将不胜感激任何帮助!
let i, x = 0, y = center + scale*data[0]*0.33;
ctx.beginPath();
ctx.moveTo(x, y);
for(i = 0; i < 63; i++) {
x += width;
y = center + scale * data[i];
ctx.lineTo(x, y);
}
x += width;
y = center + scale * (data[63] + data[127]) * 0.5;
ctx.lineTo(x, y);
x += width;
y = center + scale * data[126];
ctx.lineTo(x, y);
x = 128*width, y = center + scale*data[64]*0.33;
ctx.moveTo(x, y);
for(i = 64;i < 127; i++) {
x -= width;
y = center + scale * data[i];
ctx.lineTo(x, y);
}
}
function renderLine(ctx, color) {
ctx.lineWidth = 1;
ctx.strokeStyle = color;
if(glob.bloom) {
ctx.shadowBlur = glob.bloomRadius;
ctx.shadowColor = color;
}
ctx.stroke();
}
我在您的AE示例中看不到曲线,但是一条长长的折线的连接样式设置为圆角(因此,角度变为圆角)。
我不特别知道Wallpaper Engine,但是看起来像regular Canvas stuff, in which you can do
ctx.lineJoin = "round";
链接的MDN页面中的示例比我以往所能更好地解释联接样式。