Fabric.js 图案画笔(笔刷)

最新推荐文章于 2024-03-04 17:15:29 发布

德育处主任Pro

最新推荐文章于 2024-03-04 17:15:29 发布

阅读量475

点赞数

文章标签： javascript fabric 前端开发语言 ecmascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_39415598/article/details/129380290

版权

theme: smartblue

本文简介

带尬猴，我是德育处主任

Fabric.js 有图案画笔功能，这个功能可以简单理解成“刮刮卡”效果。

如果只是看 Fabric.js 文档可能还不太明白 图案画笔 PatternBrush 是如何使用。

本文将讲解如何配置这款画笔的基础属性。

图案画笔(笔刷) PatternBrush

先看看效果

使用图案画笔

图案画笔(笔刷)的用法其实和普通的画笔差不多，只是多了个配置图片的操作。

核心的操作有以下几步：

画布开启绘图模式
加载图片
创建图案画笔
设置图案画笔的 source 指向图片
使用图案画笔

```html

```

这么简单几步就完成了，但此时你应该已经发现，这个画笔是不是太小了？

设置画笔大小

可以通过设置画笔的 width 来修改画笔大小。

js // 省略部分代码 img.onload = function(oImg) { let texturePatternBrush = new fabric.PatternBrush(canvas) texturePatternBrush.source = img texturePatternBrush.width = 50 // 设置画笔大小 canvas.freeDrawingBrush = texturePatternBrush }

最后要注意一点：需要在图片加载完成后才去设置画笔！！！

代码仓库

⭐ 图案画笔(笔刷)

推荐阅读

在推荐阅读之前我要推荐一款游戏：《冲就完事模拟器》

👍《Fabric.js 拖放元素进画布》

👍《Fabric.js 限制边框宽度缩放》

👍《Fabric.js 监听元素相交(重叠)》

点赞 + 关注 + 收藏 = 学会了

德育处主任Pro

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Fabric.js 图案画笔(笔刷)

theme: smartblue本文简介带尬猴，我是德育处主任Fabric.js 有图案画笔功能，这个功能可以简单理解成“刮刮卡”效果。如果只是看 Fabric.js 文档可能还不太明白图案画笔 PatternBrush 是如何使用。本文将讲解如何配置这款画笔的基础属性。图案画笔(笔刷) PatternBrush先看看效果使用图案画笔图案画笔(笔刷)的...
复制链接

扫一扫

德育处主任Pro

博客等级

码龄7年

475
原创

536
点赞

1355
收藏

1059
粉丝

关注

私信

热门文章

分类专栏

Fabric.js 中文教程付费

最新评论

Streamlit 光速搭建并部署你的主页
cdl233: ERROR: Ignored the following versions that require a different python version: 0.55.2 Requires-Python <3.5; 1.21.2 Requires-Python >=3.7,<3.11; 1.21.3 Requires-Python >=3.7,<3.11; 1.21.4 Requires-Python >=3.7,<3.11; 1.21.5 Requires-Python >=3.7,<3.11; 1.21.6 Requires-Python >=3.7,<3.11; 1.6.2 Requires-Python >=3.7,<3.10; 1.6.3 Requires-Python >=3.7,<3.10; 1.7.0 Requires-Python >=3.7,<3.10; 1.7.1 Requires-Python >=3.7,<3.10; 1.7.2 Requires-Python >=3.7,<3.11; 1.7.3 Requires-Python >=3.7,<3.11; 1.8.0 Requires-Python >=3.8,<3.11; 1.8.0rc1 Requires-Python >=3.8,<3.11; 1.8.0rc2 Requires-Python >=3.8,<3.11; 1.8.0rc3 Requires-Python >=3.8,<3.11; 1.8.0rc4 Requires-Python >=3.8,<3.11; 1.8.1 Requires-Python >=3.8,<3.11; 6.0.0 Requires-Python >=3.6, <3.10; 6.0.0a1.dev1606911628 Requires-Python >=3.6, <3.10; 6.0.1 Requires-Python >=3.6, <3.10; 6.0.2 Requires-Python >=3.6, <3.10; 6.0.3 Requires-Python >=3.6, <3.10; 6.0.4 Requires-Python >=3.6, <3.10; 6.1.0 Requires-Python >=3.6, <3.10; 6.1.1 Requir
Streamlit 光速搭建并部署你的主页
cdl233: ERROR: Could not find a version that satisfies the requirement torchaudio==0.13.1 (from versions: 2.0.1, 2.0.2, 2.1.0, 2.1.1, 2.1.2, 2.2.0, 2.2.1, 2.2.2, 2.3.0) ERROR: No matching distribution found for torchaudio==0.13.1 Checking if Streamlit is installed ──────────────────────────────────────────────────────────────────────────────────────── [14:57:50] ❗️ installer returned a non-zero exit code [14:57:50] ❗️ Error during processing dependencies! Please fix the error and push an update, or try restarting the app.
Streamlit 光速搭建并部署你的主页
cdl233: 大佬可以帮我看看哪里出错吗，要怎么改哇 ERROR: Ignored the following yanked versions: 2.0.0 ERROR: Ignored the following versions that require a different python version: 0.55.2 Requires-Python <3.5; 1.21.2 Requires-Python >=3.7,<3.11; 1.21.3 Requires-Python >=3.7,<3.11; 1.21.4 Requires-Python >=3.7,<3.11; 1.21.5 Requires-Python >=3.7,<3.11; 1.21.6 Requires-Python >=3.7,<3.11; 1.6.2 Requires-Python >=3.7,<3.10; 1.6.3 Requires-Python >=3.7,<3.10; 1.7.0 Requires-Python >=3.7,<3.10; 1.7.1 Requires-Python >=3.7,<3.10; 1.7.2 Requires-Python >=3.7,<3.11; 1.7.3 Requires-Python >=3.7,<3.11; 1.8.0 Requires-Python >=3.8,<3.11; 1.8.0rc1 Requires-Python >=3.8,<3.11; 1.8.0rc2 Requires-Python >=3.8,<3.11; 1.8.0rc3 Requires-Python >=3.8,<3.11; 1.8.0rc4 Requires-Python >=3.8,<3.11; 1.8.1 Requires-Python >=3.8,<3.11; 6.0.0 Requires-Python >=3.6, <3.10; 6.0.0a1.dev1606911628 Requires-Python >=3.6, <3.10; 6.0.1 Requires-Python >=3.6, <3.10; 6.0.2 Requires-Python >=3.6, <3.10; 6.0.3 Requires-Python >=3.6, <3.10; 6.0.4 Requi
『Django』创建app（应用程序）
CSDN-Ada助手: 推荐 Python入门技能树：https://edu.csdn.net/skill/python?utm_source=AI_act_python
『uni-app、小程序』蓝牙连接、读写数据全过程
是小hai呀: 板子有链接嘛，想买一块来测试一下

您愿意向朋友推荐“博客详情页”吗？

强烈不推荐
不推荐
一般般
推荐
强烈推荐

提交

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。