游客izoamw2f43amu_社区达人页

2022年06月

• 06.08 15:58:36
  发表了文章 2022-06-08 15:58:36

  一份小白前端可视化学习指南——附思维导图

  一份小白前端可视化学习指南——附思维导图 前言 因为群里粉丝一直要求我写一篇「可视化入门指南」，今天他来了。其实说起前端可视化，大家所能想到的就是各种图表，大屏。这种看着贼炫酷，而笔者呢工作也一直从事3D前端开发工作，慢慢对图形产生了兴趣。但是呢一直做的是三维的东西，没搞过二维的。大概是2月前开始学习2D的一些东西，然后并写了一些文章，效果还不错。所以我就写一些经验之谈，大佬勿喷。我大概从4个方面去讲我是怎么学习的 「可视化不得不掌握的数学基础」 「svg」方面的学习 「canvas」方面的学习 「可视化中」不得不掌握的「图形算法」 读完本篇文章，你可以大概知道我该怎么去学，需要学什

  
• 06.08 15:45:09
  发表了文章 2022-06-08 15:45:09

  我给中国奥运金牌数做了可视化（二）

  彩蛋——canvas如何画出1PX的直线 在这里我举一个例子， 你就明白了， 假设我要画从（50，10） 到 （200，10）这样的一条直线。为了画这条线，浏览器首先到达初始起点(50，10)。这条线宽1px，所以两边各留0.5px。所以基本上初始起点是从(50，9.5)延伸到(50，10.5)。现在浏览器不能在屏幕上显示0.5像素——最小阈值是1像素。浏览器别无选择，只能将起点的边界延伸到屏幕上的实际像素边界。它会在两边再加0.5倍的“垃圾”。所以现在，最初的起点是从(50，9)扩展到(50，11)，所以看起来有2px宽。情况如下:

  
• 06.08 15:31:17
  发表了文章 2022-06-08 15:31:17

  我给中国奥运金牌数做了可视化（一）

  前言 2020东京奥运会已经开幕很多天了，还记得小时候看奥运会的是在2008年的北京奥运会，主题曲是「北京欢迎你」， 那个时候才上小学吧，几乎有中国队的每场必看，当时也是热血沸腾了， 时间转眼已经到了2021年而我也从小学生变成了一个每天不断敲代码的程序员👩‍💻，看奥运的时间又少，但是又想出分力，既然是程序员，想着能为奥运会搞点什么？第一时间想到了就是给奥运奖牌数🏅做可视化，因为单看表格数据，不能体现出我们中国的牛逼🐂， 废话不多说，直接开写。 数据获得 我们先看下奥运奖牌数的表格，这东西肯定是接口获得的吧，我不可能手写吧，而且每天都是更新的，难道我要每天去改，肯定不是这样的，我当时

  
• 06.08 15:25:43
  发表了文章 2022-06-08 15:25:43

  canvas进阶——实现连续平滑的曲线

  前言 大家好，我是Fly, canvas真是个强大的东西，每天沉迷这个无法自拔， 可以做游戏，可以对图片处理，后面会给大家分享一篇，canvas实现两张图片找不同的功能， 听着是不是挺有意思的， 有点像游戏 「找你妹」，但是这都不是本篇文章想要表达的重点，读完今天这篇文章，你可以学到什么呢 「Canvas」 实现一个简单的画版小工具 「Canvas」 画出平滑的曲线， 这是本篇文章的重点 这时候有人问我她？？， 我的心里没有她的，只有你们「coder」， 下面一起学习吧，预计阅读5分钟。 canvas实现一个画版小工具 因为也比较简单，我大概说下思路： 首先我对canvas 画布坚监听3

  
• 06.08 14:29:52
  发表了文章 2022-06-08 14:29:52

  「干货」面试官问我如何快速搜索10万个矩形？——我说RBush

  前言 亲爱的coder们，我又来了，一个喜欢图形的程序员👩‍💻，前几篇文章一直都在教大家怎么画地图、画折线图、画烟花🎆，难道图形就是这样嘛，当然不是，一个很简单的问题， 如果我在canvas中画了10万个点，鼠标在画布上移动，靠近哪一个点，哪一个点高亮。有同学就说遇事不决 用for循环遍历哇，我也知道可以用循环解决哇，循环解决几百个点可以，如果是几万甚至几百万个点你还循环，你想让用户等死？这时就引入今天的主角他来了就是「Rbush」 rbush 我们先看下定义，这个rbush到底能帮我们解决了什么问题？ RBush是一个high-performanceJavaScript库，用于点和

  
• 06.08 14:20:20
  发表了文章 2022-06-08 14:20:20

  Canvas——坐标系和矩阵的理解

  前言 最近一直在寻找可视化文章发现没有合适的，恰好有个粉丝问了坐标系就和大家讲一下， 文字不多，内容比较简单，看完应该就能理解canvas的坐标系和getTransform 的 6 个参数什么意思哈， 后面还有一篇「Rbush」正在奋笔疾书✍️中，关于空间中如何快速搜索🔍百万或者是数十万个点的，敬请期待哈！ 坐标系 canvas中的坐标是从左上角开始的，x轴沿着水平方向（按像素）向右延伸，y轴沿垂直方向向下延伸。左上角坐标为x=0，y=0的点称作原点。在默认坐标系中，每一个点的坐标都是直接映射到一个CSS像素上。 但是如果图像的每次绘制都参考一个固定点将缺少灵活性，于是在canvas中引

  
