本文介绍了Fabric.js中关键的操作技巧，包括获取与设置画布对象属性、对象的层级管理、对象移动与放大的边界限制、图片加载及缩放、背景图片处理、蒙版设置等，帮助开发者更好地掌握此Canvas插件。
摘要生成于
，由 DeepSeek-R1 满血版支持，
var
items = canvas.getObjects();
tems[
0
].id =
"items_id0"
或 items[
0
].set(
"id"
,
"items_id0"
)
var
items = canvas.getObjects();
items[
0
].id;
items[
0
].get(
"id"
);
canvas.renderAll()
canvas.clear();
var
t = canvas.getActiveObject();
t && canvas.remove(t);
var
t = canvas.getActiveObject();
canvas.sendBackwards(t)
canvas.sendToBack(t)
canvas.bringForward(t)
canvas.bringToFront(t)
t.sendBackwards();
t.sendToBack();
t.bringForward();
t.bringToFront();
fabric.Image.fromURL(image_src,
function
(oImg)
{
oImg.set({
left:tmp_left,
top:tmp_top,
centeredScaling:
true
,
cornerSize:
7
,
cornerColor:
"#9cb8ee"
,
transparentCorners:
false
,
oImg.scaleToWidth(image_width);
oImg.scaleToHeight(image_height);
canvas.add(oImg).setActiveObject(oImg);
canvas.preserveObjectStacking =
true
;
var
bg_url =
"http://www.xxxx.com/...../bg.png"
fabric.Image.fromURL( bg_url ,
function
(oImg)
{
oImg.set({
width: canvas_obj.width,
height: canvas_obj.height,
originX:
'left'
,
originY:
'top'
canvas_obj.setBackgroundImage(oImg, canvas_obj.renderAll.bind(canvas_obj));
function
objectMoving
(e)
{
var
obj = e.target;
if
(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
return
;
obj.setCoords();
if
(obj.getBoundingRect().top <
0
|| obj.getBoundingRect().left <
0
){
obj.top =
Math
.max(obj.top, obj.top-obj.getBoundingRect().top);
obj.left =
Math
.max(obj.left, obj.left-obj.getBoundingRect().left);
if
(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height
|| obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){
obj.top =
Math
.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
obj.left =
Math
.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
obj.saveState();
function
objectModified
(e)
{
let
obj = e.target;
let
boundingRect = obj.getBoundingRect(
true
);
if
(boundingRect.left <
0
|| boundingRect.top <
0
|| boundingRect.left + boundingRect.width > obj.canvas.getWidth()
|| boundingRect.top + boundingRect.height > obj.canvas.getHeight()) {
obj.top = obj._stateProperties.top;
obj.left = obj._stateProperties.left;
obj.angle = obj._stateProperties.angle;
obj.scaleX = obj._stateProperties.scaleX;
obj.scaleY = obj._stateProperties.scaleY;
obj.setCoords();
obj.saveState();
}
else
{
obj.saveState();
fabric.Image.fromURL( bgImg,
function
(oImg)
{
oImg.set({
width:
400
,
height:
400
,
left:
0
,
top:
0
,
originX:
'left'
,
originY:
'top'
,
opacity:
0
oImg.toObject = (
function
(toObject)
{
return
function
()
{
return
fabric.util.object.extend(toObject.call(
this
), {
opacity:
1
})(oImg.toObject);
canvas_obj.setBackgroundImage(oImg, canvas_obj.renderAll.bind(canvas_obj));
}, { crossOrigin:
'Anonymous'
});
var
maskLayerTop =
parseInt
($(
this
).attr(
"data-top"
));
var
maskLayerLeft =
parseInt
($(
this
).attr(
"data-left"
));
var
maskLayerWidth =
parseInt
($(
this
).attr(
"data-width"
));
var
maskLayerHeight =
parseInt
($(
this
).attr(
"data-height"
));
var
clipMask =
new
fabric.Rect({
originX:
'left'
,
originY:
'top'
,
left: maskLayerLeft,
top: maskLayerTop,
width: maskLayerWidth,
height: maskLayerHeight,
fill:
'rgba(0,0,0,0)'
,
strokeWidth:
0
,
selectable:
false
clipMask.set({
clipFor:
'pug'
canvas_obj.add(clipMask);
function
degToRad
(degrees)
{
return
degrees * (
Math
.PI /
180
);
function
findByClipName
(name)
{
return
_(canvas_obj.getObjects()).where({
clipFor: name
}).first()
canvas_obj.clipByName =
function
(ctx)
{
this
.setCoords();
var
clipObj = findByClipName(
this
.clipName);
var
scaleXTo1 = (
1
/
this
.scaleX);
var
scaleYTo1 = (
1
/
this
.scaleY);
var
skewXReverse = -
this
.skewX;
var
skewYReverse = -
this
.skewY;
ctx.save();
var
ctxLeft = -(
this
.width /
2
) + clipObj.strokeWidth;
var
ctxTop = -(
this
.height /
2
) + clipObj.strokeWidth;
var
ctxWidth = clipObj.width - clipObj.strokeWidth;
var
ctxHeight = clipObj.height - clipObj.strokeWidth;
ctx.translate( ctxLeft, ctxTop );
ctx.scale(scaleXTo1, scaleYTo1);
ctx.transform(
1
, skewXReverse, skewYReverse,
1
,
0
,
0
);
ctx.rotate(degToRad(
this
.angle * -
1
));
ctx.beginPath();
ctx.rect(
clipObj.left -
this
.oCoords.tl.x,
clipObj.top -
this
.oCoords.tl.y,
clipObj.width,
clipObj.height
ctx.closePath();
ctx.restore();
var
t =
new
fabric.Text(
"Your Text"
, {
id: first_level+
"-text-input"
+unique_id,
cornerSize:
7
,
cornerColor:
"#9cb8ee"
,
transparentCorners:
false
,
textAlign:
"center"
,
clipName:
'pug'
,
clipTo:
function
(ctx)
{
return
_.bind(tmp_canvas_obj.clipByName, t)(ctx)
fabric.Image.fromURL(image_src,
function
(oImg)
{
oImg.set({
id:first_level+
"-image-input"
+unique_id,
left:tmp_left,
top:tmp_top,
centeredScaling:
true
,
cornerSize:
7
,
cornerColor:
"#9cb8ee"
,
transparentCorners:
false
,
clipName:
'pug'
,
clipTo:
function
(ctx)
{
return
_.bind(tmp_canvas_obj.clipByName, oImg)(ctx)
oImg.scaleToWidth(image_width);
oImg.scaleToHeight(image_height);
oImg.toObject = (
function
(toObject)
{
return
function
()
{
return
fabric.util.object.extend(toObject.call(
this
), {
id:
this
.id,
})(oImg.toObject);
oImg.id = first_level+
"-image-input"
+unique_id;
oImg.saveState();
tmp_canvas_obj.add(oImg).setActiveObject(oImg);
}, { crossOrigin:
'Anonymous'
});
tmp_canvas_obj.renderAll();
Fabric
.
js
Fabric
.
js
是一个易于使用HTML5 canvas元素的框架。 它是画布元素顶部的交互式对象模型。 它也是SVG画布解析器。
使用
Fabric
.
js
，您可以在画布上创建和填充对象。 对象，例如简单的几何形状-矩形，圆形，椭圆形，多边形，或更复杂的形状，包含数百或数千个简单路径。 然后，您可以使用鼠标缩放，移动和旋转这些对象。 修改它们的属性-颜色，透明度，z-index等。您还可以一起操纵这些对象-通过简单的鼠标选择将它们分组。
面料非技术介绍
Fabric
.
js
允许您使用JavaScript在网页上HTML <canvas>元素上轻松创建简单的形状，例如矩形，圆形，三角形和其他多边形，或者由许多路径组成的更复杂的形状。 然后，
Fabric
.
js
将允许您使用鼠标来操纵这些对象的大小，位置和旋转。 也可以使用
Fabric
.
js
库更改这些对象的某些属性，例如它们的
Fabric
.
js
是什么
Fabric
.
js
是一个简化HTML5 Canvas开发的Javascript库，
Fabric
.
js
提供了HTML5 Canvas本身缺失的对象模型、交互层、SVG解析器以及其他一整套工具。它是一个完全开源的项目，在MIT下获得授权，多年来一直在维护，近期要发布4
.
0版本，支持自定义controls。
Fabric
.
js
能做什么
在Canvas画布上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）。
给图形填充渐变颜色。
组合图形（包括组合图形、图形文字、图片等）。
Fabric
.
js
是一个可以简化 Canvas 程序编写的库。
Fabric
.
js
为 Canvas 提供所缺少的对象模型，svg parser，交互和一整套其他不可或缺的工具。由于
Fabric
.
js
为国外框架，官方 API 杂乱繁多，相关文档大多为英文文档，而且数量不多，所以本文旨在帮助新手在项目中快速上手
Fabric
.
js
，享受绘制Canvas的过程。
为什么要使用
Fabric
.
js
？
Canvas 提供一个好的画布能力，但是 Api 不够友好。绘制简单图形其实还可以，不过做一些复杂的图形绘
Fabric
.
js
: 动态和可交互的HTML5 Canvas库
Fabric
.
js
是一个强大的、动态的、基于对象的JavaScript库，专为在HTML5画布上构建富交互式应用而设计。它提供了一个灵活的API和友好的编程模型，使开发人员可以轻松地在Canvas上创建、操作和管理各种图形元素。
什么是
Fabric
.
js
？
Fabric
.
js
是一个轻量级的JavaScript库，用于在HTML5 &l
.
.
.
官网地址：http://
fabric
js
.
com/ git https://github
.
com/kangax/
fabric
.
js
/
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport"
.
.
.
最近项目有一个绘制的功能，搜了一圈发现
fabric
.
js
口碑不错，但是文档稀缺，于是东看看西搜搜的把项目的需求都给实现了，想分享一下。
篇幅有点长，但看完后可以轻松驾驭
fabric
。我的项目是基于VUE+webpack的。
先来看一下整体效果
1
.
安装
fabric
在node环境下安装
fabric
.
js
需要先安装
js
dom 和canvas
①安装
js
dom依赖
.
.
.
