勋章
我关注的人
粉丝
技术能力
- Java
- Linux
暂时未有相关云产品技术能力~
暂无个人介绍
-
发表了文章 2022-06-08
canvas进阶——实现连续平滑的曲线
前言 大家好，我是Fly, canvas真是个强大的东西，每天沉迷这个无法自拔， 可以做游戏，可以对图片处理，后面会给大家分享一篇，canvas实现两张图片找不同的功能， 听着是不是挺有意思的， 有点像游戏 「找你妹」，但是这都不是本篇文章想要表达的重点，读完今天这篇文章，你可以学到什么呢 「Canvas」 实现一个简单的画版小工具 「Canvas」 画出平滑的曲线， 这是本篇文章的重点 这时候有人问我她？？， 我的心里没有她的，只有你们「coder」， 下面一起学习吧，预计阅读5分钟。 canvas实现一个画版小工具 因为也比较简单，我大概说下思路： 首先我对canvas 画布坚监听3
-
发表了文章 2022-06-08
「干货」面试官问我如何快速搜索10万个矩形？——我说RBush
前言 亲爱的coder们，我又来了，一个喜欢图形的程序员👩💻，前几篇文章一直都在教大家怎么画地图、画折线图、画烟花🎆，难道图形就是这样嘛，当然不是，一个很简单的问题， 如果我在canvas中画了10万个点，鼠标在画布上移动，靠近哪一个点，哪一个点高亮。有同学就说遇事不决 用for循环遍历哇，我也知道可以用循环解决哇，循环解决几百个点可以，如果是几万甚至几百万个点你还循环，你想让用户等死？这时就引入今天的主角他来了就是「Rbush」 rbush 我们先看下定义，这个rbush到底能帮我们解决了什么问题？ RBush是一个high-performanceJavaScript库，用于点和
-
发表了文章 2022-06-08
Canvas——坐标系和矩阵的理解
前言 最近一直在寻找可视化文章发现没有合适的，恰好有个粉丝问了坐标系就和大家讲一下， 文字不多，内容比较简单，看完应该就能理解canvas的坐标系和getTransform 的 6 个参数什么意思哈， 后面还有一篇「Rbush」正在奋笔疾书✍️中，关于空间中如何快速搜索🔍百万或者是数十万个点的，敬请期待哈！ 坐标系 canvas中的坐标是从左上角开始的，x轴沿着水平方向（按像素）向右延伸，y轴沿垂直方向向下延伸。左上角坐标为x=0，y=0的点称作原点。在默认坐标系中，每一个点的坐标都是直接映射到一个CSS像素上。 但是如果图像的每次绘制都参考一个固定点将缺少灵活性，于是在canvas中引
-
发表了文章 2022-06-08
数据可视化——从0-1实现折线图（二）
画XY坐标轴 坐标轴本质上就是两条直线，所以第一步确定坐标原点，然后以坐标原点画出垂直和水平的两条直线。我们设置坐标原点离画布的左内边距和底部内边距，这样我们可以通过画布的高度减去底部内边距得到 原点的y, 然后通过画布的宽度减去左内边距得到x, 有了坐标原点画坐标轴就没什么大问题了。代码如下： //定义坐标轴相对于画布的内边距 this.paddingLeft = 30 // 至少大于绘制文字的宽度 this.paddingBottom = 30 // 至少大于绘制文字的高度 this.origin = new Point2d( this.paddingLeft,
-
发表了文章 2022-06-08
数据可视化——从0-1实现折线图（一）
前言 终于又到周末了，上一周的一篇3d文章 带你入门three.js——从0到1实现一个3d可视化地图很开心😺收到了这么多小伙伴的喜欢，这是对我知识输出的肯定。再次感谢大家！这周我又来了，这次给大家分享一下可视化图表比较简单的图表📈但同时我们又不得不学会的 那就是————「折线图」。读完本篇文章你可以学到什么 js实现直线方程 折线图的表达 canvas的一些api灵活的运用 直线折线图 我们先去非常有名的Echarts 官网看一看，他的折线图是什么样子的？如图： 图片 echats折线图 从图中可以得到以下2d图形元素： 直线（两个端点是圆的） 直线（两个端点是直线的） 文字 好
-
发表了文章 2022-06-08
带你入门three.js——从0到1实现一个3d可视化地图(二)
可视化地图——three.js实现 场景的搭建 我先不管地图不地图的，地图的这些形状肯定是放置到场景中的。跟着我的脚步一步一步去搭建一个场景。场景的搭建就照相机，渲染器。我用一个map类来表示代码如下： class chinaMap { constructor() { this.init() } init() { // 第一步新建一个场景 this.scene = new THREE.Scene() this.setCamera() this.setRenderer() } // 新建透视相机
-
发表了文章 2022-06-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
-
发表了文章 2022-06-08
3千字长文canvas实现任意正多边形的移动（点、线、面）
前言 我在上一篇文章简单实现了在canvas中移动矩形（点线面），不清楚的小伙伴请看我这篇文章：用canvas 实现矩形的移动（点、线、面）（1）。ok,废话不多说，直接进入文章主题， 上一篇文章我留了很多问题，就是我在画步中移动我怎么知道我移动的是哪一个类型，到底是点还是线还是面， 这就是本篇文章要解决的问题。读完本篇可以学到下面几点：
-
发表了文章 2022-06-08
用canvas绘制一个烟花动画
前言 在我们日常开发中贝塞尔曲线无处不在： svg 中的曲线（支持 2阶、 3阶） canvas 中绘制贝塞尔曲线 几乎所有前端2D或3D图形图表库(echarts，d3，three.js)都会使用到贝塞尔曲线 所以掌握贝塞尔曲线势在必得。这篇文章主要是实战篇，不会介绍和贝塞尔相关的知识， 如果有同学对贝塞尔曲线不是很清楚的话：可以查看我这篇文章——深入理解SVG 绘制贝塞尔曲线 第一步我们先创建ctx, 用ctx 画一个二阶贝塞尔曲线看下。二阶贝塞尔曲线有1个控制点，一个起点，一个终点。 const canvas = document.getElementById( 'canvas'
-
发表了文章 2022-06-08
用canvas 实现矩形的移动（点、线、面）
前言 在canvas中实现图片移动、实现矩形移动，大家可能看的很多了。但是我为什么还要去写这样的一篇文章呢，因为笔者曾经做到3维图形下的移动。包括移动一个立方体上的一条边线、一个面、移动多边形的一个点。最近一直在写canvas的相关的文章,想着复习下，读完本篇文章你可以学到，通过移动矩形的一个点， 一个条边线，以及整个面的移动。本篇文章从浅到深，希望你耐心读下去。
-
发表了文章 2022-06-08
空间中任意平面的镜像矩阵
1. 什么是镜像变换 直接看下面这张图： 图片这张图很好的诠释了镜像变化，关于y轴的变化，关于x轴的变化。这种关于任意轴的变化，就是镜像了。 2d下的镜像矩阵变化： 我们以图像关于Y轴镜像为例子：原图形和结果图形上所有点的都存在的关系就应该是 x = -x,也就是都只有x发生变化。这种通用的变化其实可以用矩阵表示，2D空间中的点其实可以用[x,y ] 表示。对角线的两个1就是关于那个轴对称： 图片 这些都是关于x轴、 y轴的对称， 如果说关于2d平面的任意一条直线呢，当然有人已经帮我们推导出来了如下图：（数学证明我就不给出了，有兴趣的可以自行百度，本篇文章注重3d镜像矩阵的推导） 图
-
发表了文章
2022-10-27
React17源码解读—— 事件系统
-
发表了文章
2022-10-27
带你从头到尾系统地撸一遍Redux源码（二）
-
发表了文章
2022-10-27
带你从头到尾系统地撸一遍Redux源码（一）
-
发表了文章
2022-10-27
Three.js-任意平面的镜像矩阵
-
发表了文章
2022-10-27
关于Taro 中的事件冒泡的坑
-
发表了文章
2022-10-10
60行代码实现一个基于esbuild按需加载的loader（二）
-
发表了文章
2022-10-10
60行代码实现一个基于esbuild按需加载的loader（一）
-
发表了文章
2022-10-10
基于storybook组件库的技术选型该怎么选??
-
发表了文章
2022-10-10
ESLint的缓存机制及其在CI中的应用
-
发表了文章
2022-10-10
canvas中模拟光照效果——绿的你发慌
-
发表了文章
2022-06-10
和大家谈谈我为什么选择图形这条路（二）
-
发表了文章
2022-06-10
和大家谈谈我为什么选择图形这条路（一）
-
发表了文章
2022-06-10
一年前端社招面试总结，入职阿里菜鸟
-
发表了文章
2022-06-10
产品经理又开始为难我了？？？我。。。。（二）
-
发表了文章
2022-06-10
产品经理又开始为难我了？？？我。。。。（一）
-
发表了文章
2022-06-10
从0到1带你用webpack 5构建monorepo项目——上篇(二）
-
发表了文章
2022-06-10
从0到1带你用webpack 5构建monorepo项目——上篇(一）
-
发表了文章
2022-06-10
关于前端AB实验，我是这么思考的
-
发表了文章
2022-06-10
30行代码写了个ios叮咚抢菜脚本
-
发表了文章
2022-06-10
10分钟带你从0到1搭建monorepo 工程化项目(二)
