摘要：
前言 本文主要讲前端开发时遇到的 编码规范难以落地的问题 以及 解决方案 ，包括 编码规范 和 git commit 规范。 重点在 落实前端团队编码规范 的操作上。跟着我一步一步去做，一定可以将规范落地。 问：要不要制定编码规范？要不要使用 ESLint ？要不要规范化 git 的提交 ？ 答：非 阅读全文
posted @ 2022-06-25 13:54
德育处主任
阅读(146)
评论(0)
推荐(0)
摘要：
本文简介 Fabric.js 默认没提供 鼠标右键事件，只有 鼠标按键点击 、鼠标按键抬起 、鼠标移动 等事件。 但在工作中有可能需要用到 “右键” 事件，比如 “右键菜单” 。所以就有了本文。 本文主要关注 Fabric.js 的主要 api 有： fireRightClick：允许右键点击 st 阅读全文
posted @ 2022-06-25 13:54
德育处主任
阅读(517)
评论(0)
推荐(0)
摘要：
本文介绍 我使用 Fabric.js 的版本是 4.6.0。 这次要实现的效果是：在本地上传一张图片，然后渲染到 canvas 里（当做背景图）。 我会用 原生 的方法实现一次，然后再在 Vue3 + Element-plus 环境下实现一次。 最后聊聊我在真实项目中的做法。 需求： 通过点击上传按 阅读全文
posted @ 2022-06-25 13:53
德育处主任
阅读(684)
评论(0)
推荐(0)
摘要：
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情 本文简介 点赞 + 关注 + 收藏 = 学会了 不管是在富文本编辑器还是在Word里，都有“斜体”功能。而 Fabric.js 也不例外。本文主要讲解在 Fabric.js 中使用 IText 创建的文本 阅读全文
posted @ 2022-06-25 13:52
德育处主任
阅读(74)
评论(0)
推荐(0)
摘要：
想知道更多 Fabric.js 的玩法，关注我，第一时间获得最新推送 本文简介 在阅读本文前，你首先需要知道什么是 Fabric.js，还需要知道 Fabric.js 是如何创建矩形的。 如果你还没满足上面2个条件，推荐阅读 《Fabric.js从入门到____》 我在 Fabric.js 使用 框 阅读全文
posted @ 2022-06-25 13:52
德育处主任
阅读(929)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 对于数学化学这方面的项目，“上标” 和 “下标” 功能是很常用的，比如 次方 、化学元素 等表达方式，都需要用到上标或者下标。 在 Fabric.js 中，文本元素有 Text 、IText 和 Textbox 。本文主要讲解 IText 的上标和下标 阅读全文
posted @ 2022-06-25 13:51
德育处主任
阅读(73)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 评论 = 学会了 在使用 Fabric.js 开发时，可能会需要将元素居中。 本文总结了 Fabric.js 常用的将元素居中的方法，其中包括： 基于视窗的水平居中 基于画布的水平居中 带动画效果的水平居中 基于视窗的垂直居中 基于画布的垂直居中 带动画效果的垂直居中 阅读全文
posted @ 2022-06-25 13:49
德育处主任
阅读(97)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 Fabric.js 开启绘画模式后，可以设置画笔的样式。 画笔又分好几种，本文主要介绍 Fabric 基础画笔的用法。 之前写过 《Fabric.js 橡皮擦的用法》 也用到了绘图模式，有兴趣的可以去看看。 本文使用 Fabric.js 5.2.1 常 阅读全文
posted @ 2022-06-25 13:49
德育处主任
阅读(142)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 在 HTML 中，input 输入框有2种方法自动聚焦，最简单的是在 input 标签上添加 autofocus 属性。 再次点的方法是使用 JS 获取输入框元素，再调用 focus 事件选中输入框。 在 Fabric.js 中，IText 组件也提供 阅读全文
posted @ 2022-06-25 13:49
德育处主任
阅读(217)
评论(0)
推荐(0)
摘要：
在 Vue3中使用Fabric.js实现渐变(Gradient)效果，包括径向渐变radial Fabric.js 简介 用官方的话来讲 Fabric.js 是一个强大而简单的 Javascript HTML5 canvas 工具库 简单来说，如果你需要用 canvas 做特效或者做交互，那不妨试试 阅读全文
posted @ 2022-06-25 13:48
德育处主任
阅读(111)
评论(0)
推荐(0)
摘要：
前言 本文的案例代码并非作者原创。 本文主要讲解 视差效果是如何实现的（原生三件套） ，本文并不涉及性能优化相关的知识点讲解（你就当我耍流氓吧）。 本文会从原理讲起，然后结合多个案例由浅入深去实现最终效果。 学废后帮我点个赞呗~ 本文的 『推荐』 部分也别错过喔~ 因为日常开发很少使用原生的方式去做 阅读全文
posted @ 2022-06-25 13:48
德育处主任
阅读(349)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 如果你还不太了解 Fabric.js 的序列化和反序列化，可以看看 Fabric.js 序列化 和 Fabric.js 反序列化。 本文要讲的 “精简JSON” 其实是 精简版序列化 。序列化可以将 Fabric.js 的画布导出成一个 JSON 对象 阅读全文
posted @ 2022-06-25 13:47
德育处主任
阅读(114)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 本文介绍 Fabric.js 的圆形笔刷功能。 圆形笔刷是作用在 “自由绘制” 的画笔之上的。从名字就可以看出，这个笔刷会用一个个圆形来填充绘制的路径。 看图会更直观 Fabric.js 会使用不同频率、大小、颜色深浅来绘制出上图效果。 本文使用 Fa 阅读全文
posted @ 2022-06-25 13:47
德育处主任
阅读(132)
评论(0)
推荐(0)
摘要：
本文简介 这次要讲的是 4个 “摆正” 元素的方法，这是我工作中遇到的场景。 我不知道 straighten 使用 “摆正” 这个词来翻译正不正确，反正我就是要这么叫！ straighten：根据距离的远近，将元素从当前角度旋转至0、90、180、270等角度。 【百度百科的定义】 straight 阅读全文
posted @ 2022-06-25 13:46
德育处主任
阅读(88)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 IText 是 Fabric.js 提供的一个 可编辑文本 的元素。 要设置文字颜色，可以设置 fill 。 但 fill 会设置所有文字的颜色，如果你只想修改指定文字的颜色，只用 fill 就不是那么容易实现了。 本文要讲的就是 设置指定文字的颜色和 阅读全文
posted @ 2022-06-25 13:46
德育处主任
阅读(489)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 本文使用 Fabric.js 的 IText 演示。如果你还不懂 Fabric.js ，我墙裂推荐你阅读 《Fabric.js从入门到精通》。 一图胜千言，先看看图我们再写作文~ 分析 需求 从上图可以看出以下功能需求： 文本被选中后才能修改字号 整体 阅读全文
posted @ 2022-06-25 13:44
德育处主任
阅读(79)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 如果你的项目有画布拖拽、缩放等功能，而且你不希望背景图跟随拖拽或缩放，那一定要往下读。 本文主要讲解如何锁定背景图，锁定背景图其实只需设置1个属性即可。 本文会添加滚轮缩放画布、拖拽画布等功能来测试 “锁定背景图” 的效果。 应该可以清晰看出，不管如何 阅读全文
posted @ 2022-06-25 13:44
德育处主任
阅读(122)
评论(0)
推荐(0)
摘要：
本文简介 Fabric.js 提供了2个方法删除对象。 一个是 直接删除，另一个方法是 带过渡动画 删除元素（淡出动画）。 本文重点讲 带过渡动画 删除元素的方法，还会讲到设置 过渡时长 、删除后的 回调函数 等知识点。 相关API 删除元素的2种方法： canvas.remove(...objec 阅读全文
posted @ 2022-06-25 13:43
德育处主任
阅读(202)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 元素是 Fabric.js 的重要组成部分，如果画布上没有元素，那其实没啥意义。 元素数量多了，难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。 本文将讲解 Fabric.js 中的5种控制元素层级的方法。 准备阶 阅读全文
posted @ 2022-06-25 13:43
德育处主任
阅读(492)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 在 HTML 也好，Word 也好，基本都有下划线和删除线（中划线）。 Fabric.js 作为一个老牌 canvas 库，当然也提供中划线和下划线的配置啦，除此之外还提供了上划线的配置。 本文要讲解的就是这3种装饰线在 fabric.js 中的使用方 阅读全文
posted @ 2022-06-25 13:41
德育处主任
阅读(504)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 使用 canvas 开发的项目，滚轮缩放画布的需求应该不算少数，比如地图。 Fabric.js 也提供了缩放画布的功能，本文主要讲解设置画布大小的几种方法。 动手实现 在动手前先查查文档。 我把和本文相关的文档放在这 mouse:wheel：滚轮事件 阅读全文
posted @ 2022-06-25 11:34
德育处主任
阅读(330)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 本文介绍 Fabric.js 的 IText 在画布上如何让用户手动加粗文本。 效果如图所示： 要实现2种操作 全文加粗 只加粗选中的文字 如果你还不清楚 Fabric.js 有什么用，我强烈推荐你阅读 《Fabric.js 从入门到目中无人》 。该文 阅读全文
posted @ 2022-06-25 11:34
德育处主任
阅读(83)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 本文介绍 Fabric.js 的橡皮擦功能。 Fabric.js 的基础包并没有包含橡皮擦模块，如果你的项目需要使用橡皮擦，要使用定制版的 Fabric.js 。 本文需要有 Fabric.js 基础知识。 如果你还不清楚什么是 Fabric.js ， 阅读全文
posted @ 2022-06-25 11:33
德育处主任
阅读(327)
评论(0)
推荐(0)
摘要：
本文简介 这次要讲的是 自由绘制圆形 。 在 《Fabric.js 自由绘制矩形》 里讲到的思路，放在圆形里不太适用。 这次要做到的效果如下图所示。 思路 Fabric.js 默认的框选操作是矩形，如果需要做到上图的效果，需要做以下3步： 点击画布时 canvas.on('mouse:down', 阅读全文
posted @ 2022-06-25 11:31
德育处主任
阅读(209)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 本文讲解在 Fabric.js 中如何自由绘制椭圆形，如果你还不了解 Fabric.js，可以查阅 《Fabric.js从入门到精通》。 效果如下图所示 思路 Fabric.js 在初始化画布之后，可以执行框选操作，但默认是使用矩形的方式来框选，如下图 阅读全文
posted @ 2022-06-25 11:31
德育处主任
阅读(83)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 不知道你在使用 Fabric.js 时有没有发现，如果一个画布存在多个元素，而且它们之前是层叠的，当你选中底层的元素时，那个元素会跳到最顶层；当你释放该元素后，它又跑回原有层级。这是 Fabric.js 的默认状态。 如果你不希望操作时出现这种情况，你 阅读全文
posted @ 2022-06-25 11:31
德育处主任
阅读(115)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 在使用第三方UI组件库时会发现可以在他们的组件上使用 v-model ，比如 Element-UI 或者 Element-plus 的 el-input 就可以使用 v-model 进行数据绑定。 本文就以 input 元素做例子，实现在自定义组件中使 阅读全文
posted @ 2022-06-25 11:29
德育处主任
阅读(111)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 不管工作还是学习，我都很喜欢用 scss 和 less ，真的比纯 css 方便太多了。 本文讲解如何在 js 里导入 scss 的变量。 在动态换肤的网站里这种做法很常见。 我使用 vite 搭建一个 vue3 项目来举例。 动手 好记性不如烂键盘， 阅读全文
posted @ 2022-06-25 11:29
德育处主任
阅读(358)
评论(0)
推荐(0)
摘要：
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。 本文简介 点赞 + 关注 + 收藏 = 学会了 在 Vue 生态里， Element UI 是排名前列的组件库。 在 Vue 发布到 3.0 时，Element 也发布了对应的组件库。也就是 Element 阅读全文
posted @ 2022-06-25 11:29
德育处主任
阅读(639)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 在日常 Vue 项目中，大概率会用组件库辅助开发，所以 递归组件 的出镜率可能不会非常高。但这并不代表 递归组件 不重要。 本文用10分钟左右的时间让你掌握 递归组件 的用法。 在此之前，你必须掌握：html + css + js + Vue3 基础用 阅读全文
posted @ 2022-06-25 11:28
德育处主任
阅读(255)
评论(0)
推荐(0)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 使用 Vue 开发时，肯定会接触到 组件 的概念，无可避免的也会接触到 组件通讯 的概念。 组件通讯的方式有很多种，我在 《Vue3 过10种组件通讯方式》 一文中粗略罗列了 Vue3 常用的组件通讯方法。 在 Vue 2 中除了 $attrs 外，还 阅读全文
posted @ 2022-06-25 11:28
德育处主任
阅读(339)
评论(0)
推荐(1)
摘要：
本文简介 点赞 + 关注 + 收藏 = 学会了 本文讲解 Vue 3.2 组件多种通讯方式的基础用法，并且使用了 单文件组件 <script setup> 。 众所周知，Vue.js 中一个很重要的知识点是组件通信，不管是业务类的开发还是组件库开发，都有各自的通讯方法。 本文适合： 有 Vue 3 阅读全文
posted @ 2022-06-25 11:26
德育处主任
阅读(157)
评论(0)
推荐(0)
摘要：
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。 简介 点赞 + 关注 + 收藏 = 学会了 这是一篇对日常工作没什么帮助的文章~ 如果你还不太清楚 Element Plus 的 icon 是如何使用的，可以先阅读 《Element Plus 的 el-i 阅读全文
posted @ 2022-06-25 11:22
德育处主任
阅读(81)
评论(0)
推荐(0)
浙公网安备 33010602011771号