javascript - 将每个对象的 X,Y 坐标获取到 Fabric.js 中的数组中

Question

我使用 Fabric js 开发了一个小型应用程序。在该应用程序中，我在 Canvas 上绘制直线、矩形和圆形。还有一个印章部分，可以将图像拖放到 Canvas 上。我想获取每个对象的 X、Y 坐标，并且在图章部分中我需要获取该图像的 X、Y 坐标和宽度高度。我需要将这些值获取到一个数组。

function initCanvas() {
  $('.canvas-container').each(function(index) {

    var canvasContainer = $(this)[0];
    var canvasObject = $("canvas", this)[0];

    var imageOffsetX, imageOffsetY;

    function handleDragStart(e) {
      [].forEach.call(images, function(img) {
        img.classList.remove('img_dragging');
      });
      this.classList.add('img_dragging');
      var imageOffset = $(this).offset();
      imageOffsetX = e.clientX - imageOffset.left;
      imageOffsetY = e.clientY - imageOffset.top;
    }

    function handleDragOver(e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
      e.dataTransfer.dropEffect = 'copy';
      return false;
    }

    function handleDragEnter(e) {
      this.classList.add('over');
    }

    function handleDragLeave(e) {
      this.classList.remove('over');
    }

    function handleDrop(e) {
      e = e || window.event;
      if (e.preventDefault) {
        e.preventDefault();
      }
      if (e.stopPropagation) {
        e.stopPropagation();
      }
      var img = document.querySelector('.furniture img.img_dragging');
      console.log('event: ', e);

      var offset = $(canvasObject).offset();
      var y = e.clientY - (offset.top + imageOffsetY);
      var x = e.clientX - (offset.left + imageOffsetX);

      var newImage = new fabric.Image(img, {
        width: img.width,
        height: img.height,
        left: x,
        top: y
      });
      canvas.add(newImage);
      return false;
    }

    function handleDragEnd(e) {
      [].forEach.call(images, function(img) {
        img.classList.remove('img_dragging');
      });
    }

    var images = document.querySelectorAll('.furniture img');
    [].forEach.call(images, function(img) {
      img.addEventListener('dragstart', handleDragStart, false);
      img.addEventListener('dragend', handleDragEnd, false);
    });
    canvasContainer.addEventListener('dragenter', handleDragEnter, false);
    canvasContainer.addEventListener('dragover', handleDragOver, false);
    canvasContainer.addEventListener('dragleave', handleDragLeave, false);
    canvasContainer.addEventListener('drop', handleDrop, false);
  });
}
initCanvas();

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

var line, isDown;

function drawLine() {
  removeEvents();
  changeObjectSelection(false);
  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: 5,
      fill: '#07ff11a3',
      stroke: '#07ff11a3',
      originX: 'center',
      originY: 'center',
      selectable: false
    });
    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;
    line.setCoords();
  });
}

function drawrec() {
  var rect, isDown, origX, origY;
  removeEvents();
  changeObjectSelection(false);

  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,
      selectable:false,
      fill: '#07ff11a3',
      stroke: 'black',
      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;
    rect.setCoords();
  });
}

function drawcle() {
  var circle, isDown, origX, origY;
  removeEvents();
  changeObjectSelection(false);
  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: 1,
      fill: '#07ff11a3',
      stroke: 'black',
      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;
    circle.setCoords();
  });

}

function enableFreeDrawing(){
  removeEvents();
  canvas.isDrawingMode = true;
}

function enableSelection() {
  removeEvents();
  changeObjectSelection(true);
  canvas.selection = true;
}

function changeObjectSelection(value) {
  canvas.forEachObject(function (obj) {
    obj.selectable = value;
  });
  canvas.renderAll();
}

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

<div class="fullpage">
  <div class="section">
  <a class="thmb" href="#" onclick="drawLine()" style="padding: 0px 10px;margin:5px;border: 2px solid;">line</a>
  <a class="thmb" href="#" onclick="drawrec()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Rectangle</a>
  <a class="thmb" href="#" onclick="drawcle()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Circle</a>
  <a class="thmb" href="#" onclick="enableFreeDrawing()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Drawing</a>
  <a class="thmb" href="#" onclick="enableSelection()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Selection</a>
    <div class="canvas-container">
      <canvas id="canvas1" style="border: 1px solid;width: 500px;height: 500px"></canvas>
    </div>
    <div class="furniture" style="padding: 20px;border: 1px solid;width: 460px">
      <h3>Drag the image to canvas</h3> 
      <img draggable="true" src="https://www.mve.com/media/Move_logo_-01.png" width="60">
    </div>
  </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script>

Answer 1

您可以使用以下方式获取值

对于 v1.7.x

left : obj.left,
top : obj.top,
width : obj.getWidth(),
height : obj.getHeight()

对于 v2.x.x

