疫情可视化part3

news2024/9/30 13:20:57

前言

  • 之前在part2中说的添加自定义主题配色已经开发完成了，除此之外我还添加了一些的3d特效。

前期文章

  • 这是part1的文章：https://blog.csdn.net/xi1213/article/details/126824752
  • 这是part2的文章：https://blog.csdn.net/xi1213/article/details/127719364

成果链接

  • 浏览链接：https://xi1213.gitee.io/covid19-visualization
  • 项目链接：https://gitee.com/xi1213/covid19-visualization

具体效果

最后出来的效果还是蛮炫的。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

添加与修改

  1. 设置中添加主题定制，预设3种主题。
  2. 主题定制支持取色器取色。
  3. 添加3d球体的环形动态特效。

主题预设

由于项目一开始就使用的dataV，并且有计划的提取出了颜色值，所以定制主题便不是很麻烦，直接提取改变dataV的color属性即可，其他部分直接使用vue的动态样式绑定。

设置配置

先在设置组件SetDrawer中预先设置好需要使用的配置信息，包括预设的主题，然后使用vue3的onBeforeMount在挂载组件之前将包含颜色的配置信息用sessionStorage.setItem(“config”, JSON.stringify(setData.value))先存储到浏览器本地，这样可以防止刷新页面时配置信息丢失重置。

//系统配置
function sysConfig() {
    setData.value.sysVer = PK.version//获取系统版本号
    process.env.NODE_ENV == "development" ?
        setData.value.dataType = dataTypeList[0] ://开发环境使用离线数据
        setData.value.dataType = dataTypeList[1];//生产环境使用在线数据
    let ss = sessionStorage.getItem("config");//获取缓存配置
    //缓存中有配置取出配置，无则使用初始配置
    if (ss) {
        let cuVer = setData.value.sysVer,//当前版本号
            ssVer = JSON.parse(ss).sysVer,//缓存版本号
            isUpDate = null;//是否更新缓存
        //当前版本号与缓存版本号若不等清除缓存使用当前配置，否则使用缓存配置
        (cuVer !== ssVer) ?
            (isUpDate = true) :
            isUpDate = false;
        isUpDate ?
            (
                (sessionStorage.removeItem("config")),//清除缓存
                (sessionStorage.setItem("config", JSON.stringify(setData.value)))//设置缓存配置
            ) :
            (setData.value = JSON.parse(ss));
    } else {
        sessionStorage.setItem("config", JSON.stringify(setData.value));//设置缓存配置
    }
};

值得注意的是，需要在存入配置信息前判断缓存中是否已经存在配置信息，若有，则直接使用缓存配置，若没有则存入预先在代码中写好配置。

加载配置

