Fabric.js 铅笔笔刷
本文简介
点赞 + 关注 + 收藏 = 学会了
fabric.js
的铅笔其实是继承基础画笔的一个工具,在基础画笔的基础上多了“拐角平滑度”等配置项。
本文讲解铅笔的基础用法以及常用事件。
常规配置
真实世界的铅笔有不同的型号,颜色的深浅、笔芯的硬度都是不同的。
在 fabric.js
中,铅笔同样有不同配置。
开启绘图模式
要使用铅笔的话,首先要开启“绘图模式”。
下面这段代码是本文的基础代码,之后配置到的铅笔属性和铅笔相关的方法都是基于这段代码的基础。
引入 fabric.js
的代码我就不写了,如果不知道如何引入可以查看 《Fabric.js 从入门到膨胀》。
<canvas id="canvas" width="500" height="400" style="border: 1px solid #ccc;"></canvas><script>var canvas = new fabric.Canvas('canvas', {isDrawingMode: true // 绘图模式})
</script>
将 isDrawingMode
设置为 true
就可以开启绘图模式了。此时在画布上按着鼠标左键就能绘画。
注册铅笔
要使用铅笔工具,需要将 canvas.freeDrawingBrush
设置成铅笔。
// 省略部分代码var canvas = new fabric.Canvas('canvas', {isDrawingMode: true // 绘图模式
})// 实例化铅笔
let pencilBrush = new fabric.PencilBrush(canvas)
// 将画布的画笔设置成铅笔
canvas.freeDrawingBrush = pencilBrush
需要注意的是,在 new fabric.PencilBrush(canvas)
中需要传入 canvas
。
除了在实例化时期传入 canvas
,还可以调用 initialize
方法传入。
// 省略部分代码// 创建铅笔
let pencilBrush = new fabric.PencilBrush()
// 初始化铅笔
pencilBrush.initialize(canvas)
// 将画笔设置成铅笔
canvas.freeDrawingBrush = pencilBrush
设置铅笔颜色
要设置的属性是 color
// 省略部分代码pencilBrush.color = 'pink'
除了设置关键字,还可以通过十六进制的颜色值、rgba等方式进行设置。
比如 pencilBrush.color = 'rgba(0, 0, 0, 0.1)'
就能设置一个具有透明度的黑色的画笔。
设置铅笔粗细
使用 width
可以设置铅笔的粗细,赋的值是数值类型的。
// 省略部分代码pencilBrush.width = 10
阴影
需要使用 fabric.Shadow
创建阴影,再赋值给 shadow
。
为了演示方便,我把铅笔的 width
设置成 10
。
// 省略部分代码// 加粗铅笔,方便演示
pencilBrush.width = 10// 设置阴影
pencilBrush.shadow = new fabric.Shadow({blur: 10, // 羽化程度offsetX: 10, // x轴偏移量offsetY: 10, // y轴偏移量color: '#30e3ca' // 投影颜色
})
阴影 fabric.Shadow
配置项其实还有很多,这个例子主要配置了以下4个属性
blur
: 羽化程度,接收数值类型的值。offsetX
: 阴影在x轴的偏移量,正值往右,负值往左。offsetY
: 阴影在y轴的偏移量,正值往下,负值往上。color
: 阴影颜色,可以使用颜色关键字、十六进制、rgba等。
虚线
可以通过 strokeDashArray
将铅笔画出来的线条设置成虚线。
strokeDashArray
的值是一个数值类型的数组,数组可以接收1个或多个元素。
当只有1个元素时,虚线和实线的长度都相等。
// 省略部分代码pencilBrush.strokeDashArray = [10]
当存在2个元素时,第一个元素代表实线长度,第二个元素代表虚线的长度。
// 省略部分代码pencilBrush.strokeDashArray = [30, 10]
从上图可以看出,每段实线的长度是30,每段虚线的长度是10。
如果是3个参数以上的情况,就会一直“轮回”
// 省略部分代码pencilBrush.strokeDashArray = [10, 20, 30]
上面代码的情况是这样的
实线10, 虚线20, 实线30, 虚线10, 实线20, 虚线30, 实线10, ......
如果是4个、5个以上的参数,也是这样一直循环下去。
线帽
线帽就是线条两端的样式,可以使用 strokeLineCap
设置线帽样式,可选值有 butt
、round
和 square
。
默认是 round
,也就是圆形线帽。
// 省略部分代码pencilBrush.width = 10 // 加粗
pencilBrush.strokeLineCap = 'round' // 修改线帽
如果 square
就是方形的头
// 省略部分代码pencilBrush.width = 10 // 加粗
pencilBrush.strokeLineCap = 'square' // 修改线帽
最后一个是无线冒 butt
// 省略部分代码pencilBrush.width = 10 // 加粗
pencilBrush.strokeLineCap = 'butt' // 修改线帽
看上去 butt
和 square
好像有点像,但其实是不一样的。
如果线段长度一样,square
和 round
都会在线的两端加上线帽,会增长线的长度。
角落风格
比如字母 V
的尖尖就是“拐角”。
fabric.js
的铅笔可以通过 strokeLineJoin
属性设置拐角,支持 bevel
斜面、 round
圆形、 miter
斜面 三个属性。
// 省略部分代码pencilBrush.strokeLineJoin = 'miter', // "bevel" 斜面, "round" 圆形, "miter" 斜面
最大斜接长度
strokeMiterLimit
属性的设置适用于 strokeLineJoin
为 miter
的情况。
pencilBrush.strokeMiterLimit = 20
拐角平滑度
这是一个很有意思的属性: decimate
。
通过设置 decimate
可以修改拐角的平滑度,数值越大就越平滑。
pencilBrush.width = 5 // 加粗
pencilBrush.decimate = 40
禁止超出画布
如果将铅笔的 limitedToCanvasSize
属性设置为 true
,在绘制的过程中画笔就不能超出画布了。
// 省略部分代码pencilBrush.width = 5 // 加粗
pencilBrush.limitedToCanvasSize = true // 禁止画笔超出画布
绘制直线
使用铅笔时,默认按住 shift
键可以绘制直线
如果你想修改画直线的组合键,可以设置 straightLineKey
属性。
// 省略部分代码pencilBrush.straightLineKey = 'shiftKey'
straightLineKey
支持以下配置:
shiftKey
: shift键,默认altKey
: alt键ctrlKey
: ctrl键'none'
、'undefined'、'null': 取消组合键
事件
fabric.js
的铅笔提供了一些基础事件,有的好用,有的不好用。。。
准备生成线路时:before:path:created
// 省略部分代码canvas.on('before:path:created', opt => {console.log(opt.path)
})
线路生成完毕时:path:created
// 省略部分代码canvas.on('path:created', function(opt) {console.log(opt.path)
})
鼠标点击时:onMouseDown
// 省略部分代码pencilBrush.onMouseDown = function(t, e) {console.log(t)console.log(e)this.canvas._isMainEvent(e.e) &&(this.drawStraightLine = e.e[this.straightLineKey],this._prepareForDrawing(t),this._captureDrawingPath(t),this._render())
}
参数 t
是鼠标点击时的坐标 {x, y}
。
参数 e
包含事件本身,还有坐标点。
可以将 t
和 e
输出到控制台看看。
onMouseDown
事件最好使用普通函数,而且要在最后写上这两句:
this._prepareForDrawing(t)
this._render()
鼠标移动时:onMouseMove
pencilBrush.onMouseMove = function(t, e) {console.log(t)console.log(e)if (this.canvas._isMainEvent(e.e) && (this.drawStraightLine = e.e[this.straightLineKey],(!0 !== this.limitedToCanvasSize || !this._isOutSideCanvas(t)) && this._captureDrawingPath(t) && 1 < this._points.length)) {if (this.needsFullRender()) {this.canvas.clearContext(this.canvas.contextTop)this._render()}else {var i = this._points, r = i.length, n = this.canvas.contextTopthis._saveAndTransform(n)this.oldEnd && (n.beginPath(),n.moveTo(this.oldEnd.x, this.oldEnd.y))this.oldEnd = this._drawSegment(n, i[r - 2], i[r - 1], !0)n.stroke()n.restore()}}
}
鼠标松开时:onMouseUp
pencilBrush.onMouseUp = function(t) {console.log(t)return !this.canvas._isMainEvent(t.e) || (this.drawStraightLine = !1,this.oldEnd = void 0,this._finalizeAndAddPath(),!1)
}
代码仓库
⭐ 铅笔
推荐阅读
Fabric.js 铅笔笔刷相关推荐
- Fabric.js 喷雾笔刷从入门到放肆
本文简介 点赞 + 关注 + 收藏 = 学会了 喷雾笔刷 SprayBrush 是 fabric.js 提供的一个很好玩的工具,而且 fabric.js 也封装好了很多非常方便的属性让我们配置,用起来 ...
- Fabric.js 图案画笔(笔刷)
theme: smartblue 本文简介 带尬猴,我是德育处主任 Fabric.js 有图案画笔功能,这个功能可以简单理解成"刮刮卡"效果. 如果只是看 Fabric.js 文档 ...
- fabric.js 钢笔橡皮问题
1.钢笔橡皮绘制 钢笔 this.fabricObj.freeDrawingBrush = new fabric.PencilBrush( this.fabricObj ); //钢笔刷 this.f ...
- Fabric.js 基础画笔的用法 BaseBrush
theme: smartblue 本文简介 点赞 + 关注 + 收藏 = 学会了 本文介绍 Fabric.js 的基础笔刷用法.如果你还不知道 Fabric.js 是什么,我墙裂建议你阅读一下 < ...
- Canvas实用库Fabric.js使用手册
简介 什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的 ...
- 强大的Canvas开源库Fabric.js简介与开发指南
什么是Fabric.js? Fabric.js 是一个强大且简单的Javascript HTML5 Canvas库. 官网地址:http://fabricjs.com/ 为什么要使用Fabric.js ...
- fabric.js和高级画板
本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式.网格模式切换 自由绘制 画箭头 画直线 画虚线 画圆/椭圆/矩形/直角 ...
- HTML5 Canvas JavaScript库 Fabric.js 使用经验
首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...
- angelajs中ajax,Fabric.js Triangle angle属性用法及代码示例
在本文中,我们将看到如何使用FabricJS绘制固定角度的画布Triangle.画布三角形表示三角形是可移动的,可以根据需要拉伸.此外,当涉及初始笔触颜色,高度,宽度,填充颜色或笔触宽度时,可以自定义 ...
最新文章
- [LeetCode系列]最大连续子列递归求解分析
- 专用人格计算机测验题目,《应征入伍公民体格检查心理检测标准(暂行)》
- matlab debug出现k,MATLAB下的程序调试
- Java学习小程序(7)九九乘法表
- qtablewidget 选中不改变背景_C4D制作不一样的核壳结构
- 学习iPhone开发中 sqlite3的使用
- nvidia-rapids︱cuGraph(NetworkX-like)关系图模型
- 没错 企业想提升安全防护需要HR的合作
- CryptoKitties加密猫合约详解
- 人人视频android app,人人视频安卓版
- iOS的非常全的三方库,插件,大牛博客
- Mybatis插入大量数据效率对比:foreach插入、SqlSession批量插入、sql插入
- 【一步一步教会您升级到win7旗舰版】
- 利用快递100api查询快递信息
- 单路视频编码器怎么使用
- 中小企业的公司财务管理系统
- linux下使用man命令查看系统调用
- 贷中存量客户的价值挖掘与分类实现,试试这一重要的场景模型
- c++由动态库dll文件生成lib文件的方法
- JAVA实现MD5带盐加密_MD5加盐加密
热门文章
- 计算机正确的按键手法游戏,lol正确的按键手法图解
- CHCR让iOS布局更婀娜
- 《Python数据分析与挖掘实战》Chapter8中医证型关联规则挖掘笔记
- linux中 #chmod –R 777 * 是什么意思
- java坦克大战(1.0)
- 应该记住的10个SQL 查询
- 案例分享:Qt激光加工焊接设备信息化软件研发(西门子PLC,mysql数据库,用户权限控制,界面设计,参数定制,播放器,二维图,期限控制,参数调试等)
- 考计算机854的学校,2020年哈尔滨工业大学854计算机基础硕士研究生入学考试科目大纲...
- ZYNQ学习之路19.在SDx中使用xfOpenCV图像加速处理
- APISpace 通用文字识别OCR API