Question

我需要能够绘制面料。使用面料的freeDrawingBrush绘制路径，并与鼠标击中画布的位置有一定偏移。

例如：如果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);
   }
 }
}

它仅适用于第一个绘制的路径。

Answer 1

我自己找到了解决方案。首先，我像通常使用canvas.freeDrawingBrush.color = 'transparent';

一样绘制一条路径

然后在画布事件中：

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();       
}

就是这样，新路径将准确显示在您想要的位置。

如何释放具有一定偏移量的fabric.Path？

1 个答案: