百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

如何用Vue3和p5.js绘制交互式3D饼图

bigegpt 2024-08-29 11:26 4 浏览

本文由ScriptEcho平台提供技术支持

项目地址:传送门

基于p5.js实现色彩轮和饼状图的动态可视化

应用场景

本代码利用p5.js库,创建了一个交互式的色彩轮和饼状图可视化界面。它适用于需要展示颜色信息或数据分布情况的场景,如设计、数据分析和教育领域。

基本功能

该代码主要实现了以下功能:

  • **色彩轮:**动态生成一个圆形色彩轮,展示色相、饱和度和亮度变化。
  • **饼状图:**基于提供的数字数据,生成一个交互式的饼状图,展示数据比例分布。

功能实现步骤及关键代码分析

1. 加载p5.js库

首先,使用loadJavascript函数异步加载p5.js库,确保其在程序执行前已加载完成。

const loadJavascript = (jsUrl) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.onload = () => resolve('')
    script.onerror = (err) => reject(err)
    script.src = jsUrl
    document.body.appendChild(script)
  })
}

2. 定义p5.js草图

在onMounted钩子中,定义一个p5.js草图,该草图将渲染到#container元素中。

const sketch = (s) => {
  // ...
}

3. 设置画布和颜色模式

在setup函数中,设置画布大小、颜色模式和角度模式。

s.setup = () => {
  s.createCanvas(400, 400)
  s.colorMode(s.HSB)
  s.angleMode(s.DEGREES)
}

4. 绘制色彩轮

使用colorWheel函数,根据指定的半径和角度绘制一个色彩轮。

s.colorWheel = (x, y, rad) => {
  // ...
  for (let a = 0; a < 360; a += 10) {
    s.stroke(a, 150, 200) //hue based on a
    s.line(x, y, x + rad * s.cos(a), y + rad * s.sin(a))
  }
}

5. 绘制饼状图

使用pieChartPop函数,根据提供的数字数据绘制一个饼状图。

s.pieChartPop = (x, y) => {
  // ...
  let startValue = 0
  let range = 0

// ...
s.drawSlice(fColor, x, y, 200, startValue, startValue + range)
startValue += range
// ...
}

6. 绘制饼状图切片

使用drawSlice函数,根据指定的颜色、位置、直径和百分比范围绘制一个饼状图切片。

s.drawSlice = (fColor, x, y, d, percent1, percent2) => {
  s.fill(fColor)
  s.arc(x, y, d, d, -90 + percent1 * 360, -90 + percent2 * 360)
}

7. 初始化p5.js实例

使用new p5函数,初始化一个p5.js实例,并将草图附加到#container元素中。

new p5(sketch, 'container')

总结与展望

开发这段代码的过程中,我学习到了如何使用p5.js库创建交互式的可视化效果。该代码可以根据不同的数据和参数进行定制,以满足各种可视化需求。

未来,该卡片功能可以进一步拓展和优化,例如:

  • **数据绑定:**将饼状图的数据绑定到外部数据源,实现实时更新。
  • **交互性增强:**允许用户与饼状图交互,如选择切片或查看详细信息。
  • **移动设备优化:**优化代码以适应移动设备,实现跨平台兼容性。
  • 更多组件:

获取更多Echos

本文由ScriptEcho平台提供技术支持

项目地址:传送门

微信搜索ScriptEcho了解更多

相关推荐

恢复软件6款汇总推荐,帮你减轻数据恢复压力!

在当今数字化生活中,数据丢失的风险如影随形。无论是误删文件、硬盘故障,还是遭遇病毒攻击,丢失的数据都可能给我们带来不小的麻烦。此时,一款优秀的数据恢复软件就成为了挽救数据的关键。今天,为大家汇总推荐...

中兴星星一号刷回官方原版recovery的教程

【搞科技教程】中兴星星一号的官方recovery也来说一下了,因为之前给大家分享过了第三方的recovery了,之前给大家分享的第三方recovery也是采用一键刷入的方式,如果细心的朋友会发现,之前...

