fabric.BaseBrush，你可以实现各种绘图工具，例如自由绘图、直线、矩形、圆形等。
- 内置了一些基于 fabric.BaseBrush 的画笔工具，例如：
fabric.PencilBrush：自由绘图工具。
fabric.CircleBrush：圆形绘图工具。
fabric.SprayBrush：喷枪工具。
fabric.PatternBrush：图案画笔工具。- 自定义的绘图工具，可以通过扩展fabric.BaseBrush 来实现。
fabric.BaseBrush 提供了一些核心方法，用于实现绘图工具的逻辑：
initialize(canvas, options)：初始化画笔工具。
onMouseDown(pointer)：鼠标按下时触发。
onMouseMove(pointer)：鼠标移动时触发。
onMouseUp()：鼠标释放时触发。
createPath(pathData)：创建路径对象（用于自由绘图工具）。
setBrushStyles()：设置画笔样式（颜色、宽度等）。- 自定义画笔工具-通过以下属性自定义画笔工具的样式：
color：画笔颜色。
width：画笔宽度。
opacity：画笔透明度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fabric.js 自定义画笔工具</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" width="1920" height="1080" style="border: 1px solid #000;"></canvas>
<script>
// 通过继承 fabric.BaseBrush 实现一个自定义的自由绘图工具
// 自定义画笔工具-自由绘图工具可以通过记录鼠标移动的路径来实现。
const CustomBrush = fabric.util.createClass(fabric.BaseBrush, {
initialize: function (canvas, options) {
this.callSuper('initialize', canvas, options);
this.points = []; // 存储绘图点
},
// 鼠标按下时触发
onMouseDown: function (pointer) {
this.points = [pointer]; // 记录起始点
this.setBrushStyles(); // 设置画笔样式
},
// 鼠标移动时触发
onMouseMove: function (pointer) {
this.points.push(pointer); // 记录移动点
this._render(); // 渲染路径
},
// 鼠标释放时触发
onMouseUp: function () {
if (this.points.length > 1) {
const path = this.createPath(this.points); // 创建路径对象
this.canvas.add(path); // 将路径添加到画布
}
this.points = []; // 清空点
},
// 创建路径对象
createPath: function (points) {
const pathData = points.map((point, index) => {
return (index === 0 ? 'M' : 'L') + point.x + ' ' + point.y;
}).join(' ');
return new fabric.Path(pathData, {
stroke: this.color,
strokeWidth: this.width,
fill: null,
selectable: false
});
},
// 渲染路径
_render: function () {
const ctx = this.canvas.getContext('2d');
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ctx.beginPath();
this.points.forEach((point, index) => {
if (index === 0) {
ctx.moveTo(point.x, point.y);
} else {
ctx.lineTo(point.x, point.y);
}
});
ctx.strokeStyle = this.color;
ctx.lineWidth = this.width;
ctx.stroke();
}
});
// 1.直线工具通过记录起点和终点来绘制直线。
// const LineBrush = fabric.util.createClass(fabric.BaseBrush, {
// initialize: function (canvas, options) {
// this.callSuper('initialize', canvas, options);
// this.startPoint = null;
// },
// onMouseDown: function (pointer) {
// this.startPoint = pointer;
// this.setBrushStyles();
// },
// onMouseMove: function (pointer) {
// if (!this.startPoint) return;
// this._render(pointer);
// },
// onMouseUp: function () {
// if (this.startPoint) {
// const line = new fabric.Line([
// this.startPoint.x, this.startPoint.y,
// this.endPoint.x, this.endPoint.y
// ], {
// stroke: this.color,
// strokeWidth: this.width,
// selectable: false
// });
// this.canvas.add(line);
// }
// this.startPoint = null;
// },
// _render: function (pointer) {
// const ctx = this.canvas.getContext('2d');
// ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// ctx.beginPath();
// ctx.moveTo(this.startPoint.x, this.startPoint.y);
// ctx.lineTo(pointer.x, pointer.y);
// ctx.strokeStyle = this.color;
// ctx.lineWidth = this.width;
// ctx.stroke();
// this.endPoint = pointer;
// }
// });
// 2.矩形工具通过记录起点和终点来绘制矩形。
// const RectBrush = fabric.util.createClass(fabric.BaseBrush, {
// initialize: function (canvas, options) {
// this.callSuper('initialize', canvas, options);
// this.startPoint = null;
// },
// onMouseDown: function (pointer) {
// this.startPoint = pointer;
// this.setBrushStyles();
// },
// onMouseMove: function (pointer) {
// if (!this.startPoint) return;
// this._render(pointer);
// },
// onMouseUp: function () {
// if (this.startPoint) {
// const rect = new fabric.Rect({
// left: this.startPoint.x,
// top: this.startPoint.y,
// width: this.endPoint.x - this.startPoint.x,
// height: this.endPoint.y - this.startPoint.y,
// stroke: this.color,
// strokeWidth: this.width,
// fill: null,
// selectable: false
// });
// this.canvas.add(rect);
// }
// this.startPoint = null;
// },
// _render: function (pointer) {
// const ctx = this.canvas.getContext('2d');
// ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// ctx.strokeStyle = this.color;
// ctx.lineWidth = this.width;
// ctx.strokeRect(
// this.startPoint.x,
// this.startPoint.y,
// pointer.x - this.startPoint.x,
// pointer.y - this.startPoint.y
// );
// this.endPoint = pointer;
// }
// });
// 3.圆形工具
// const CircleBrush = fabric.util.createClass(fabric.BaseBrush, {
// initialize: function (canvas, options) {
// this.callSuper('initialize', canvas, options);
// this.startPoint = null;
// },
// onMouseDown: function (pointer) {
// this.startPoint = pointer;
// this.setBrushStyles();
// },
// onMouseMove: function (pointer) {
// if (!this.startPoint) return;
// this._render(pointer);
// },
// onMouseUp: function () {
// if (this.startPoint) {
// const radius = Math.sqrt(
// Math.pow(this.endPoint.x - this.startPoint.x, 2) +
// Math.pow(this.endPoint.y - this.startPoint.y, 2)
// );
// const circle = new fabric.Circle({
// left: this.startPoint.x,
// top: this.startPoint.y,
// radius: radius,
// stroke: this.color,
// strokeWidth: this.width,
// fill: null,
// selectable: false
// });
// this.canvas.add(circle);
// }
// this.startPoint = null;
// },
// _render: function (pointer) {
// const ctx = this.canvas.getContext('2d');
// ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// ctx.beginPath();
// const radius = Math.sqrt(
// Math.pow(pointer.x - this.startPoint.x, 2) +
// Math.pow(pointer.y - this.startPoint.y, 2)
// );
// ctx.arc(this.startPoint.x, this.startPoint.y, radius, 0, Math.PI * 2);
// ctx.strokeStyle = this.color;
// ctx.lineWidth = this.width;
// ctx.stroke();
// this.endPoint = pointer;
// }
// });
// 初始化画布
const canvas = new fabric.Canvas('canvas');
// 使用自定义画笔工具
// const customBrush = new CustomBrush(canvas);
// canvas.freeDrawingBrush = customBrush; // 设置为当前画笔工具
// canvas.freeDrawingBrush.color = 'blue'; // 设置画笔颜色
// canvas.freeDrawingBrush.width = 5; // 设置画笔宽度
// canvas.isDrawingMode = true; // 启用绘图模式
// 一、使用fabric.PencilBrush自定义画笔工具
const customBrush = new CustomBrush(canvas);
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
canvas.freeDrawingBrush.color = 'blue'; // 设置画笔颜色
canvas.freeDrawingBrush.width = 2; // 设置画笔宽度
canvas.isDrawingMode = true; // 启用绘图模式
// 二、使用 fabric.CircleBrush（圆形绘图工具）
// canvas.freeDrawingBrush = new fabric.CircleBrush(canvas);
// canvas.freeDrawingBrush.color = 'red'; // 设置画笔颜色
// canvas.freeDrawingBrush.width = 10; // 设置画笔宽度
// canvas.isDrawingMode = true; // 启用绘图模式
// 1.使用直线工具
// const customBrush = new LineBrush(canvas);
// canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
// canvas.freeDrawingBrush.color = 'red'; // 设置画笔颜色
// canvas.freeDrawingBrush.width = 3; // 设置画笔宽度
// canvas.isDrawingMode = true; // 启用绘图模式
// 2.矩形工具
// const customBrush = new RectBrush(canvas);
// canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
// canvas.freeDrawingBrush.color = 'green'; // 设置画笔颜色
// canvas.freeDrawingBrush.width = 2; // 设置画笔宽度
// canvas.isDrawingMode = true; // 启用绘图模式
// 3.圆形工具
// canvas.freeDrawingBrush = new CircleBrush(canvas);
// canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
// canvas.freeDrawingBrush.color = 'green'; // 设置画笔颜色
// canvas.freeDrawingBrush.width = 2; // 设置画笔宽度
// canvas.isDrawingMode = true; // 启用绘图模式
</script>
</body>
</html>