Fabric.js 绘制图形 API 完全指南

Fabric.js 是一个用于在网页上绘制图形、文本、图片的 JavaScript 库。以下是使用 Fabric.js 绘制不同图形的示例代码：

// 引入Fabric.js库
fabric.isLikelyNode = typeof process !== 'undefined';
if (fabric.isLikelyNode) {
  fabric = global.fabric || require('fabric').fabric;
} else {
  fabric = window.fabric;
}
 
// 创建一个新的Canvas实例
var canvas = new fabric.Canvas('c');
 
// 绘制一个矩形
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'blue'
});
canvas.add(rect);
 
// 绘制一个圆形
var circle = new fabric.Circle({
  radius: 25,
  left: 150,
  top: 150,
  fill: 'green'
});
canvas.add(circle);
 
// 绘制一条直线
var line = new fabric.Line([100, 200, 200, 100], {
  fill: 'black',
  stroke: 'red',
  strokeWidth: 3
});
canvas.add(line);
 
// 绘制一个三角形
var triangle = new fabric.Triangle({
  width: 100,
  height: 100,
  left: 300,
  top: 50,
  fill: 'yellow'
});
canvas.add(triangle);
 
// 绘制一个文本
var text = new fabric.Text('Hello Fabric!', {
  left: 150,
  top: 200,
  fontSize: 40,
  fill: 'purple'
});
canvas.add(text);
 
// 绘制一个图像
fabric.Image.fromURL('https://example.com/image.png', function(img) {
  img.set({
    left: 50,
    top: 50,
    width: 100,
    height: 100
  });
  canvas.add(img);
});

这段代码展示了如何使用 Fabric.js 绘制矩形、圆形、直线、三角形、文本和图像。每个图形都可以通过设置不同的属性来定制样式和位置。通过这个指南，开发者可以快速了解并使用 Fabric.js 的绘图功能。