Пользовательский инструмент для рисования с пользовательскими свойствами в Fabric Js - PullRequest
Новая
       14

Пользовательский инструмент для рисования с пользовательскими свойствами в Fabric Js

0 голосов
/ 09 октября 2018

Я пытаюсь создать собственный инструмент для рисования в контексте Fabric Js.Под пользовательским я подразумеваю применить к каждой нарисованной свободной линии пользовательские свойства например:
1) - идентификатор созданного объекта;
2) - кто его создал;
3) - когда создается
4) - когда обновляется
5) - и т. Д.

Для некоторых других элементов холста, которые были более простыми, например, для круга, прямоугольника,Треугольник
Пример (машинопись, угловой код): 
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
}

Но для кисти и карандаша это сложнее, так как после настройки «isDrawingMode» Свойство canvas (this.canvas.isDrawingMode = true;) для «true» мы уже создали объект, который за сценой Fabric подключает обработчики событий mousedown, mousemove и mouseup.В случае mouseup "mouseup" событие 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 = 'некоторый идентификатор пользователя' и включения других пользовательских свойств.Фактически эти свойства применяются к классу, но не к созданному экземпляру.Цель - каждый созданный объект кисти , при выделении для хранения своих собственных свойств (своего собственного идентификатора, идентификатора создателя и т. Д.) С предоставленным ответом "this" в обработчике мышиis:
enter image description here

Но при выделении тот же элемент не обладает этими свойствами:
enter image description here

1 Ответ

0 голосов
/ 09 октября 2018

Переопределить обработчики мыши 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>
...