如何利用js画出极坐标渲染图?D3js能不能做到?

Yxiaoyu 发布于 11/07 17:29
阅读 208
收藏 2

希望能够通过js画出这样的一个图。不知道各路大神是否有做过这样的图没有。d3js感觉可以实现,奈何实力不够。请大家多多指教!

加载中
0
火眼金睛容嬷嬷
火眼金睛容嬷嬷

试试echarts呗,虽然没有现成的例子,但两种图单独出现是有的。

火眼金睛容嬷嬷
火眼金睛容嬷嬷
回复 @Yxiaoyu : 大概得用web assembly了吧,如果计算量大的话,直接用js也跑worker
Yxiaoyu
Yxiaoyu
echarts是有热力图等,但是要结合组成这种需要利用高斯等插值渲染的,貌似做不到。有人用C做过,我想,js应该可以实现
0
梅开源
梅开源

右边线性渐变,背景圆弧,刻度什么的canvas容易搞定。

参考https://www.cnblogs.com/zhiyishou/p/4430017.html

那个三角形网格,要用到Delaunay算法,那个js好用。

最难的是三角形内部着色,js canvas没这个功能。如果逐点着色涉及到根据权值插值。目前用2d的圆形着色顶着用先。。

 

 

Yxiaoyu
Yxiaoyu
回复 @梅开源 : 我用Delaunay,kringjs,canvas实现了一下,但是也是不太理想的感觉。。后续看看直接调用origin这个软件成图怎么样
梅开源
梅开源
回复 @Yxiaoyu : 这几天断断续续研究了下。想对任意三角形,求出延长到权值为0的两条边,最高权值的角,然后向对面边0权值径向渐变。 不知道为什么还是有些bug画出来不好看。
梅开源
梅开源
回复 @Yxiaoyu : 抽空研究中。好像webgl着色器可以根据三个点直接上色。canvas没有直接的根据三个点渲染。看你的图是径向渲染。目前可以获取三个角位置和C值,或许可以其中任意一点根据位置计算出其V值再根据对应颜色逐像素修改imgdata,或许可以直接三个角算出一个方向的径向渲染fill之。
阿鸿哥啊
阿鸿哥啊
同求,找了好久了
Yxiaoyu
Yxiaoyu
差不多就是这个了,:kissing_heart:就是内部怎么渲染
返回顶部
顶部