在页面加载瞬间就需要获取颜色值的组件中使用onMounted与JSON.parse(sessionStorage.getItem(“config”) )获取到上一步在缓存中存下的配置信息，从配置信息中获取到颜色值，最后在利用该值将dom渲染出来，dataV的部分支持使用:color="[‘#fff’, ‘#aaa’]"来动态改变颜色，其中数组中第一个值为主色，第二个为副色； 非dataV的部分直接使用vue动态绑定样式的语法:style=“{color:#fff}”来修改配色。
在这里插入图片描述

切换配置

切换主题时直接在设置组件中改变当前使用的配色值然后刷新页面即可，因为我在切换3d球体颜色时偷了一个懒，正常流程是获取球体mesh，改变材质的color值，然后更新的。我直接刷新了浏览器(又不是不能用(* ￣︿￣))，重建了场景、相机、球体等。

预设主题

我预设了三对主色、副色的颜色值。为了看起来更和谐，建议使用同一颜色的深色与浅色来搭配。
在这里插入图片描述
v-for即可渲染出切换按钮。
在这里插入图片描述

取色器

原生input实现

我也是在无意中发现input的type居然是支持color的。可以直接原生实现取色器，这样就可以用颜色吸管获取屏幕中的任何颜色了：

 <input id="colorInp" style="height: 0px;opacity: 0;width: 0px;margin: 0px;padding: 0px;" type="color" />

绑定事件

要使用自己的按钮点击打开取色器，可以直接将input的高宽赋为0，不透明度赋为0，将其隐藏后，再使用按钮绑定事件打开取色器即可：

<el-button class="main-color" :color="setData.sysColor[0]" @click="changeColor(0)">主色</el-button>
function changeColor(type: Number) {
    (document.getElementById("colorInp") as any).click();//手动点击取色器
    colorType = type;//改变颜色类型
};

在这里插入图片描述

环形特效

在这里插入图片描述
项目中一共有七种环形效果：

//创建环
function createRings() {
  createEquatorSolidRing(earthSize + 20);//创建赤道实线环
  createEquatorFlyline(earthSize + 30);//创建赤道飞线环
  createEquatorDottedLineRing(earthSize + 35);//创建赤道虚线环
  createSpikes(earthSize + 40);//创建赤道尖刺
  createUpDownRing(earthSize - 50, earthSize - 40);//创建南北极环
  createExpandRing();//创建爆炸环
  createSphereGlow();//创建球体光晕
};

接下来我们详细分析一下。

赤道实线环

在这里插入图片描述
即为赤道上最靠近球体内层的一层环。

  1. 该环使用RingGeometry几何体实现，参数分别为：内半径、外半径、分段数。
  2. 刚创建出来的环形是平行于屏幕的，需要改变环mesh的rotation属性，绕x轴旋转90度即可。
//创建赤道实线环
function createEquatorSolidRing(r: any) {
  //创建里层的环
  let ringGeometry = new THREE.RingGeometry(r - 2, r + 2, 100);
  let ringMaterial = new THREE.MeshBasicMaterial({
    color: dvColor.value[0],
    opacity: .3,
    side: THREE.DoubleSide,
    fog: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending,
  });
  let ringMesh = new THREE.Mesh(ringGeometry, ringMaterial);
  ringMesh.rotation.x = 90 * Math.PI / 180;
  earthGroup.add(ringMesh);
};

赤道飞线环

在这里插入图片描述
即为赤道第二靠近球体的环。

  1. 仔细观察会发现，它其实并不是一个环，而是一条弧线再在环绕球体运动。
  2. 实现该弧线的时候发现，webGL的线条由于渲染器的限制，并不能设置宽度，但可以通过three.meshline(这是一个three插件，three不自带，需要npm i three.meshline安装)中的MeshLineMaterial来实现宽度的设置，修改MeshLineMaterial中的lineWidth属性值即可。
  3. dashArray为弧线段数量的倒数(0.5即为2条，0.3即为3条)，dashRatio为线段的不可见部分与可见部分的比例。
  4. 几何体使用了BufferGeometry，设置setFromPoint，提取THREE.Path绘制出的arc的数据，改变几何体顶点属性即可。
  5. arc参数依次为：弧线中心x与y值、弧线半径、起始角、终止角、是否顺时针方向创建弧线(默认false)。
  6. 最后创建完成后同样需要rotation.x改变角度。
//创建赤道飞线
function createEquatorFlyline(r: any) {
  const geometry = new THREE.BufferGeometry();
  const path = new THREE.Path();
  path.arc(0, 0, r, 0, Math.PI * 2);
  const points = path.getPoints(100);//切割段数
  geometry.setFromPoints(points);
  const line = new MeshLine();
  // 设置几何体
  line.setGeometry(geometry)
  const material = new MeshLineMaterial({
    color: dvColor.value[0],
    lineWidth: 1, // 线条的宽度
    dashArray: .5, // 该数值倒数为线段数量
    dashRatio: .5, // 不可见与可见比例
    transparent: true, // 设置透明度
  })
  flylineMesh = new THREE.Mesh(line.geometry, material);
  flylineMesh.rotation.x = 90 * Math.PI / 180;
  earthGroup.add(flylineMesh);
};

赤道虚线环

在这里插入图片描述
即为赤道第三靠近球体的白色虚线环。

  1. 该环是由50个小白点组成，几何体使用了BufferGeometry，材质使用了PointsMaterial，组使用了Points。
  2. 几何体中需要使用Math.cos与sin改变点单位向量的xyz值，然后将位置列表positions使用Float32BufferAttribute(值得注意的是Float32Attribute已被删除弃用)设置position属性至ringPointGeometry中。
  3. 材质中记得设置transparent: false,与size尺寸。
  4. 最后将几何体与材质添加到点的组中，将点组添加到球体组中即可。
//创建赤道虚线环
function createEquatorDottedLineRing(r: any) {
  const positions = [];
  let ringPointGeometry = new THREE.BufferGeometry(); //环形点几何体
  let pointNum = 50;//点的数量
  let ringPointAngle = (2 * Math.PI) / pointNum; //环形点角度
  for (let o = 0; o < 500; o++) {
    let n = new THREE.Vector3(); //点的向量
    n.x = r * Math.cos(ringPointAngle * o); //计算点的角度
    n.y = 0;
    n.z = r * Math.sin(ringPointAngle * o);
    positions.push(n.x, n.y, n.z);
  }
  ringPointGeometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(positions, 3)
  );//设置位置属性
  let ringPointMaterial = new THREE.PointsMaterial({
    //环形点材质
    size: 3,
    // color: dvColor.value[0],
    transparent: false,
    blending: THREE.AdditiveBlending,
    side: THREE.DoubleSide,
    depthWrite: false,
  });
  dotLineRingMesh = new THREE.Points(
    ringPointGeometry,
    ringPointMaterial
  );
  dotLineRingMesh.name = "赤道虚线";
  earthGroup.add(dotLineRingMesh);
};

