网站下载工具北京网站建设制作公司
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>