不断创造，加速成长！这是我参加“掘金每日新项目·六月更新挑战赛”的第8天。点击查看活动详情。点赞+关注+书签=了解到这篇文章介绍了Fabric.js的圆刷功能。圆形画笔在“写意”画笔之上工作。顾名思义，这个画笔将用圆圈填充绘制的路径。看图会更直观。Fabric.js会使用不同的频率、尺寸、颜色深浅来绘制上图的效果。本文使用Fabric.js5.2.1的常用配置来制作上图效果，首先需要将画布设置为绘画模式。初始化画布，首先需要对画布进行初始化，后面的各个属性和方法的解释都将以这段代码为准。要将画布设置为绘图模式，需要设置isDrawingMode为真。您可以选择以上两种书写方式中的一种。打开圆形画笔并将画笔设置为圆形。也有两种写法。写法1//省略初始化代码canvas.freeDrawingBrush=newfabric.CircleBrush(canvas)写法2//省略初始化代码letcircleBrush=newfabric.CircleBrush()circleBrush.initialize(canvas)canvas.freeDrawingBrush=circleBrushEither方式可行，但会相应影响后续代码量。如果你要经常修改画笔的属性，我推荐使用方法2。设置画笔宽度如果你在上面的步骤中使用了方法1，你需要这样写来设置画笔宽度//省略初始化代码canvas.freeDrawingBrush=newfabric.CircleBrush(canvas)//创建圆形画笔canvas.freeDrawingBrush.width=6//画笔宽度，默认10如果使用写法2，设置代码如下//省略初始化代码//创建一个圆形画笔letcircleBrush=newfabric.CircleBrush()circleBrush.initialize(canvas)canvas.freeDrawingBrush=circleBrushcircleBrush.width=30设置画笔颜色//省略初始化代码circleBrush.color='pink'我将画笔设置为粉红色。除了关键字color，还支持rgb等设置方式circleBrush.color='#c123a8'circleBrush.color='rgb(10,230,120)'setshadow//省略初始化代码circleBrush.shadow=newfabric.Shadow({blur:10,//羽化度offsetX:20,//x轴偏移offsetY:20,//y轴偏移color:'#30e3ca'//投影颜色})同方法设置基本画笔的阴影。常用方法常用的方法有几种，但也有一些需要注意，必须结合使用才有效。Mousedown//省略初始化代码circleBrush.onMouseDown=function(pointer,e){console.log(pointer)console.log(e)}使用onMouseDown设置鼠标按下时触发的事件。该事件有2个参数。mouseup//省略初始化代码circleBrush.onMouseUp=function(pointer){console.log(pointer)}就像“mouseup”一样简单。使用onMouseUp设置鼠标释放事件。鼠标移动时//省略初始化代码circleBrush.onMouseMove=function(pointer,e){console.log(pointer)console.log(e)circleBrush.drawDot(pointer)}使用onMouseMove设置鼠标移动时的事件.但是这个事件中需要执行drawDot事件，必须传入鼠标当前位置才能正确绘制。鼠标移动事件可以增加更多的方法，比如在画的基础上附近再画一条线//省略初始化代码circleBrush.onMouseMove=function(pointer,e){console.log(pointer)console.log(e)circleBrush.drawDot(pointer)circleBrush.addPoint({x:pointer.x+50,y:pointer.y+50})//如果附近多了一条线}以上是Fabric的常用用法圆刷怎么玩~代码仓库?原版代码推荐阅读