赤道尖刺环

在这里插入图片描述
即为赤道环中类似钟表刻度的环形。

  1. 该环使用LineBasicMaterial材质、BufferGeometry几何体、LineSegments组。
  2. 材质中由于webGL限制不能使用linewidth，始终宽度为1。
  3. 几何体顶点的处理类似创建虚线环，循环改变每个尖刺的xyz向量即可。
  4. 若要改变指定尖刺的长度只需使用multiplyScalar向量与标量相乘。
  5. 最后将材质与几何体添加到组中即可。
//创建赤道尖刺
function createSpikes(spikeRadius: any) {
  let spikesVerticesArray = [];
  let spikesObject = new THREE.Group(); //创建尖刺的组
  spikesObject.name = "赤道尖刺";
  earthGroup.add(spikesObject); //将尖刺组添加到旋转组中
  //创建尖刺
  let spikeNum = 400;//尖刺数量
  let o = (2 * Math.PI) / spikeNum;
  for (let s = 0; s < spikeNum; s++) {
    let r = new THREE.Vector3();
    r.x = spikeRadius * Math.cos(o * s);
    r.y = 0;
    r.z = spikeRadius * Math.sin(o * s);
    r.normalize();//归一化，将该向量转化为向量单位
    r.multiplyScalar(spikeRadius);
    let i = r.clone(); //克隆r至i
    (s % 10 == 1) ? i.multiplyScalar(1.1) : i.multiplyScalar(1.05);//每10个计算一次向量与标量相乘
    spikesVerticesArray.push(r); //将向量存入尖刺顶点列表
    spikesVerticesArray.push(i);
  }
  let n = new Float32Array(3 * spikesVerticesArray.length); //创建顶点数组
  for (let s = 0; s < spikesVerticesArray.length; s++) {
    n[3 * s] = spikesVerticesArray[s].x;//给顶点数组设置坐标
    n[3 * s + 1] = spikesVerticesArray[s].y;
    n[3 * s + 2] = spikesVerticesArray[s].z;
  }
  //尖刺材质
  let spikesMaterial = new THREE.LineBasicMaterial({
    // linewidth: 1,//webgl渲染器限制,不能设置宽度，始终为1(three.meshline插件可解决)
    // color: "#fff",
    color: dvColor.value[0],
    transparent: true,
    opacity: .5
  });
  let spikesBufferGeometry = new THREE.BufferGeometry(); //创建尖刺几何体
  spikesBufferGeometry.setAttribute(
    "position",
    new THREE.BufferAttribute(n, 3)
  ); //添加位置属性
  let spikesMesh = new THREE.LineSegments(
    spikesBufferGeometry,
    spikesMaterial
  );
  spikesObject.add(spikesMesh); //将网格放进组
};

爆炸环

在这里插入图片描述
即为赤道最外面一层环，它会不断的放大渐变，形成类似爆炸冲击波一样的效果。具体原理是这样的。

  1. 先直接用MeshBasicMaterial材质中的map加载一张透明环形贴图，记得设置transparent、side、depthWrite、blending属性。
  2. 再使用PlaneGeometry几何体添加一个平面矩形，其具体参数为：矩形宽，矩形高、宽分段数、高分段数。
  3. 然后将几何体与材质添加到组中，完成后的平面也是平行于屏幕的，记得设置rotation.x的值，使之垂直于屏幕。
  4. 最后要让环产生动画需要结合gsap(这是最健全的web动画库之一，生成动画十分方便)的fromTo方法。fromTo中第一个参数为产生动画的对象，第二个参数为动画开始状态，第三个参数为动画结束状态(其中包含动画时长duration)。
  5. 这时你会发现自己的动画只会动一次，其实只需将createExpandRingAnimation添加到requestAnimationFrame动画请求帧使用的方法中使其一直render渲染即可。
