Fabric.js是一个用于HTML5 canvas元素的javascript库，它可以让你创建、控制和操作canvas对象。Fabric.js提供了一些基本对象，如矩形、圆形、文本等，还可以添加自定义的对象。
以下是一些Fabric.js的常用示例：
- 创建一个矩形：
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
- 创建一个圆形：
var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
radius: 20,
fill: 'green',
left: 100,
top: 100
});
canvas.add(circle);
- 添加文本：
var canvas = new fabric.Canvas('c');
var text = new fabric.Text('Hello World', {
left: 100,
top: 100,
fontSize: 20
});
canvas.add(text);
- 添加图片：
var canvas = new fabric.Canvas('c');
fabric.Image.fromURL('my_image.png', function(img) {
img.set({ left: 100, top: 100, width: 200, height: 200 });
canvas.add(img);
});
- 设置对象的交互性：
var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
radius: 20,
fill: 'green',
left: 100,
top: 100
});
circle.hasControls = true;
circle.hasBorders = true;
canvas.add(circle);
- 设置对象的选择边框：
var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
radius: 20,
fill: 'green',
left: 100,
top: 100
});
circle.hasControls = true;
circle.hasBorders = true;
canvas.add(circle);
canvas.setActiveObject(circle);
- 移动对象：
var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
radius: 20,
fill: 'green',
left: 100,
top: 100
});
canvas.add(circle);
circle.set({ left: 200, top: 200 });
canvas.renderAll();
- 缩放对象：
var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
radius: 20,
fill: 'green',
left: 100,
top: 100
});
canvas.add(circle);
circle.set({ scaleX: 2, scaleY: 2 });
canvas.renderAll();
- 旋转对象：
var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
radius: 20,
fill: 'green',
left: 100,
top: 100
});
canvas.add(circle);
circle.set({ angle: 45 });
canvas.renderAll();
- 删除对象：
var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
radius: 20,
fill: 'green',
left: 100,
top: 1