Fabric.js 906 浏览 21 文章

Fabric.js是一款轻量、开源的HTML5 Canvas图形库，以简洁API简化Canvas开发，支持跨浏览器兼容（Chrome、Firefox、Safari等）。它封装了复杂的Canvas底层操作，提供拖拽、缩放、旋转、编组等基础交互，内置矩形、圆形、路径、文本等原生图形对象，还支持自定义图形…

v5 的重大变更

首先，目前支持的最低 Node 版本是 14。JSDOM 可以与 12 版本兼容，这也是我们做出更改的原因，但我们觉得至少应该支持 14 版本。fabricJS 4.x 中保留了一些已弃用的方法和函数，以保持向后兼容性。 圆的起始角和结束角 让我们从最糟糕的变化开始：为了保持一致性，现在 Circl…

2026-07-04 266 浏览 0 评论

Fabric.js 隐藏图层 toDataURL 导出空白彻底解决

在基于 Fabric.js 开发在线画布编辑器、图片设计、图层合成、电子签章等项目时，绝大多数开发者都会遇到一个高频棘手问题： 画布中存在隐藏图层（设置 visible: false）时，调用 toDataURL 导出图片会出现空白、透明空图、无内容的情况 。 很多同学尝试修改画布背景、调整渲染时机…

2026-07-18 140 浏览 0 评论

Fabric.js 图层点击穿透实现方法 添加水印/背景

在前端开发中，使用 Fabric.js 进行画布开发时，经常会遇到图层遮挡导致下层对象无法响应鼠标事件的问题，也就是我们常说的 点击穿透 需求。无论是做背景层、水印层、遮罩层，还是需要实现像素级的精准交互，掌握 Fabric.js 的点击穿透技巧都能大幅提升开发效率。作为一名全栈开发，结合日常项目实…

2026-07-10 143 浏览 0 评论

Fabric.js 中 mouse:up 绑定多个监听器，都会执行吗？

在 Fabric.js 开发过程中，不少前端开发者（尤其是全栈开发中负责前端可视化模块的同学）会遇到一个常见疑问：给 canvas 的 mouse:up 事件定义多个监听器，这些监听器都会执行吗？毕竟在实际项目中，我们常常需要给同一个鼠标事件绑定多个处理逻辑，比如同时处理元素选中、数据同步、视图更新…

2026-04-26 277 浏览 0 评论

Fabric.js 示例：与画布外的对象交互

现在的网页，很少再使用传统的模式开发了，一般都是使用 Vue 等前端框架开发，提高了开发速度，但是如何与 Fabric.js​ 如何交互和操作是个问题，下面是一个简单的示例： <template> <div class="groups"> <canvas id="can…

2026-03-07 337 浏览 0 评论

Fabric.js 示例：自定义控件、多边形

该 demo 演示了如何使用控件 api 进行更改多边形形状的操作。由于需要了解内部多边形逻辑，定位点和转换，因此通常很难把握。在 demo 中，画布具有缩放和平移功能，因此我们确定我们的代码足够通用。出于相同的原因，多边形也被赋予了较大的 strokeWidth。 我们具有触发编辑模式的功能。当进…

2026-03-06 176 浏览 0 评论

Fabric.js 对象缓存

How does it work? 它是如何工作的？ 当 fabric 对象缓存处于活动状态时，在画布上绘制的对象实际上是在另一个较小的屏幕外画布上预先绘制的，与对象像素维度本身一样大。在“render”方法中，通过“drawImage”操作将预绘制的…

2026-03-04 236 浏览 0 评论

FabricJS 的缺陷

这个页面包含了第一次接触 FabricJS 的人打开的最常见问题的列表。这些缺陷的产生，既有解释不清的原因，也有文档不完善的原因。在这里，我们试图解决共同的问题。 Objects are no more selectable - setCoords 对象不再是可选择的-setCoords Fabri…

2026-03-07 392 浏览 0 评论

自定义控件 API

这个 api 是针对 Fabric JS 4.0 的，api 和文本目前处于测试阶段。为了使命名和选项尽可能简单，在发布之前可能会发生一些小的变化。 Introduction 此 API​ 允许开发人员创建自己的自定义控件，而不必对标准 fabricJS 控件方法使用重写。这使得自定义支持，容易，并…

2026-03-06 369 浏览 0 评论

Part 8：裁切 和 ClipPath 裁切路径

ClipPaths basics The new clipPath property 新的 clipPath 属性 在 2.4.0 中，我们为所有对象引入了 clipPath 属性。 ClipPath 将替换 clipTo:funcion(){} ，以实现相同的灵活性，但具有更好的兼容性。 Clip…

2026-03-05 402 浏览 0 评论

推荐文章

热门标签

SSH MaxStartups GTK 负边距 流程图 模态窗口 yum 子查询 sticky 定位 $slots Vue.js

本文目录