//创建渐变环
function createExpandRing() {
  let ringMaterial = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load(ringImg),
    color: new THREE.Color(dvColor.value[0]),//颜色
    transparent: true,
    opacity: 1,
    side: THREE.DoubleSide,
    fog: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending,
  });
  let ringGeometry = new THREE.PlaneGeometry(earthSize * 2, earthSize * 2, 10, 10);
  expandRingMesh = new THREE.Mesh(ringGeometry, ringMaterial);
  expandRingMesh.name = "放大环";
  expandRingMesh.rotation.x = 90 * Math.PI / 180;
  earthGroup.add(expandRingMesh);
};

//创建渐变环动画
function createExpandRingAnimation() {
  gsap.isTweening(expandRingMesh.scale) ||//环动画
    (gsap.fromTo(
      expandRingMesh.scale,//缩放渐变
      { x: 1, y: 1, },
      { x: 2.7, y: 2.7, duration: 1.5 }
    ),
      gsap.fromTo(
        expandRingMesh.material,//材质的透明度渐变
        { opacity: 1, },
        { opacity: 0, duration: 1.5 }
      ))
};

南北极环

在这里插入图片描述
在这里插入图片描述
如图，即为球体上下的双层环形。其生成方法与赤道实线环一样，不同之处是需要改变position.y值，使之移动到球体南北极。

//创建上下环
function createUpDownRing(r1: any, r2: any) {
  let ringsObject = new THREE.Group(); //创建环的组
  ringsObject.name = "南北极环";
  earthGroup.add(ringsObject); //将环添加到场景中
  //创建内环
  let a = new THREE.RingGeometry(r1, r1 - 2, 100); //圆环几何体(内半径,外半径,分段数)
  let ringsOuterMaterial = new THREE.MeshBasicMaterial({
    color: dvColor.value[0],
    transparent: true,
    opacity: .3,
    side: THREE.DoubleSide,
    fog: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending,
  });
  let o = new THREE.Mesh(a, ringsOuterMaterial);
  o.rotation.x = 90 * Math.PI / 180; //设置旋转
  let r = o.clone(); //克隆外环网格o至r
  o.position.y = 95; //设置位置
  r.position.y = -95;
  ringsObject.add(o);
  ringsObject.add(r);
  //创建外环
  let t = new THREE.RingGeometry(r2, r2 - 2, 100);
  let ringsInnerMaterial = new THREE.MeshBasicMaterial({
    color: dvColor.value[0],
    transparent: true,
    opacity: .3,
    side: THREE.DoubleSide,
    fog: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending,
  });
  let i = new THREE.Mesh(t, ringsInnerMaterial);
  i.rotation.x = 90 * Math.PI / 180;
  let n = i.clone();
  i.position.y = 100;
  n.position.y = -100;
  ringsObject.add(i);
  ringsObject.add(n);
};

球体光晕

在这里插入图片描述
即为球体外部的一层光晕。

  1. 因为光晕是需要一直平行于屏幕的，所以我们这里直接采用SpriteMaterial材质，将其添加到Sprite中，Sprite精灵的特性就是可以一直正对相机。
  2. 生成材质时需要添加光晕的透明贴图，同时设置属性：blending、depthWrite、transparent、side。
//创建球体发光环
function createSphereGlow() {
  //SpriteMaterial材质始终朝向平面
  let glowMaterial = new THREE.SpriteMaterial({
    map: new THREE.TextureLoader().load(earthGlowImg),
    color: new THREE.Color(dvColor.value[0]),//颜色
    transparent: true,
    opacity: 1,
    side: THREE.DoubleSide,
    fog: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending,
  })
  let glowSprite = new THREE.Sprite(glowMaterial);
  glowSprite.scale.set(earthSize * 3.2, earthSize * 3.2, 1); //点大小
  earthGroup.add(glowSprite);
};

结语

成都的12月份好冷啊ヽ（≧□≦）ノ，手指头开始造反不听使唤了，项目到这里差不多该是告一段落了，本项目仅作为我学习webgl与可视化结合使用的一个demo，项目是完全开源了的，有想使用的可以直接在我的gitee上clone，链接在本文开头(不要忘记star啊大哥们！)。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/55076.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[附源码]Python计算机毕业设计Django基于VUE的网上订餐系统

