Fabric.js 图案笔刷

这篇具有很好参考价值的文章主要介绍了Fabric.js 图案笔刷。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文简介

带尬猴,我是德育处主任


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

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

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



图案画笔(笔刷) PatternBrush

先看看效果

Fabric.js 图案笔刷


使用图案画笔

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

核心的操作有以下几步:

  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>

Fabric.js 图案笔刷

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


设置画笔大小

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

Fabric.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 监听元素相交(重叠)》


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

代码仓库文章来源地址https://www.toymoban.com/news/detail-711100.html

到了这里,关于Fabric.js 图案笔刷的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Fabric.js 元素选中状态的事件与样式

    带尬猴! 你是否在使用 Fabric.js 时希望能在选中元素后自定义元素样式或选框(控制角和辅助线)的样式? 如果是的话,可以放心往下读。 本文将手把脚和你一起过一遍 Fabric.js 在对象元素选中后常用的样式设置。 我将对象元素选中后的设置分成3类进行讲解: 控制角 辅助

    2024年02月11日
    浏览(42)
  • HTML5 2d canvas 库 —— Fabric.js 和 Konva.js

    原生 canvas 的操作主要基于上下文,需要使用者自己从0开始去实现一些基本功能,比较复杂。而 canvas 库文件则封装好了许多便利的对象,使得用户可以在比较高级的层面上进行绘制。 Fabric.js 官网:Fabric.js Javascript Canvas Library Konva.js 官网:Konva 中文文档 中文API 优点: 比较老

    2024年02月12日
    浏览(33)
  • fabric.js 实现元素拖拽、引入图片、标注交互

    by:垃圾程序员 特别鸣谢:拿只键盘出来绣花的德育处主任,他的系列文章给了我很大的帮助。该说不说,站在前人的肩膀上就是得劲。 德育处主任 - 知乎 拿只键盘出来绣花 回答数 7,获得 143 次赞同 https://www.zhihu.com/people/rabbit-svip fabric.js 是一个用于创建可交互式的 HTML5

    2024年04月12日
    浏览(40)
  • Fabric.js 拖拽顶点修改多边形形状

    我正在参加「掘金·启航计划」 戴尬猴,我是德育处主任 这次要介绍的一个demo是\\\"拖拽多边形定点修改多边形形状\\\"。 其实 Fabric.js 官网也有这个demo:Fabric.js demos · Custom controls, polygon 。但这个demo可能对于刚接触 Fabric.js 的工友来说有点过于复杂,所以本文就把该demo进一步简

    2024年02月03日
    浏览(104)
  • Fabric.js+vue 实现鼠标滚轮缩放画布+移动画布

    话不多说 直接贴代码 一、实现鼠标滚轮缩放画布 使用说明,我的canvas画布定义为 canvas,替他均不用额外设置变量。canvas = new fabric.Canvas(\\\'editorCanvas\\\', {... 二、实现鼠标按下变抓手,并可移动画布中内容 使用说明:data中定义panning: false,用来标记鼠标按下状态(是否鼠标按下)

    2024年02月09日
    浏览(51)
  • fabric.js里toDataURL后,画布内容展示不全?

    复现场景: 用fabric生成画布后,转成图片,然后直接在浏览器里打开,画布展示内容缺失 画布原图: toDataURL后链接在浏览器打开: 原因解析: base64链接太长,输入浏览器链接被截断,导致展示不全,可直接将url链接放在dom元素里测试

    2024年02月13日
    浏览(30)
  • 基于fabric.js的图片编辑器, 画布背景实现原理

    使用了element-plus提供的图片上传 el-upload 组件 图片上传支持两种元素,普通图片元素和背景图片元素,所以定义属性type进行区分 type为 Image 为普通图片, background 为背景 背景也是一张图片,使用fabric.Image创建图片元素 因为没有图片服务器所以把上传的文件转换了base64图片,作为f

    2024年02月02日
    浏览(48)
  • fabric.js 组件 图片上传裁剪并进行自定义区域标记

    目录 0. 前言 1. 安装fabric与引入 2. fabric组件的使用 3. 属性相关设置 4. 初始化加载 4. 方法 5. 全代码 利用fabric组件,实现图片上传、图片”裁剪“、自定义的区域标记一系列操作 先放一张效果图吧👇 我用的是全局引入方式,视情况调整  先放一个fabric.js API地址☞Api | Fabric中

    2024年01月22日
    浏览(86)
  • 【游戏建模模型制作技巧分享】ZBrush如何调整笔刷大小

    3D建模目前应用在多个行业,比如游戏设计、室内设计、影视设计、VR/AR等。不过不同的行业对3D技术的要求也不同,所以说不是掌握了3D建模,就可以各个行业通吃,毕竟术业有专攻,各个行业都有自己的特点,3D技术在各个行业的应用也不尽相同。 建模是创新的技术,它将

    2024年02月05日
    浏览(48)
  • 使用 pnpm + Monorepo + rollup 实现Psd、Sketch 转 json开源库, 该json支持作为fabric.js画布模板

    最近使用 pnpm + Monorepo + rollup 开源了一个工具库 tojson.js tojson.js 是一个支持解析 Psd、Sketch 转 json 的类库, 该 json 满足 fabric.js 画布渲染的数据格式. 后期也会增加 ppt、pdf 格式 为什么要使用 pnpm + Monorepo ? 不止开源了一个工具库 tojson.js, 也开源了 sketchtojson, pst-json.js 库, tojson.j

    2024年01月20日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包