• 06.08 14:05:56
  发表了文章 2022-06-08 14:05:56

  数据可视化——从0-1实现折线图（二）

  画XY坐标轴 坐标轴本质上就是两条直线，所以第一步确定坐标原点，然后以坐标原点画出垂直和水平的两条直线。我们设置坐标原点离画布的左内边距和底部内边距，这样我们可以通过画布的高度减去底部内边距得到 原点的y, 然后通过画布的宽度减去左内边距得到x, 有了坐标原点画坐标轴就没什么大问题了。代码如下： //定义坐标轴相对于画布的内边距 this.paddingLeft = 30 // 至少大于绘制文字的宽度 this.paddingBottom = 30 // 至少大于绘制文字的高度 this.origin = new Point2d( this.paddingLeft,

  
• 06.08 13:58:21
  发表了文章 2022-06-08 13:58:21

  数据可视化——从0-1实现折线图（一）

  前言 终于又到周末了，上一周的一篇3d文章 带你入门three.js——从0到1实现一个3d可视化地图很开心😺收到了这么多小伙伴的喜欢，这是对我知识输出的肯定。再次感谢大家！这周我又来了，这次给大家分享一下可视化图表比较简单的图表📈但同时我们又不得不学会的 那就是————「折线图」。读完本篇文章你可以学到什么 js实现直线方程 折线图的表达 canvas的一些api灵活的运用 直线折线图 我们先去非常有名的Echarts 官网看一看，他的折线图是什么样子的？如图： 图片 echats折线图 从图中可以得到以下2d图形元素： 直线（两个端点是圆的） 直线（两个端点是直线的） 文字 好

  
• 06.08 13:45:15
  发表了文章 2022-06-08 13:45:15

  带你入门three.js——从0到1实现一个3d可视化地图(二)

  可视化地图——three.js实现 场景的搭建 我先不管地图不地图的，地图的这些形状肯定是放置到场景中的。跟着我的脚步一步一步去搭建一个场景。场景的搭建就照相机，渲染器。我用一个map类来表示代码如下： class chinaMap { constructor() { this.init() } init() { // 第一步新建一个场景 this.scene = new THREE.Scene() this.setCamera() this.setRenderer() } // 新建透视相机

  
• 06.08 13:39:08
  发表了文章 2022-06-08 13:39:08

  带你入门three.js——从0到1实现一个3d可视化地图(一)

  前言 终于到周末了，前几篇的文章一直给大家介绍2d，canvas 和svg的一些东西。7月份我打算输出3篇万字长文带大家系统地学习可视化表达的3种方式，svg、canvas、webgl。所以这是第一篇文章3d的。读完本篇文章，你可以学到什么 对于three.js 这个框架有一个简单的理解，可以入门下。 学习three中的Raycaster，主要是用鼠标来判断当前选择的是哪一个物体。 我用一个简单的实例 带大家用three实现简单的可视化地球案例 。 3d框架的选择——three.js 1.为什么选择three.js 官网对 「Threejs」 的介绍非常简单：“Javascript 3D l

  
• 06.08 13:31:43
  发表了文章 2022-06-08 13:31:43

  3千字长文canvas实现任意正多边形的移动（点、线、面）

  前言 我在上一篇文章简单实现了在canvas中移动矩形（点线面），不清楚的小伙伴请看我这篇文章：用canvas 实现矩形的移动（点、线、面）（1）。ok,废话不多说，直接进入文章主题， 上一篇文章我留了很多问题，就是我在画步中移动我怎么知道我移动的是哪一个类型，到底是点还是线还是面， 这就是本篇文章要解决的问题。读完本篇可以学到下面几点：

  
• 06.08 13:23:51
  发表了文章 2022-06-08 13:23:51

  用canvas绘制一个烟花动画

  前言 在我们日常开发中贝塞尔曲线无处不在： svg 中的曲线（支持 2阶、 3阶） canvas 中绘制贝塞尔曲线 几乎所有前端2D或3D图形图表库(echarts，d3，three.js)都会使用到贝塞尔曲线 所以掌握贝塞尔曲线势在必得。这篇文章主要是实战篇，不会介绍和贝塞尔相关的知识， 如果有同学对贝塞尔曲线不是很清楚的话：可以查看我这篇文章——深入理解SVG 绘制贝塞尔曲线 第一步我们先创建ctx, 用ctx 画一个二阶贝塞尔曲线看下。二阶贝塞尔曲线有1个控制点，一个起点，一个终点。 const canvas = document.getElementById( 'canvas'

  
• 06.08 13:11:37
  发表了文章 2022-06-08 13:11:37

  用canvas 实现矩形的移动（点、线、面）

  前言 在canvas中实现图片移动、实现矩形移动，大家可能看的很多了。但是我为什么还要去写这样的一篇文章呢，因为笔者曾经做到3维图形下的移动。包括移动一个立方体上的一条边线、一个面、移动多边形的一个点。最近一直在写canvas的相关的文章,想着复习下，读完本篇文章你可以学到，通过移动矩形的一个点， 一个条边线，以及整个面的移动。本篇文章从浅到深，希望你耐心读下去。

  
• 06.08 12:58:47
  发表了文章 2022-06-08 12:58:47

  空间中任意平面的镜像矩阵

  1. 什么是镜像变换 直接看下面这张图： 图片这张图很好的诠释了镜像变化，关于y轴的变化，关于x轴的变化。这种关于任意轴的变化，就是镜像了。 2d下的镜像矩阵变化： 我们以图像关于Y轴镜像为例子：原图形和结果图形上所有点的都存在的关系就应该是 x = -x,也就是都只有x发生变化。这种通用的变化其实可以用矩阵表示，2D空间中的点其实可以用[x,y ] 表示。对角线的两个1就是关于那个轴对称： 图片 这些都是关于x轴、 y轴的对称， 如果说关于2d平面的任意一条直线呢，当然有人已经帮我们推导出来了如下图：（数学证明我就不给出了，有兴趣的可以自行百度，本篇文章注重3d镜像矩阵的推导） 图