Ткань JS получить координаты X, Y линии после изменения положения - PullRequest
Новая
       7

Ткань JS получить координаты X, Y линии после изменения положения

0 голосов
/ 11 сентября 2018

В моем приложении я добавляю строку на холст. После этого, если я нажму кнопку сохранения, я могу получить начало и конец X, Y Значения линии. Но после добавления строки, если я изменю положение, я не сделал не получить правильные координаты X, Y линии. Он всегда будет возвращать значение X, Y вставленной координаты X, Y. Есть ли способ получить правильные координаты X, Y линии после ее изменения положения. 

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 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 = {
     X1 : obj.x1,
     Y1 : obj.y1,
     X2 : obj.x2,
     Y2 : obj.y2,
     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="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;">Save</a>
    <div class="canvas-container">
      <canvas id="canvas1" style="border: 1px solid;width: 500px;height: 500px"></canvas>
    </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>
...