移动后的fabricjs线坐标 [英] Fabricjs line coordinates after movement

问题描述

小提琴- jsfiddle

排序:

1. 在坐标(x1 = 50，y1 = 50，x2 = 450，y2 = 50)处画线
2. 检查坐标y1.y1 = 50
3. 将y轴上的线移动50个像素.
4. 检查坐标y1.左y1 = 50 ???这是为什么?以及如何获得真实的坐标?

  var canvas = new fabric.Canvas('c');

        var line = new fabric.Line([50, 50, 450, 50], {            
            stroke: 'blue',
            strokeWidth : 10,
            hasControls: false,
            hasBorders: false,
            lockMovementX: true,
            lockMovementY: true,
            hoverCursor: 'default'

        });



canvas.add(line);


document.querySelector('#getLineY').onclick=function(e) {
    alert(line.get('y1'));
}

document.querySelector('#movedown').onclick=function(e) {
  line.top=line.top+50;
    canvas.renderAll();

}

canvas {
    border: solid 1px black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script>
<button id="getLineY">getLineY</button>
<button id="movedown">movedown</button>

        <canvas id="c" width="500" height="500" ></canvas>

推荐答案

我为此编写了一个函数:

I've written a function for that:

function calcLineCoords(line) {
  const {
    tl, tr, bl, br,
  } = line.calcCoords();
  let coordsStart;
  let coordsEnd;

  if (line.x1 > line.x2) {
    if (line.y1 > line.y2) {
      coordsStart = br;
      coordsEnd = tl;
    } else {
      coordsStart = tr;
      coordsEnd = bl;
    }
  } else {
    // eslint-disable-next-line no-lonely-if
    if (line.y1 > line.y2) {
      coordsStart = bl;
      coordsEnd = tr;
    } else {
      coordsStart = tl;
      coordsEnd = br;
    }
  }

  return [coordsStart, coordsEnd];
}

// Usage:
// const [coordsStart, coordsEnd] = calcLineCoords(line);

这篇关于移动后的fabricjs线坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！