摘要：
前言 本文主要讲前端开发时遇到的 编码规范难以落地的问题 以及 解决方案 ，包括 编码规范 和 git commit 规范。 重点在 落实前端团队编码规范 的操作上。跟着我一步一步去做，一定可以将规范落地。 问：要不要制定编码规范？要不要使用 ESLint ？要不要规范化 git 的提交 ？ 答：非 阅读全文
摘要：
本文简介 Fabric.js 默认没提供 鼠标右键事件，只有 鼠标按键点击 、鼠标按键抬起 、鼠标移动 等事件。 但在工作中有可能需要用到 “右键” 事件，比如 “右键菜单” 。所以就有了本文。 本文主要关注 Fabric.js 的主要 api 有： fireRightClick：允许右键点击 st 阅读全文
摘要：
本文介绍 我使用 Fabric.js 的版本是 4.6.0。 这次要实现的效果是：在本地上传一张图片，然后渲染到 canvas 里（当做背景图）。 我会用 原生 的方法实现一次，然后再在 Vue3 + Element-plus 环境下实现一次。 最后聊聊我在真实项目中的做法。 需求： 通过点击上传按 阅读全文
摘要：
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情 本文简介 点赞 + 关注 + 收藏 = 学会了 不管是在富文本编辑器还是在Word里，都有“斜体”功能。而 Fabric.js 也不例外。本文主要讲解在 Fabric.js 中使用 IText 创建的文本 阅读全文
摘要：
想知道更多 Fabric.js 的玩法，关注我，第一时间获得最新推送 本文简介 在阅读本文前，你首先需要知道什么是 Fabric.js，还需要知道 Fabric.js 是如何创建矩形的。 如果你还没满足上面2个条件，推荐阅读 《Fabric.js从入门到____》 我在 Fabric.js 使用 框 阅读全文
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 对于数学化学这方面的项目，“上标” 和 “下标” 功能是很常用的，比如 次方 、化学元素 等表达方式，都需要用到上标或者下标。 在 Fabric.js 中，文本元素有 Text 、IText 和 Textbox 。本文主要讲解 IText 的上标和下标 阅读全文
摘要：
本文简介 点赞 + 关注 + 评论 = 学会了 在使用 Fabric.js 开发时，可能会需要将元素居中。 本文总结了 Fabric.js 常用的将元素居中的方法，其中包括： 基于视窗的水平居中 基于画布的水平居中 带动画效果的水平居中 基于视窗的垂直居中 基于画布的垂直居中 带动画效果的垂直居中 阅读全文
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 Fabric.js 开启绘画模式后，可以设置画笔的样式。 画笔又分好几种，本文主要介绍 Fabric 基础画笔的用法。 之前写过 《Fabric.js 橡皮擦的用法》 也用到了绘图模式，有兴趣的可以去看看。 本文使用 Fabric.js 5.2.1 常 阅读全文
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 在 HTML 中，input 输入框有2种方法自动聚焦，最简单的是在 input 标签上添加 autofocus 属性。 再次点的方法是使用 JS 获取输入框元素，再调用 focus 事件选中输入框。 在 Fabric.js 中，IText 组件也提供 阅读全文
摘要：
在 Vue3中使用Fabric.js实现渐变(Gradient)效果，包括径向渐变radial Fabric.js 简介 用官方的话来讲 Fabric.js 是一个强大而简单的 Javascript HTML5 canvas 工具库 简单来说，如果你需要用 canvas 做特效或者做交互，那不妨试试 阅读全文
摘要：
前言 本文的案例代码并非作者原创。 本文主要讲解 视差效果是如何实现的（原生三件套） ，本文并不涉及性能优化相关的知识点讲解（你就当我耍流氓吧）。 本文会从原理讲起，然后结合多个案例由浅入深去实现最终效果。 学废后帮我点个赞呗~ 本文的 『推荐』 部分也别错过喔~ 因为日常开发很少使用原生的方式去做 阅读全文
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 如果你还不太了解 Fabric.js 的序列化和反序列化，可以看看 Fabric.js 序列化 和 Fabric.js 反序列化。 本文要讲的 “精简JSON” 其实是 精简版序列化 。序列化可以将 Fabric.js 的画布导出成一个 JSON 对象 阅读全文
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 本文介绍 Fabric.js 的圆形笔刷功能。 圆形笔刷是作用在 “自由绘制” 的画笔之上的。从名字就可以看出，这个笔刷会用一个个圆形来填充绘制的路径。 看图会更直观 Fabric.js 会使用不同频率、大小、颜色深浅来绘制出上图效果。 本文使用 Fa 阅读全文
摘要：
本文简介 这次要讲的是 4个 “摆正” 元素的方法，这是我工作中遇到的场景。 我不知道 straighten 使用 “摆正” 这个词来翻译正不正确，反正我就是要这么叫！ straighten：根据距离的远近，将元素从当前角度旋转至0、90、180、270等角度。 【百度百科的定义】 straight 阅读全文
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 IText 是 Fabric.js 提供的一个 可编辑文本 的元素。 要设置文字颜色，可以设置 fill 。 但 fill 会设置所有文字的颜色，如果你只想修改指定文字的颜色，只用 fill 就不是那么容易实现了。 本文要讲的就是 设置指定文字的颜色和 阅读全文
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 本文使用 Fabric.js 的 IText 演示。如果你还不懂 Fabric.js ，我墙裂推荐你阅读 《Fabric.js从入门到精通》。 一图胜千言，先看看图我们再写作文~ 分析 需求 从上图可以看出以下功能需求： 文本被选中后才能修改字号 整体 阅读全文
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 如果你的项目有画布拖拽、缩放等功能，而且你不希望背景图跟随拖拽或缩放，那一定要往下读。 本文主要讲解如何锁定背景图，锁定背景图其实只需设置1个属性即可。 本文会添加滚轮缩放画布、拖拽画布等功能来测试 “锁定背景图” 的效果。 应该可以清晰看出，不管如何 阅读全文
摘要：
本文简介 Fabric.js 提供了2个方法删除对象。 一个是 直接删除，另一个方法是 带过渡动画 删除元素（淡出动画）。 本文重点讲 带过渡动画 删除元素的方法，还会讲到设置 过渡时长 、删除后的 回调函数 等知识点。 相关API 删除元素的2种方法： canvas.remove(...objec 阅读全文
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 元素是 Fabric.js 的重要组成部分，如果画布上没有元素，那其实没啥意义。 元素数量多了，难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。 本文将讲解 Fabric.js 中的5种控制元素层级的方法。 准备阶 阅读全文
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 在 HTML 也好，Word 也好，基本都有下划线和删除线（中划线）。 Fabric.js 作为一个老牌 canvas 库，当然也提供中划线和下划线的配置啦，除此之外还提供了上划线的配置。 本文要讲解的就是这3种装饰线在 fabric.js 中的使用方 阅读全文