在Fabric Js中具有自定义属性的自定义绘图工具

Question

我正在尝试在Fabric Js的上下文中创建自定义绘图工具.通过自定义我的意思是应用于每个绘制的自由线自定义属性,例如:
1) - 创建对象的id;
2) - 谁创造了它;
3) - 何时创建
4) - 何时更新
5) - 等

---

对于画布中更容易的其他元素,例如Circle,Rectangle,Triangle
示例(typescript,Angular code):

---

export class Circle extends fabric.Circle implements ExtendedFabricOptions {
id: string;
createdBy: string;
editedBy: string;
createdOn: string;
updatedOn: string;

constructor(props: ICircleOptions) {
    super(props);
    this.id = props.id;
    this.createdBy = props.createdBy;
    this.editedBy = props.editedBy;
    this.createdOn = props.createdOn;
    this.updatedOn = props.updatedOn;
}
}

---

并执行代码:

onMouseDown(e: fabric.IEvent) {
const mousedownPointer: fabric.ICoords2d = {
  x: e.pointer.x,
  y: e.pointer.y
};

const object: Circle = new Circle({
  radius: 1,
  fill: this.fillColor,
  stroke: this.strokeColor,
  strokeWidth: this.strokeThickness,
  left: e.pointer.x,
  top: e.pointer.y,
  includeDefaultValues: false,
  id: this.whiteboardService.generateUUID(),
  createdBy: this.attendeeId,
  createdOn: (new Date()).getTime()
});

onMouseMove(e: fabric.IEvent, mousedownPointer: fabric.ICoords2d, object: Circle) {
    ... update Circle object here
}

onMouseUp(e: fabric.IEvent, object: Circle) {
    ... final logic here
}

---

但是对于Brush和Pencil来说更复杂,因为在将画布的"isDrawingMode"属性(this.canvas.isDrawingMode = true;)设置为"true"后,我们已经创建了一个对象,它在场景后面附着了mousedown, mousemove和mouseup事件处理程序.在mouseup "'mouseup'事件中,Fabric触发'path:created'事件,实际上将刚绘制的形状转换为真正的fabric.Path实例!"
因此,基于此信息 - 这将是使用自定义属性(id,creatdOn,UpdatedBy ...等...)绘制自定义画笔的最佳方法.从哪个对象好的我的自定义对象扩展: 例如:

export class Highlighter extends fabric.BaseBrush implements ExtendedFabricOptions {
  uuid: string;
  createdBy: string;

  constructor() {
    ...
  }
}

要么:

export class Highlighter extends fabric.Path implements ExtendedFabricOptions

并且基于扩展对象,创建它的最佳方式是:如果路径可能存在mousedown,mousemove和mouseup处理和更新该类的新创建实例的事件.

先感谢您.这是非常重要的话题,因为有很多人以最恰当的方式尝试相同的行为!

---

基于覆盖freeDrawingBrush的鼠标事件的答案,包括this.createdBy ='some user id'并包含其他自定义属性.实际上,这些属性应用于类,但不应用于创建的实例.目标是每个创建的画笔对象,在选择时保持它自己的属性(它自己的id,创建者id等等).在鼠标处理程序中提供的答案"this"是:

但在选择时,相同的元素没有这些属性:

Answer 1

覆盖 的鼠标处理程序freeDrawingBrush。如果要更改，则需要定义相同的内容canvas.freeDrawingBrush。

var canvas = new fabric.Canvas('c');
canvas.freeDrawingBrush = new fabric.CircleBrush(canvas)
canvas.isDrawingMode = 'true';
var pathId = 0;

canvas.freeDrawingBrush.onMouseDown = (function(onMouseDown) {
  return function(pointer) {
    console.log('down');
    this.createdOn = Date.now();
    onMouseDown.call(this, pointer);
  }
})(canvas.freeDrawingBrush.onMouseDown);

canvas.freeDrawingBrush.onMouseMove = (function(onMouseMove) {
  return function(pointer) {
    onMouseMove.call(this, pointer);
  }
})(canvas.freeDrawingBrush.onMouseMove);

canvas.freeDrawingBrush.onMouseUp = (function(onMouseUp) {
  return function(pointer) {
    console.log('up');
    this.updatedOn = Date.now();
    onMouseUp.call(this, pointer);
  }
})(canvas.freeDrawingBrush.onMouseUp);

canvas.on('path:created',function({path}){
  path.createdOn = canvas.freeDrawingBrush.createdOn;
  path.updatedOn = canvas.freeDrawingBrush.updatedOn;
  path.pathId = pathId++;
  console.log(path.createdOn)
  console.log(path.updatedOn)
});
function onSelect(){
  canvas.isDrawingMode = false;
  canvas.selection = true;
}
function onDrawing(){
  canvas.isDrawingMode = true;
  canvas.selection = false;
}
canvas.on('object:selected',function(options){
console.log(options.target)
})

canvas{
  border:1px solid;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onClick='onSelect()'>select</button>
<button onClick='onDrawing()'>drawing</button>
<canvas id='c' width=300 height=300>