德育处主任的博客_Stable Diffusion原创(3)

Three.js 性能监视器 Stats

本文简介点赞+关注+收藏=学会了<br不管是做游戏还是做普通网页，在这个时代基本都离不开动画。说到动画，第一个联想到的概念就是“帧”。这是用来衡量和描述动画是否流畅的一个单位。<br在Three.js中也有一款检测帧数(FPS)的工具，叫做Stats.js(https://github.com/mrdoob/stats.js)。!file(https://s2.51cto.com/images/b

JS

Vue

React

Canvas

SVG

原创 2022-12-20 21:05:20 218 阅读

Antv G6 拖拽生成节点

本文简介点赞+关注+收藏=学会了<brAntVG6是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。本文主要讲解使用AntVG6实现拖拽生成节点的功能，如下图所示。!file(https://s2.51cto.com/images/blog/202212/19231211_63a07f4b88a6731553.gif)<br本文使用Vue3做基础框架，配合G6实现上

JS

Vue

React

Canvas

SVG

原创 2022-12-19 23:12:13 542 阅读

Three.js 这样写就有阴影效果啦

本文简介点赞+关注+收藏=学会了<br渲染阴影效果需要消耗一定的资源，所以Three.js默认是关闭阴影效果的。想要在Three.js中实现阴影效果，只需记住接下来要讲的几个点即可。<br本文要实现的效果!file(https://s2.51cto.com/images/blog/202212/19231047_63a07ef7237c343239.png)<br本文适合Three.js入门级的工

JS

Vue

React

Canvas

SVG

原创 2022-12-19 23:10:50 170 阅读

Three.js 几个简单的动画

本文简介点赞+关注+收藏=学会了<br还记得当初学CSS时，有点基础后立刻就想搞点动画出来玩一下。在了解了Three.js(https://juejin.cn/post/7101683178741432356)的基础概念之后也有这个想法。简单的动画可以提高Three.js初学者的学习兴趣和信心。本文会从初学者的角度出发讲解几个简单的动画，包括：平移、旋转、缩放、跳跃。<br<br准备工作在开始制作

JS

Vue

React

Canvas

SVG

原创 2022-12-19 23:09:17 258 阅读

Canvas 10款基础滤镜（原理篇）

本文简介点赞+关注+收藏=学会了<br在学习Canvas的路上大概率会了解到滤镜，这是个很有趣的东西。用Canvas开发滤镜需要对几何数学、颜色的理解等领域都有一定基础。但先别关掉文章，没基础也没关系，不是还可以复制粘贴吗？（像极了正则表达式）<br我在学习的过程中也尝试过写一些简单的滤镜，也收集过很多滤镜。但由于历史有点久远了，我找不到收集回来的滤镜出处了。如果有冒犯到原作者，请联系我进行整改<

JS

Vue

React

Canvas

SVG

原创精选 2022-12-19 23:06:44 227 阅读

SVG 在前端的7种使用方法，你还知道哪几种？

本文简介点赞+关注+收藏=学会了<br技术一直在演变，在网页中使用SVG的方法也层出不穷。每个时期都有对应的最优解。所以我打算把我知道的7种SVG的使用方法列举出来，有备无患如果你还知道其他方法，可以在评论区补充<br<br1.在浏览器直接打开!file(https://s2.51cto.com/images/blog/202212/19224648_63a079581cb7521308.png)

JS

Vue

React

Canvas

SVG

原创 2022-12-19 22:46:49 199 阅读

SVG 从入门到后悔，怎么不早点学起来（图解版）

本文简介点赞+关注+收藏=学会了<br作为一只前端，只懂Vue、React感觉已经和大家拉不开距离了。可视化、机器学习等领域JS都有涉及到，而可视化方面已经被很多领域用到，比如大屏项目。可视化领域相关的技术有canvas和SVG，而这两个东东是迟早要接触的了。<br在我接触SVG之前，我觉得这是一个很高深的东西，有点恐惧。我第一次接触SVG是在iconfont网站(https://www.icon

JS

Vue

React

Canvas

SVG

原创 2022-12-19 22:44:47 100 阅读

Fabric.js 右键菜单

本文简介 Fabric.js 默认没提供鼠标右键事件，只有鼠标按键点击、鼠标按键抬起、鼠标移动等事件。但在工作中有可能需要用到 “右键” 事件，比如 “右键菜单” 。所以就有了本文。本文主要关注 Fabric.js 的主要 api 有： fireRightClick：允许右键点击 stopContextMenu：禁用默认右键菜单 mouse:down：鼠标点击事件

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:02:06 400 阅读

Fabric.js 圆形笔刷

本文简介点赞 + 关注 + 收藏 = 学会了本文介绍 Fabric.js 的圆形笔刷功能。圆形笔刷是作用在 “自由绘制” 的画笔之上的。从名字就可以看出，这个笔刷会用一个个圆形来填充绘制的路径。看图会更直观 Fabric.js 会使用不同频率、大小、颜色深浅来绘制出上图效果。本文使用 Fabric.js 5.2.1 常用配置要做出上图的效果，首先需要将画布设置成

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:01:54 173 阅读

视差特效的原理和实现方法

前言本文的案例代码并非作者原创。本文主要讲解视差效果是如何实现的（原生三件套），本文并不涉及性能优化相关的知识点讲解（你就当我耍流氓吧）。本文会从原理讲起，然后结合多个案例由浅入深去实现最终效果。学废后帮我点个赞呗~ 本文的『推荐』部分也别错过喔~ 因为日常开发很少使用原生的方式去做视差效果。 ?‍?在线演示 ?‍?本文代码仓库本文案例如图所示原理 pc

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:01:45 154 阅读

Fabric.js 渐变

在 Vue3中使用Fabric.js实现渐变(Gradient)效果，包括径向渐变radial Fabric.js 简介用官方的话来讲 Fabric.js 是一个强大而简单的 Javascript HTML5 canvas 工具库简单来说，如果你需要用 canvas 做特效或者做交互，那不妨试试 Fabric.js 这个库，它会使开发更加简单和直观。 Fabric.js 官网 Fab

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:01:25 263 阅读

Fabric.js 精简JSON

本文简介点赞 + 关注 + 收藏 = 学会了如果你还不太了解 Fabric.js 的序列化和反序列化，可以看看 Fabric.js 序列化和 Fabric.js 反序列化。本文要讲的 “精简JSON” 其实是精简版序列化。序列化可以将 Fabric.js 的画布导出成一个 JSON 对象。我们要把画布保存到服务器时，传输给后台的其实是一段 JSON 。如果要重新渲染，就把这段

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:01:16 152 阅读

Fabric.js 自由绘制矩形

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:01:10 391 阅读

Fabric.js 将本地图像上传到画布背景

本文介绍我使用 Fabric.js 的版本是 4.6.0。这次要实现的效果是：在本地上传一张图片，然后渲染到 canvas 里（当做背景图）。我会用原生的方法实现一次，然后再在 Vue3 + Element-plus 环境下实现一次。最后聊聊我在真实项目中的做法。需求：通过点击上传按钮上传图片拿到图片，放到画布上渲染需要注意的是，本文主要实现上传图片并渲染到画布的

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:01:02 417 阅读

Fabric.js 3个api设置画布宽高

本文简介使用 Fabric.js 创建画布时，可以在参数里配置画布的宽高。除了初始化时设置之外，Fabric.js 还提供了其他 api 供后期修改画布宽高。本文列举了 Fabric.js 的3个 api 设置画布宽高。这3个 api 虽然简单，但在实际开发中可能很重要。比如监听浏览器窗口缩放，动态调整画布的宽高。如果想入门 Fabric.js 可以看《Fabric.js从入门到膨胀

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:00:55 441 阅读

Fabric.js 更换图片的3种方法（包括更换分组内的图片，以及存在缓存的情况）

本文简介我列举了3种在 Fabric.js 中更换图片的方法。其中还包括更换组内图片的操作。环境和版本 Chrome浏览器版本：96.0.4664.45 Fabric.js版本：4.6.0 我是在原生环境下开发的，同时也提供了一份 Vue3 环境下开发的代码（文末有链接）。动手操作接下来有3个案例，使用了2张图片 Agumon.png 和 Bhikkhu.

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:00:49 316 阅读

Fabric.js 背景不受视口变换影响

本文简介点赞 + 关注 + 收藏 = 学会了如果你的项目有画布拖拽、缩放等功能，而且你不希望背景图跟随拖拽或缩放，那一定要往下读。本文主要讲解如何锁定背景图，锁定背景图其实只需设置1个属性即可。本文会添加滚轮缩放画布、拖拽画布等功能来测试 “锁定背景图” 的效果。应该可以清晰看出，不管如何拖拽和缩放画布，背景图都纹丝不动。动手编码起步 <canvas id="can

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:00:39 157 阅读

摆正元素（带过渡动画）

本文简介这次要讲的是 4个 “摆正” 元素的方法，这是我工作中遇到的场景。我不知道 straighten 使用 “摆正” 这个词来翻译正不正确，反正我就是要这么叫！ straighten：根据距离的远近，将元素从当前角度旋转至0、90、180、270等角度。【百度百科的定义】 straighten，英文单词，及物动词、不及物动词，作及物动词时意为“整顿；使…改正；使…挺直；使…好转”，

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:00:33 71 阅读

Fabric.js IText设置指定文字的颜色和背景色

本文简介点赞 + 关注 + 收藏 = 学会了 IText 是 Fabric.js 提供的一个可编辑文本的元素。要设置文字颜色，可以设置 fill 。但 fill 会设置所有文字的颜色，如果你只想修改指定文字的颜色，只用 fill 就不是那么容易实现了。本文要讲的就是设置指定文字的颜色和背景色。设置文字颜色或背景色，需要分情况讨论的：全文设置设置指定文字颜色（单行）

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:00:17 505 阅读

Fabric.js IText 上标和下标

本文简介点赞 + 关注 + 收藏 = 学会了对于数学化学这方面的项目，“上标” 和 “下标” 功能是很常用的，比如次方、化学元素等表达方式，都需要用到上标或者下标。在 Fabric.js 中，文本元素有 Text 、IText 和 Textbox 。本文主要讲解 IText 的上标和下标如何实现。在 Text 和 Textbox 中的实现方式也是一样的。上标 con

JS

Vue

React

Canvas

SVG

原创 2022-08-05 22:00:09 130 阅读

Fabric.js 动态设置字号大小

本文简介点赞 + 关注 + 收藏 = 学会了本文使用 Fabric.js 的 IText 演示。如果你还不懂 Fabric.js ，我墙裂推荐你阅读《Fabric.js从入门到精通》。一图胜千言，先看看图我们再写作文~ 分析需求从上图可以看出以下功能需求：文本被选中后才能修改字号整体修改字号修改被选中的几个字的字号，没被选中的不进行修改解决思路获取

JS

Vue

React

Canvas

SVG

原创 2022-08-02 13:01:29 263 阅读

Fabric.js 激活输入框

本文简介点赞 + 关注 + 收藏 = 学会了在 HTML 中，input 输入框有2种方法自动聚焦，最简单的是在 input 标签上添加 autofocus 属性。再次点的方法是使用 JS 获取输入框元素，再调用 focus 事件选中输入框。在 Fabric.js 中，IText 组件也提供了类似的方法。实操 Fabric.js 的 IText 是一个可编辑文本框，可以在项目

JS

Vue

React

Canvas

SVG

原创 2022-07-31 22:21:43 284 阅读

阅读Skeleton.css源码，改善睡眠质量（尽管它只有419行代码）

本文介绍点赞就等于学会了！如果本文对您有帮助，建议点赞收藏（点赞就等于学会了） Skeleton 源码一共只有 419 行（加上注释和换行），非常适合用来学习。本文是根据我的学习过程来编写的，几乎每个章节都包含使用方法和源码分析。虽然现在大部分业务都不需要重复造轮子了，但对于小白来说，学习完 Skeleton 源码是能走出新手村的。本文不是推荐大家使用 Skeleto

JS

Vue

React

Canvas

SVG

原创 2022-07-29 16:28:33 245 阅读

NodeJS 5分钟连接 Redis 读写操作

本文简介本文主要讲解使用 NodeJS 操作 Redis ，顺便会先带一带 Redis 基础用法。在写本文时，使用 NPM 安装的 Redis 依赖包已经到了 4.1.0 版本了。我以前用过 2.8 ，这两个版本在用法上也是有差别的。可能一些老项目还在用老版本的依赖包。所以我会把2个版本的用法都简单讲讲。 Redis 基础 Redis 可以说是最最最简单的数据库了。大部分数据库的读写操

JS

Vue

React

Canvas

SVG

原创 2022-07-28 06:15:59 337 阅读

NodeJS 5分钟连接MySQL 增删改查

本文简介本文主要讲解在 Node.js 里如何连接 MySQL ，并分别操作一下增删改查。阅读本文前需要在你电脑里安装一下 MySQL ，最好再安装一个数据库管理工具。我使用的是 MySQL Workbench ，这是一款 MySQL 官方推出的管理工具。你也可以使用 Navicat ，这工具也挺好用的。 MySQL 下载地址 MySQL Workbench 下载地址

JS

Vue

React

Canvas

SVG

原创 2022-07-26 09:38:44 323 阅读

JS 将伪数组转换成数组 ?

本文简介点赞 + 关注 + 收藏 = 学会了在 JS 中，伪数组是非常常见的，它也叫类数组。伪数组可能会给 JS 初学者带来一点困扰。本文将详细讲解什么是伪数组，以及分别在 ES5 和 ES6 中将伪数组转换成真正的数组。什么是伪数组？伪数组的主要特征：它是一个对象，并且该对象有 length 属性比如 let arrayLike = { "0": "a",

JS

Vue

React

Canvas

SVG

原创 2022-07-25 10:08:42 156 阅读

Canvas 从入门到劝朋友放弃（图解版）✨

本文简介点赞 + 关注 + 收藏 = 学会了在前端领域，如果只是懂 Vue 或者 React ，未来在职场的竞争力可能会比较弱。根据我多年在家待业经验来看，前端未来在数据可视化和 AI 这两个领域会比较香，而 Canvas 是数据可视化在前端方面的基础技术。本文就用光的速度将 canvas 给入门了。要入门一个技术，前期最重要是快！所以本文只讲入门内容，能应付简单项目。深入的知

JS

Vue

React

Canvas

SVG

原创 2022-07-24 16:47:13 221 阅读

Fabric.js 基础笔刷

本文简介点赞 + 关注 + 收藏 = 学会了 Fabric.js 开启绘画模式后，可以设置画笔的样式。画笔又分好几种，本文主要介绍 Fabric 基础画笔的用法。之前写过《Fabric.js 橡皮擦的用法》也用到了绘图模式，有兴趣的可以去看看。本文使用 Fabric.js 5.2.1 常用的配置首先要开启一下画布的绘画模式，因为普通的框选模式是不支持绘画的。

JS

Vue

React

Canvas

SVG

原创 2022-07-23 07:25:26 382 阅读

Fabric.js 控制元素层级

本文简介点赞 + 关注 + 收藏 = 学会了元素是 Fabric.js 的重要组成部分，如果画布上没有元素，那其实没啥意义。元素数量多了，难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。本文将讲解 Fabric.js 中的5种控制元素层级的方法。准备阶段我在画布上创建3个元素，之后的所有演示都基于下面这段代码 <canvas i

JS

Vue

React

Canvas

SVG

原创 2022-07-22 08:37:19 570 阅读

Fabric.js 居中元素

本文简介点赞 + 关注 + 评论 = 学会了在使用 Fabric.js 开发时，可能会需要将元素居中。本文总结了 Fabric.js 常用的将元素居中的方法，其中包括：基于视窗的水平居中基于画布的水平居中带动画效果的水平居中基于视窗的垂直居中基于画布的垂直居中带动画效果的垂直居中同时实现水平和垂直居中（也是分基于视窗或基于画布的）除此之外，还总结了在画布层面居中

JS

Vue

React

Canvas

SVG

原创 2022-07-22 08:37:18 124 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

德育处主任的博客