[附源码]Python计算机毕业设计Django基于VUE的网上订餐系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
【Linux】进程

【Linux】进程

1.linux操作系统要不要管理进程呢&#xff1f;必须要&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 2.linux是如何管理大量进程的呢&#xff1f;先组织&#xff0c;再描述。 1.什么是进程 进程就是系统运行中…
阅读更多...
WordPress批量修改数据库内文章内容文字关键字标题

WordPress批量修改数据库内文章内容文字关键字标题

WordPress网站内容标题文字一键修改&#xff0c;注意到了网站上很多要一个个的修改&#xff0c;那工作了巨大&#xff0c;怎么快速在数据库中用SQL命令批量替换呢&#xff1f; 通过数据库替换方法 1.进入宝塔面板-数据库-选择对应的数据库-管理数据库-登录进来。就可以直接对数…
阅读更多...
2022年小美赛“认证杯”数学建模ABCD题初步分析选题建议

2022年小美赛“认证杯”数学建模ABCD题初步分析选题建议

​ 2022年小美赛数学建模赛题已经发布&#xff1a; A题 翼龙是如何飞行的 B题 序列的遗传过程 C题 对人类活动进行分类 D题 是否应长期禁止野生动物贸易 总体来说&#xff0c;从赛题难度来看B>A>C>D&#xff0c;其中CD属于ICM交叉学科类赛题&#xff0c;难度系数相对…
阅读更多...
腾讯云原生安全“3+1”一体化方案发布，重构云上安全防御体系

腾讯云原生安全“3+1”一体化方案发布，重构云上安全防御体系

12月1日&#xff0c;2022腾讯全球数字生态大会上&#xff0c;以“安全守护&#xff0c;行稳致远”为主题的「云原生安全专场」顺利召开&#xff0c;论坛深入讨论了云原生安全的行业发展趋势、技术探索、产品创新和落地实践。 会上&#xff0c;腾讯安全发布了云原生安全“31”一…
阅读更多...
java面向对象-----再谈方法

java面向对象-----再谈方法

目录 方法的重载(overload) 可变个数的形参 方法参数的值传递机制 基本数据类型的参数传递 引用数据类型的参数传递 递归(recursion)方法 总结 方法的重载(overload) 重载的概念 &#xff1a;在同一个类中&#xff0c;允许存在一个以上的同名方法&#xff0c;只要它们的参…
阅读更多...
基于粒子群优化的神经网络PID控制(Matlab)代码实现

基于粒子群优化的神经网络PID控制(Matlab)代码实现

&#x1f352;&#x1f352;&#x1f352;欢迎关注&#x1f308;&#x1f308;&#x1f308; &#x1f4dd;个人主页&#xff1a;我爱Matlab &#x1f44d;点赞➕评论➕收藏 养成习惯&#xff08;一键三连&#xff09;&#x1f33b;&#x1f33b;&#x1f33b; &#x1f34c;希…
阅读更多...
“空间代谢组学“用于食管鳞状细胞癌早期筛查的研究

“空间代谢组学“用于食管鳞状细胞癌早期筛查的研究

​ 代谢组学文献分享—研究背景 近几年代谢组学的研究如火如荼的开展&#xff0c;极大地促进了各学科的发展&#xff0c;如疾病诊断与治疗、营养学、环境毒理学、进化和发育及药物等&#xff1b;与此同时&#xff0c;质谱成像技术&#xff08;mass spectrometry imaging, MSI…
阅读更多...
动态规划思想

动态规划思想

1.动态规划思想&#xff1a;因为计算量太大而提出的解放方式。将一件大的事情分成若干个小的事情。2.找一个最优的隐藏序列&#xff0c;结合动态规划思想&#xff0c;可以把这个隐藏序列分成多个时间步&#xff0c;如果每个时间步都是最优的&#xff0c;那么最终的这个序列就是…
阅读更多...
软件测试流程分享

软件测试流程分享

工作以来&#xff0c;大大小小参与的项目也有十几个了&#xff0c;涵盖财务类、保险类、OA办公类软件&#xff0c;从测试流程上看&#xff0c;基本也都大同小异&#xff0c;这里将常见的测试流程做一些梳理&#xff0c;供刚入行的朋友学习参考&#xff0c;也欢迎大家完善补充。…
阅读更多...
GD32F30x系列ADC源码，对初学者参考价值巨大，（非常详细篇）万字源码

GD32F30x系列ADC源码，对初学者参考价值巨大，（非常详细篇）万字源码