left : obj.left,
top : obj.top,
width : obj.getScaledWidth(),
height : obj.getScaledHeight()

一般缩放(不倾斜)

left : obj.left,
top : obj.top,
width : obj.width * obj.scaleX,
height : obj.height * obj.scaleY

演示

function initCanvas() {
  $('.canvas-container').each(function(index) {

    var canvasContainer = $(this)[0];
    var canvasObject = $("canvas", this)[0];

    var imageOffsetX, imageOffsetY;

    function handleDragStart(e) {
      [].forEach.call(images, function(img) {
        img.classList.remove('img_dragging');
      });
      this.classList.add('img_dragging');
      var imageOffset = $(this).offset();
      imageOffsetX = e.clientX - imageOffset.left;
      imageOffsetY = e.clientY - imageOffset.top;
    }

    function handleDragOver(e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
      e.dataTransfer.dropEffect = 'copy';
      return false;
    }

    function handleDragEnter(e) {
      this.classList.add('over');
    }

    function handleDragLeave(e) {
      this.classList.remove('over');
    }

    function handleDrop(e) {
      e = e || window.event;
      if (e.preventDefault) {
        e.preventDefault();
      }
      if (e.stopPropagation) {
        e.stopPropagation();
      }
      var img = document.querySelector('.furniture img.img_dragging');
      console.log('event: ', e);

      var offset = $(canvasObject).offset();
      var y = e.clientY - (offset.top + imageOffsetY);
      var x = e.clientX - (offset.left + imageOffsetX);

      var newImage = new fabric.Image(img, {
        width: img.width,
        height: img.height,
        left: x,
        top: y
      });
      canvas.add(newImage);
      return false;
    }

    function handleDragEnd(e) {
      [].forEach.call(images, function(img) {
        img.classList.remove('img_dragging');
      });
    }

    var images = document.querySelectorAll('.furniture img');
    [].forEach.call(images, function(img) {
      img.addEventListener('dragstart', handleDragStart, false);
      img.addEventListener('dragend', handleDragEnd, false);
    });
    canvasContainer.addEventListener('dragenter', handleDragEnter, false);
    canvasContainer.addEventListener('dragover', handleDragOver, false);
    canvasContainer.addEventListener('dragleave', handleDragLeave, false);
    canvasContainer.addEventListener('drop', handleDrop, false);
  });
}
initCanvas();

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

var line, isDown;

function drawLine() {
  removeEvents();
  changeObjectSelection(false);
  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: 5,
      fill: '#07ff11a3',
      stroke: '#07ff11a3',
      originX: 'center',
      originY: 'center',
      selectable: false
    });
    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;
    line.setCoords();
  });
}

function drawrec() {
  var rect, isDown, origX, origY;
  removeEvents();
  changeObjectSelection(false);

  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,
      selectable:false,
      fill: '#07ff11a3',
      stroke: 'black',
      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;
    rect.setCoords();
  });
}

function drawcle() {
  var circle, isDown, origX, origY;
  removeEvents();
  changeObjectSelection(false);
  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: 1,
      fill: '#07ff11a3',
      stroke: 'black',
      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;
    circle.setCoords();
  });

}

function enableFreeDrawing(){
  removeEvents();
  canvas.isDrawingMode = true;
}

function enableSelection() {
  removeEvents();
  changeObjectSelection(true);
  canvas.selection = true;
}

function changeObjectSelection(value) {
  canvas.forEachObject(function (obj) {
    obj.selectable = value;
  });
  canvas.renderAll();
}

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

function getCoordinates(){
 var coords = [];
 canvas.forEachObject(function(obj){
   var prop = {
     left : obj.left,
     top : obj.top,
     width : obj.getWidth(),
     height : obj.getHeight()
   };
   coords.push(prop);
 });
 console.log(coords)
}

<div class="fullpage">
  <div class="section">
  <a class="thmb" href="#" onclick="drawLine()" style="padding: 0px 10px;margin:5px;border: 2px solid;">line</a>
  <a class="thmb" href="#" onclick="drawrec()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Rectangle</a>
  <a class="thmb" href="#" onclick="drawcle()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Circle</a>
  <a class="thmb" href="#" onclick="enableFreeDrawing()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Drawing</a>
  <a class="thmb" href="#" onclick="enableSelection()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Selection</a>
  <a class="thmb" href="#" onclick="getCoordinates()" style="padding: 0px 10px;margin:5px;border: 2px solid;">getCoordinates</a>
    <div class="canvas-container">
      <canvas id="canvas1" style="border: 1px solid;width: 500px;height: 500px"></canvas>
    </div>
    <div class="furniture" style="padding: 20px;border: 1px solid;width: 460px">
      <h3>Drag the image to canvas</h3> 
      <img draggable="true" src="https://www.mve.com/media/Move_logo_-01.png" width="60">
    </div>
  </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script>