新玩机工具箱,Uotan柚坛工具箱软件体验

以前的手机系统功能比较单调,各厂商的重视程度不一样,所以喜欢玩机的朋友会解锁手机系统的读写权限,来进行刷机或者ROOT之类的操作,让使用体验更好。随着现在的手机系统越来越保守,以及自身功能的增强,...

三星g906k刷recovery教程_三星g906k中文recovery下载

【搞科技教程】看到有一些机友在找三星g906k的第三方recovery,下面就来说一下详细的recovery的刷入方法了,因为手机只有有了第三方的recovery之后才可以刷第三方的root包和系统包...

中兴星星2号刷recovery教程_星星二号中文recovery下载

【搞科技教程】咱们的中兴星星2手机也就是中兴星星二号手机的第三方recovery已经出来了,并且是中文版的,有了这个recovery之后,咱们的手机就可以轻松的刷第三方的系统包了,如果没有第三方的re...

数据恢复软件有哪些值得推荐?这 6 款亲测好用的工具汇总请收好!

在数字生活中,数据丢失的阴霾常常突如其来。无论是误删工作文档、格式化重要磁盘,还是遭遇系统崩溃,都可能让我们陷入焦虑。关键时刻,一款得力的数据恢复软件便是那根“救命稻草”。今天,为大家精心汇总6...

中兴u956刷入recovery的教程(中兴e5900刷机)

【搞科技教程】这次主要来给大家说说中兴u956手机如何刷入第三方的recovery,因为第三方的recovery工具是咱们刷第三方rom包的基础,可是很我欠却不会刷,所以太这里来给大家整理了一下详细的...

联想A850+刷recovery教程 联想A850+第三方recovery下载

【搞科技教程】联想A850+的第三方recovery出来了,这个第三方的recovery是非常的重要的,比如咱们的手机要刷第三方的系统包的时候,都是需要用到这个第三方的recovery的,在网上也是有...

工具侠重大更新 智能机上刷机一条龙完成

工具侠是针对玩机的机油开发的一款工具,不管是发烧级别的粉丝,还是普通小白用户,都可以在工具侠上找到你喜欢的工具应用。这不,最新的工具侠2.0.16版本,更新了专门为小白准备的刷机助手工具,以及MTK超...

shift+delete删除的文件找回6种硬盘数据恢复工具

硬盘作为电脑的重要存储设备,如同一个巨大的数字仓库,承载着我们日常工作、学习和生活中的各种文件,从珍贵的照片、重要的工作文档到喜爱的视频、音乐等,都依赖硬盘来安全存放。但有时,我们可能会不小心用sh...

使用vscode+Deepseek 实现AI编程 基于Cline和continue

尊敬的诸位!我是一名专注于嵌入式开发的物联网工程师。关注我,持续分享最新物联网与AI资讯和开发实战。期望与您携手探寻物联网与AI的无尽可能。这两天deepseek3.0上线,据说编程能力比肩Cl...

详解如何使用VSCode搭建TypeScript环境(适合小白)

搭建Javascript环境因为TypeScript不能直接在浏览器上运行。它需要编译器来编译并生成JavaScript文件。所以需要首先安装好javascript环境,可以参考文章:https://...

使用VSCode来书写你的Jupyter Notebooks

现在你可以在VScode里面来书写你的notebook了,使用起来十分的方便。下面来给大家演示一下环境的搭建。首先需要安装一个jupyter的包,使用下面的命令安装:pip3install-ih...

使用VSCode模板提高Vue开发效率(vscode开发vue插件)

安装VSCode安装Vetur和VueHelper插件,安装完成后需要重启VScode。在扩展插件搜索框中找到如下Vetur和VueHelper两个插件,注意看图标。添加Vue模板打...

干货!VsCode接入DeepSeek实现AI编程的5种主流插件详解

AI大模型对编程的影响非常之大,可以说首当其冲,Cursor等对话式编程工具渐渐渗透到开发者的工作中,作为AI编程的明星产品,Cursor虽然好用,但是贵啊,所以咱们得找平替,最好免费那种。俗话说,不...