GD32F30x系列ADC源码【1】adc_reg.h [参考]【2】ctrl_adc.h [重点]【3】gd32f30x_dma_reg.h [参考]【4】mon_adc.h [参考 1]【5】rcu.h [参考]【6】ctrl_adc.c [重要]【7】mon_adc.c [参考1]【8】main.c [参考2]这篇文章必须配合这个连接文件一起看&#xff0c;即ADC手册 嵌入式…
阅读更多...
我的学校网页期末作业（纯html+css实现）

我的学校网页期末作业（纯html+css实现）

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…
阅读更多...
在js中使用grpc(包括代理）后端使用Go

在js中使用grpc(包括代理）后端使用Go

叙述 最近在研究web端的聊天系统&#xff0c;准备使用grpc作为通讯协议&#xff0c;因为客户端要主动的接受到消息&#xff0c;所以想要使用双向流的grpc。 但是经过几天的研究发现&#xff0c;grpc在浏览器上是不支持的&#xff0c;因为浏览器使用的协议是http1.1&#xff0c…
阅读更多...
Apipost自动化测试功能详解

Apipost自动化测试功能详解

如何快速掌握接口自动化测试&#xff1f;首先我们看看&#xff1a; 1、什么是接口自动化测试&#xff1f; 通常&#xff0c;在设计了测试用例并通过评审之后&#xff0c;由测试人员根据测试用例中描述的规程一步步执行测试&#xff0c;得到实际结果与期望结果的比较。自动化测…
阅读更多...
新浪股票行情数据接口有什么作用？

新浪股票行情数据接口有什么作用？

通过新浪股票行情数据接口可以让投资者在实际交易当中能够更加精准的洞悉盘口变化。该接口可以说是目前最好用的免费股票行情数据接口了&#xff0c;虽然一直并未公开&#xff0c;但暂时使用良好。大家用浏览器访问新浪的股票行情数据接口就能查看最新行情数据了。那么今天小编…
阅读更多...
New Features Of JDK - JDK9 Modular System

New Features Of JDK - JDK9 Modular System

Modular System 是 JAVA9 中提供的新特性&#xff0c;它从一个独立的开源项目而来&#xff0c;名为 Jigsaw Project。在此之前&#xff0c;我们对于 Java 技术栈中模块化的认知是基于 OSGI 的&#xff0c;实际上 OSGI 也确实形成了它自己独有的体系&#xff0c;并且是一定程度上…
阅读更多...
TFT espi相关

TFT espi相关

文章目录1 .库文件设置1-1&#xff1a;这是库文件 tft _espi1-2&#xff1a;如何确定像素排列方式1-3&#xff1a;颜色显示异常处理方法2 .显示图片3.显示图片方法1 .库文件设置 1-1&#xff1a;这是库文件 tft _espi 链接&#xff1a;https://pan.baidu.com/s/1sT6s6VtpuwNV…
阅读更多...
Spring【五大类注解的存储和读取Bean方法注解】

Spring【五大类注解的存储和读取Bean方法注解】

Spring【5大类注解的存储和读取Bean对象】&#x1f34e;一. 五大类存储 Bean 对象&#x1f352;1.1 配置spring-config.xml扫描路径&#x1f352;1.2 添加五大类注解存储 Bean 对象&#x1f349;1.2.1 Controller&#xff08;控制器存储&#xff09;&#x1f349;1.2.2 Service…
阅读更多...
ADAU1860调试心得（14）单片机启动与控制ADAU1860详解

ADAU1860调试心得（14）单片机启动与控制ADAU1860详解

ADAU1860实现脱机运行&#xff0c;是开发这个DSP的最后一步。这颗芯片有一颗HIFI 3Z的蓝牙MCU内嵌&#xff0c;用户可以用这颗MCU来进行脱机&#xff0c;甚至直接用C来开发1860&#xff08;有专门的SDK&#xff0c;不在此做更多阐述&#xff09;&#xff0c;但是这个HIFI 3Z的软…
阅读更多...
零代码使用air32做USB转串口

零代码使用air32做USB转串口

零代码实现USB转串口 环境搭建参考Air32F103使用手册 创建工程 新建工程 选择设备为AIR32F103CB 在弹出的RTE窗口勾选如下组件 配置工程 修改编译器为AC5&#xff0c;并启用MicroLIB 启用C99标准支持 添加代码 添加功能代码&#xff0c;在Source Group文件夹右键&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023