Fabric.js 图案笔刷

本文简介

带尬猴,我是德育处主任


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

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

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



图案画笔(笔刷) PatternBrush

先看看效果

file


使用图案画笔

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

核心的操作有以下几步:

  1. 画布开启绘图模式
  2. 加载图片
  3. 创建图案画笔
  4. 设置图案画笔的 source 指向图片
  5. 使用图案画笔

<canvas id="c" style="border: 1px solid #ccc;"></canvas><script>const canvas = new fabric.Canvas('c', {width: 400,height: 400,isDrawingMode: true // 1. 开启绘图模式})// 2. 创建并加载图片let img = new Image();img.src = './bubble.jpg'// 必须等图片加载完再进行下一步操作img.onload = function() {// 3. 创建图案画笔let texturePatternBrush = new fabric.PatternBrush(canvas)// 4. 设置图案画笔的 `source` 指向图片texturePatternBrush.source = img// 5. 使用图案画笔canvas.freeDrawingBrush = texturePatternBrush}
</script>

file

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


设置画笔大小

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

file

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


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



代码仓库

⭐ 图案画笔(笔刷)



推荐阅读

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

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

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

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


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

代码仓库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120503.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kafka入门05——基础知识

目录 副本数据同步原理 HW和LEO的更新流程 第一种情况 第二种情况 数据丢失的情况 解决方案 Leader副本的选举过程 日志清除策略和压缩策略 日志清除策略 日志压缩策略 Kafka存储手段 零拷贝&#xff08;Zero-Copy&#xff09; 页缓存&#xff08;Page Cache&…

关于JAVA中字节码文件版本号、产品版本号及开发版本号的关系

目录 关于字节码版本对应关系清单关于字节码格式说明的资料关于这些版本号 关于字节码版本 以二进制打开字节码文件&#xff1a; 如上图中第5-8标识&#xff08;圈起来的&#xff09;的即字节码版本号 十六进制&#xff1a; 34 十进制&#xff1a; 52 jdk 8 对应关系清单 …

四、【常用的几种抠图方式三】

文章目录 钢笔工具抠图通道抠图蒙版抠图色彩范围抠图 钢笔工具抠图 钢笔工具抠图适合边缘比较硬的主体对象&#xff0c;因此适合需要精修而且边缘比较生硬的图片&#xff0c;钢笔工具操作比较多&#xff0c;对一般的新手来讲不是很友好&#xff0c;想要使用好钢笔工具需要经常…

5G与医疗:开启医疗技术的新篇章

5G与医疗&#xff1a;开启医疗技术的新篇章 随着5G技术的快速发展和普及&#xff0c;它已经在医疗领域产生了深远的影响。5G技术为医疗行业提供了更高效、更准确、更及时的通信方式&#xff0c;从而改变了医疗服务的模式和患者的体验。本文将探讨5G技术在医疗领域的应用场景、优…

JS问题:项目中如何区分使用防抖或节流?

前端功能问题系列文章&#xff0c;点击上方合集↑ 序言 大家好&#xff0c;我是大澈&#xff01; 本文约2300字&#xff0c;整篇阅读大约需要6分钟。 本文主要内容分三部分&#xff0c;第一部分是需求分析&#xff0c;第二部分是实现步骤&#xff0c;第三部分是问题详解。 …

CSS 基础知识-02

CSS 基础知识-01 1. flex布局2.定位3.CSS精灵4.CSS修饰属性 1. flex布局 2.定位 3.CSS精灵 4.CSS修饰属性

[③ADRV902x]: Digital Filter Configuration(接收端)

前言 本篇博客主要总结了ADRV9029 Rx接收端链路中各个滤波器的配置。配置不同的滤波器系数以及不同的参数&#xff0c;可以对输入的数字信号灵活得做decimation处理&#xff0c;decimation信号抽取&#xff0c;就是降低信号采样率的过程。 Receiver Signal Path 下图为接收端…

程序化广告系列之一---名词解释

基础 1、DSP&#xff1a;全称“Demand-Side Platform”&#xff0c;需求方平台&#xff0c;是为广告主、代理商提供一个综合性的管理平台&#xff0c;通过统一界面管理多个数字广告和数据交换账户。 2、SSP&#xff1a;SSP是Sell-Side Platform的缩写&#xff0c;即供应方平台…

Linux | 进程地址空间

目录 前言 一、初始进程地址空间 1、实验引入 2、虚拟地址空间 二、什么是进程地址空间 1、基本概念 2、深入理解进程地址空间 3、进程地址空间的本质 4、遗留问题解决 三、为什么要有进程地址空间 1、知识扩展 2、进程地址空间存在意义 3、重新理解挂起 前言 本…

Vue引入异步组件

defineAsyncComponent 函数&#xff1a;异步引入组件。 Suspense 标签&#xff1a;异步引入组件时&#xff0c;显示默认的内容。 异步引入组件的基本使用&#xff1a; 异步引入组件&#xff1a; import { defineAsyncComponent } from vue; const Child defineAsyncComponen…

没有电脑也不用担心,在Android设备上也可以轻松使用ppt

PowerPoint是制作幻灯片的好工具&#xff0c;无论是工作、学校还是个人使用。但有时你无法使用电脑或笔记本电脑&#xff0c;你必须在旅途中做演示。 这就是PowerPoint for Android派上用场的地方。它允许你在移动设备上创建、编辑和呈现幻灯片。以下是要遵循的步骤&#xff1…

【单例模式】饿汉式,懒汉式?JAVA如何实现单例?线程安全吗?

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 单例设计模式 Java单例设计模式 Java单例设计模…

031-从零搭建微服务-监控中心(一)

写在最前 如果这个项目让你有所收获&#xff0c;记得 Star 关注哦&#xff0c;这对我是非常不错的鼓励与支持。 源码地址&#xff08;后端&#xff09;&#xff1a;mingyue: &#x1f389; 基于 Spring Boot、Spring Cloud & Alibaba 的分布式微服务架构基础服务中心 源…

KMS在腾讯云的微服务实践助力其降本50%

背景介绍 KMS 是一家日本的游戏公司&#xff0c;主要经营游戏业务、数字漫画业务、广告业务、云解决方案业务等&#xff0c;出品了多款在日本畅销的漫画风游戏&#xff0c;同时有网络漫画专业厂牌&#xff0c;以内容创作为目标&#xff0c;拥有原创 IP 创作、游戏开发等多元化发…

第三篇:实践篇 《使用Assembler 实现图片任意切割功能》

实现原理&#xff1a; 共用一个texture、material、渲染状态等。紧通过修改vertex、uvs、indexes数据即可实现任意切割功能。 一、线段分割多边形&#xff0c;并分散多边形 线段分割多边形 已知多边形points&#xff0c;线段sp、ep。线段分割多边形得到两个多边形。 publi…

竞赛选题 深度学习人体跌倒检测 -yolo 机器视觉 opencv python

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的人体跌倒检测算法研究与实现 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满…

oracle,CLOB转XML内存不足,ORA-27163: out of memory ORA-06512: at “SYS.XMLTYPE“,

通过kettle采集数据时&#xff0c;表输入的组件&#xff0c;查询报错。 ORA-27163: out of memory ORA-06512: at “SYS.XMLTYPE”, line 272 ORA-06512: at line 1 通过 ALTER SESSION SET EVENTS ‘31156 trace name context forever, level 0x400’; 修改会话配置 或直接修改…

网络协议--广播和多播

12.1 引言 在第1章中我们提到有三种IP地址&#xff1a;单播地址、广播地址和多播地址。本章将更详细地介绍广播和多播。 广播和多播仅应用于UDP&#xff0c;它们对需将报文同时传往多个接收者的应用来说十分重要。TCP是一个面向连接的协议&#xff0c;它意味着分别运行于两主…

安卓开发实例:方向传感器

调用手机的方向传感器&#xff0c;X轴&#xff0c;Y轴&#xff0c;Z轴的数值 activity_sensor.xml <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayoutxmlns:android"http://schemas.android.c…

结构伪类选择器

伪类选择器&#xff1a;用来描述一个元素的特殊状态&#xff01;比如第一个元素、某个元素的子元素、鼠标点击的元素 1 first-child/last-child /*ul的第一个子元素*/ ul li:first-child{ background: #0f35ad; } /*ul的最后一个子元素*/ ul li:last-child{ background: #0f3…