Question

我正在尝试在Fabric Js的上下文中创建自定义绘图工具。自定义，我的意思是将其应用于每个绘制的自由行自定义属性例如：
1）-创建对象的ID；
2）-谁创建的；
3）-创建时间
4）-何时更新
5）-等

对于画布中的其他一些元素，这更容易一些，例如用于圆形，矩形，三角形
示例（打字稿，Angular代码）：

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 and Pencil则更为复杂，因为将画布的“ isDrawingMode” 属性（this.canvas.isDrawingMode = true;）设置为“ true” 我们已经创建了一个对象，Fabric在幕后将附加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处理以及更新该Class的新创建实例。

先谢谢您。这是非常重要的主题，因为许多人都以最适当的方式尝试相同的行为！

基于 freeDrawingBrush 的覆盖鼠标事件的答案，包括this.createdBy ='some user id'和其他自定义属性。实际上，这些属性应用于类，但不应用于创建的实例。目标是创建的每个画笔对象，在选择时保留其自己的属性（它自己的ID，创建者ID等）。鼠标处理程序中提供的答案“此” 是：

但是在选择时，同一元素没有这些属性：

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>

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

1 个答案: