javascript - 使用 Fabric js 在 Canvas 上绘制圆形和矩形

Question

我正在尝试绘制三个形状。使用三个独立的函数。

1. 行
2. 圆圈
3. 矩形

三个功能都运行良好。但是如果我想画一条线并画圈(依次运行两个函数)。第一个工作正常，但第二个它将以相同的协调方式绘制第一个和第二个。并且它会重复。有没有办法一次绘制一个形状。

var canvas = new fabric.Canvas('canvas1', {
  selection: false
});

var line, isDown;


function myFun() {
  canvas.on('mouse:down', function(o) {
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    var points = [pointer.x, pointer.y, pointer.x, pointer.y];
    line = new fabric.Line(points, {
      strokeWidth: 20,
      fill: '#07ff11a3',
      stroke: '#07ff11a3',
      originX: 'center',
      originY: 'center'
    });
    canvas.add(line);
  });
}
canvas.on('mouse:move', function(o) {
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  line.set({
    x2: pointer.x,
    y2: pointer.y
  });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o) {
  isDown = false;
});

function drawcle() {

  var circle, isDown, origX, origY;

  canvas.on('mouse:down', function(o) {
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    circle = new fabric.Circle({
      left: pointer.x,
      top: pointer.y,
      radius: 1,
      strokeWidth: 2,
      stroke: 'red',
      fill: 'White',
      selectable: false,
      originX: 'center',
      originY: 'center'
    });
    canvas.add(circle);
  });

  canvas.on('mouse:move', function(o) {
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    circle.set({
      radius: Math.abs(origX - pointer.x)
    });
    canvas.renderAll();
  });

  canvas.on('mouse:up', function(o) {
    isDown = false;
  });

}

function drawrec() {
  var line, isDown, origX, origY;

  canvas.on('mouse:down', function(o) {
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    var pointer = canvas.getPointer(o.e);
    line = new fabric.Rect({
      left: origX,
      top: origY,
      originX: 'left',
      originY: 'top',
      width: pointer.x - origX,
      height: pointer.y - origY,
      angle: 0,
      fill: 'rgba(255,0,0,0.5)',
      transparentCorners: false
    });
    canvas.add(line);
  });

  canvas.on('mouse:move', function(o) {
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);

    if (origX > pointer.x) {
      line.set({
        left: Math.abs(pointer.x)
      });
    }
    if (origY > pointer.y) {
      line.set({
        top: Math.abs(pointer.y)
      });
    }

    line.set({
      width: Math.abs(origX - pointer.x)
    });
    line.set({
      height: Math.abs(origY - pointer.y)
    });


    canvas.renderAll();
  });

  canvas.on('mouse:up', function(o) {
    isDown = false;
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<div class="stamps">
  <div class="set1">

    <a class="thmb" href="#" onclick="myFun()">Line</a></br>
    <a class="thmb" href="#" onclick="drawcle()">Draw Circle</a></br>
    <a class="thmb" href="#" onclick="drawrec()">Draw Rectangle</a>


  </div>


  <div class="area">
    <div class="col" id="droppable">
      <canvas id="canvas1" width="720" height="560" style="border:1px solid #ccc"></canvas>

    </div>
  </div>
</div>

Answer 1

function removeEvents(){
 canvas.off('mouse:down');
 canvas.off('mouse:up');
 canvas.off('mouse:move');
}

您可以使用canvas.off()从 Canvas 中删除事件监听器。它正在绘制其他形状，因为它将监听器添加到 Canvas ，因此当您调用绘图函数时，从 Canvas 中删除附加的监听器，然后添加当前的监听器。

var canvas = new fabric.Canvas('canvas1', {
  selection: false
});

var line, isDown;


function drawLine() {
  removeEvents();
  canvas.on('mouse:down', function(o) {
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    var points = [pointer.x, pointer.y, pointer.x, pointer.y];
    line = new fabric.Line(points, {
      strokeWidth: 20,
      fill: '#07ff11a3',
      stroke: '#07ff11a3',
      originX: 'center',
      originY: 'center'
    });
    canvas.add(line);
  });
  canvas.on('mouse:move', function(o) {
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    line.set({
      x2: pointer.x,
      y2: pointer.y
    });
    canvas.renderAll();
  });
  canvas.on('mouse:up', function(o) {
    isDown = false;
  });
}

function drawcle() {

  var circle, isDown, origX, origY;
  removeEvents();
  canvas.on('mouse:down', function(o) {
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    circle = new fabric.Circle({
      left: pointer.x,
      top: pointer.y,
      radius: 1,
      strokeWidth: 2,
      stroke: 'red',
      fill: 'White',
      selectable: false,
      originX: 'center',
      originY: 'center'
    });
    canvas.add(circle);
  });

  canvas.on('mouse:move', function(o) {
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    circle.set({
      radius: Math.abs(origX - pointer.x)
    });
    canvas.renderAll();
  });

  canvas.on('mouse:up', function(o) {
    isDown = false;
  });

}

function drawrec() {
  var rect, isDown, origX, origY;
  removeEvents();
  canvas.on('mouse:down', function(o) {
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    var pointer = canvas.getPointer(o.e);
    rect = new fabric.Rect({
      left: origX,
      top: origY,
      originX: 'left',
      originY: 'top',
      width: pointer.x - origX,
      height: pointer.y - origY,
      angle: 0,
      fill: 'rgba(255,0,0,0.5)',
      transparentCorners: false
    });
    canvas.add(rect);
  });

  canvas.on('mouse:move', function(o) {
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);

    if (origX > pointer.x) {
      rect.set({
        left: Math.abs(pointer.x)
      });
    }
    if (origY > pointer.y) {
      rect.set({
        top: Math.abs(pointer.y)
      });
    }

    rect.set({
      width: Math.abs(origX - pointer.x)
    });
    rect.set({
      height: Math.abs(origY - pointer.y)
    });


    canvas.renderAll();
  });

  canvas.on('mouse:up', function(o) {
    isDown = false;
  });
}

function removeEvents(){
 canvas.off('mouse:down');
 canvas.off('mouse:up');
 canvas.off('mouse:move');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<div class="stamps">
  <div class="set1">

    <a class="thmb" href="#" onclick="drawLine()">Line</a></br>
    <a class="thmb" href="#" onclick="drawcle()">Draw Circle</a></br>
    <a class="thmb" href="#" onclick="drawrec()">Draw Rectangle</a>


  </div>


  <div class="area">
    <div class="col" id="droppable">
      <canvas id="canvas1" width="720" height="560" style="border:1px solid #ccc"></canvas>

    </div>
  </div>
</div>