Как freeDraw fabric.Path с определенным смещением к нему? - PullRequest
Новая
       17

Как freeDraw fabric.Path с определенным смещением к нему?

0 голосов
/ 03 июня 2019

Мне нужно иметь возможность рисовать ткань. Путь с использованием ткани freeDrawingBrush с определенным смещением от места, где мышь попадает на холст.

Например: if canvas.getPointer () возвращает точку p = {x: 100, y: 100}, Я хочу, чтобы ткань нарисовала эту точку на newP = {x: p.x + 20, y: p.y + 20} (или как угодно);

Я не могу заставить это работать. Я пытался в течение нескольких дней безуспешно. 

@Component({

  private Brush: any;
  private canvas:

  constructor() {
     this.Brush = fabric.util.createClass(fabric.PencilBrush, {
     type: 'myBrush',
     color: 'rgb(134, 10, 230)',
         width: 16,

     initialize: function(canvas) {
         this.callSuper('initialize', canvas);
      },                
    onMouseDown: function(pointer) {
          this.callSuper('onMouseDown', pointer);
  },
    onMouseMove: function(pointer) {
         this.callSuper('onMouseMove', pointer);
      },
  _render: function(ctx) {
     this.callSuper('_render', ctx);
     }
   });
}

ngOnInit() {
    this.canvas = new fabric.Canvas('myCanvas');

    if (this.canvas.freeDrawingBrush) {
      this.canvas.freeDrawingBrush = this.Brush;
    }
    canvas.on("mouse:down", (e) => { 
    let pointer = canvas.getPointer(),
        point = { x: pointer.x + 20, y: pointer.y + 20 };

    Brush.onMouseDown(point);
   }
 }
}

Работает только для первого нарисованного пути.

1 Ответ

0 голосов
/ 11 июня 2019

Я нашел решение сам.Во-первых, я освобождаю путь, как обычно, используя canvas.freeDrawingBrush.color = 'transparent';

Затем в событии canvas: 

canvas.on('path:created', (o) => { 
        let paths = canvas.getObjects('path').length;
        this.drawPath(o.path);
});

Я удаляю этот путь только для его перерисовки с параметрами, которые я так хочу: 

drawPath(path) {
    canvas.remove(path);

    let offsetY, offsetX, uiValue = this.uiValue;

    //you can use any value you want
    if(this.uiValue < 0){
        offsetY = path.top + 50;
        offsetX = path.left - 50;
    }
    else if(this.uiValue > 0){
        offsetY = path.top + 50;
        offsetX = path.left + 50;
    }

    path.setOptions({
        top: offsetY,
        left: offsetX,
        selectable: false,
        fill: 'transparent', //this did the trick, otherwise it will 
                             //'clipTo' instead of just drawing the path
        stroke: 'blue',
        color: 'blue',      
        globalCompositeOperation: 'destination-out'
    });

    canvas.add(path).renderAll();       
}

Вот и все, новый путь появится именно там, где вы хотите.

...