是音频波形可视化图,大概想法是这个样子,通过offlineAudioContext
获取buffer
,动态生成wave
,resize
时根据宽度重新渲染,整个过程都需要有动画,
现在用的是多个div
+flex
布局实现的,是否性能不如svg
/canvas
?
最开始用的是wavesurfer.js
,用的是canvas
,但是没有动画
尝试自行写canvas
/svg
之后发现
canvas
在我的浏览器上很糊,ctx.scale(dpr,dpr)
也不好使konva.js
的动画会导致圆角形变svg
没找到合适的库(gsap
里没找到),手写path
比较麻烦请问各位大佬有没有什么好的解决方法?
1
rannnn 2022-09-08 23:30:39 +08:00 1
|
2
subframe75361 OP @rannnn 感谢,好像有些效果了,但是放大到一定程度之后还是会糊掉...
|
3
bojue 2022-09-08 23:46:52 +08:00
|
4
subframe75361 OP |
5
renmu 2022-09-08 23:48:07 +08:00 via Android
就这么几个元素,感觉性能大差不差。
|
6
subframe75361 OP @renmu 最高大概在 150 个节点,一次性缩减到 30 个节点的时候会卡一下...
|
7
xieren58 2022-09-09 00:58:15 +08:00 1
pixi.js
|
8
rekulas 2022-09-09 07:53:21 +08:00 1
pixi 配合相应的平滑迁移库可以试试,基于 webgl 渲染的
|
9
macy 2022-09-09 09:28:34 +08:00 1
wavesurfer.j 在前端处理波形图数据么?可能会很卡,建议放到后端去处理,直接生成 pcm 数据
|
10
yuuko 2022-09-09 09:41:12 +08:00 1
你的 canvas 要是显示宽度是 width , 那你要创建 width * window.devicePixelRatio 大小的 canvas
|
11
thinkershare 2022-09-09 10:26:59 +08:00 1
如果显示的不是非常复杂, 使用 SVG 足够了, 它底层会使用硬件加速, 如果绘制的非常复杂, 无法简单的使用 svg 完成矢量化, 使用 canvas,然后用 WebGL 搞, WebGL 的 JS 库非常多. 我们用了做三维建模和数字孪生, 模型特别复杂的时候如果没有独立显卡, 会卡, 目前没有解决办法, 你这个足够简单, 我估计 SVG/HTML(transform)/Canvas(2D/3D)实现都不会有啥问题.
|
12
alexsunxl 2022-09-09 10:59:22 +08:00
推荐用 webgl ,上手之后,调整效果很方便的。
库也多,性能也好,特效平滑 |
13
oldshensheep 2022-09-09 11:46:16 +08:00
糊的话加上这个 CSS 属性
image-rendering: pixelated; 并且设置 context ctx.imageSmoothingEnabled= false 完全不糊 https://codepen.io/oldshensheep/pen/WNJwvRm |
14
subframe75361 OP |
15
leonkfd 2022-09-09 17:53:13 +08:00 1
很久以前写过一个音乐可视化的,用的是阿里的 G 渲染库。现在更新很多了,底层可选 svg/canvas/webgl 都行
https://leon-kfd.github.io/g-music-visualizer/ |
16
jones2000 2022-09-10 17:26:18 +08:00
就这几根柱子,canvas 自己画下就够了。应该不需要用第 3 方库什么的。
|