javascript - 如何使用偏移量和比例来确保边界框在 Konva 中始终完全可见？

Question

我试图始终使用 Konva 显示边界框内的每个点。

注意:我正在根据窗口大小缩放所有内容，以便尝试让所有内容始终适合，无论窗口大小如何。

我可以按照以下代码片段对正比例图执行此操作:

const points = [
  [0, 0],
  [100, 50],
  [200, 200],
  [-100, -100],
  [-50, -50]
];

const xCoords = points.map(p => p[0])
const yCoords = points.map(p => p[1])

const boundingBox = {
  x1: Math.min(...xCoords),
  x2: Math.max(...xCoords),
  y1: Math.min(...yCoords),
  y2: Math.max(...yCoords),
};

const actualWidth = window.innerWidth * 0.75;
const actualHeight = window.innerHeight * 0.75;
const canvasWidth = boundingBox.x2 - boundingBox.x1;
const canvasHeight = boundingBox.y2 - boundingBox.y1;

const scale = Math.min(
  actualWidth / canvasWidth,
  actualHeight / canvasHeight
);

const stage = new Konva.Stage({
  container: 'container',
  width: canvasWidth,
  height: canvasHeight,
  scale: {
    x: scale,
    y: scale,
  },
  offset: {
    x: boundingBox.x1,
    y: boundingBox.y1,
  }
});

const layer = new Konva.Layer();

points.forEach(point => {
  const rect = new Konva.Rect({
    x: point[0],
    y: point[1],
    width: 10,
    height: 10,
    fill: point.every(v => v === 0) ?
      'red' : 'green',
  });

  const text = new Konva.Text({
    x: point[0],
    y: point[1],
    text: `    (${point[0]}, ${point[1]})`,
    fill: 'black',
    fontSize: 30,
    fontFamily: 'Calibri',
  });

  layer.add(rect);
  layer.add(text);
})

stage.add(layer);

body {
  font-family: arial;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.6.0/konva.js"></script>
<div id='container'></div>

---

但是，当我将比例翻转为负值时，我很难让点出现在 Canvas 中。我在下面提供了一个示例，说明我到目前为止所尝试的内容。我可能完全以错误的方式解决这个问题，但如果有人能指出正确的方向，我将不胜感激。

const points = [
  [0, 0],
  [100, 50],
  [200, 200],
  [-100, -100],
  [-50, -50]
];

const xCoords = points.map(p => p[0])
const yCoords = points.map(p => p[1])

const boundingBox = {
  x1: Math.min(...xCoords),
  x2: Math.max(...xCoords),
  y1: Math.min(...yCoords),
  y2: Math.max(...yCoords),
};

const actualWidth = window.innerWidth * 0.75;
const actualHeight = window.innerHeight * 0.75;
const canvasWidth = boundingBox.x2 - boundingBox.x1;
const canvasHeight = boundingBox.y2 - boundingBox.y1;

const scale = Math.min(
  actualWidth / canvasWidth,
  actualHeight / canvasHeight
);

const stage = new Konva.Stage({
  container: 'container',
  width: canvasWidth,
  height: canvasHeight,
  scale: {
    x: -scale,
    y: scale,
  },
  offset: {
    x: boundingBox.x1 - canvasWidth,
    y: boundingBox.y1,
  }
});

const layer = new Konva.Layer();

points.forEach(point => {
  const rect = new Konva.Rect({
    x: point[0],
    y: point[1],
    width: 10,
    height: 10,
    fill: point.every(v => v === 0) ?
      'red' : 'green',
  });

  const text = new Konva.Text({
    x: point[0],
    y: point[1],
    text: `    (${point[0]}, ${point[1]})`,
    fill: 'black',
    fontSize: 30,
    fontFamily: 'Calibri',
  });

  layer.add(rect);
  layer.add(text);
})

stage.add(layer);

body {
  font-family: arial;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.6.0/konva.js"></script>
<div id='container'></div>

Answer 1

我最终通过将偏移量更改为解决了这个问题:

x: boundingBox.x1 + canvasWidth

在所有情况下，这似乎都能解决问题。

const points = [
  [0, 0],
  [100, 50],
  [200, 200],
  [-100, -100],
  [-50, -50]
];

const xCoords = points.map(p => p[0])
const yCoords = points.map(p => p[1])

const boundingBox = {
  x1: Math.min(...xCoords),
  x2: Math.max(...xCoords),
  y1: Math.min(...yCoords),
  y2: Math.max(...yCoords),
};

const actualWidth = window.innerWidth * 0.75;
const actualHeight = window.innerHeight * 0.75;
const canvasWidth = boundingBox.x2 - boundingBox.x1;
const canvasHeight = boundingBox.y2 - boundingBox.y1;

const scale = Math.min(
  actualWidth / canvasWidth,
  actualHeight / canvasHeight
);

const stage = new Konva.Stage({
  container: 'container',
  width: canvasWidth,
  height: canvasHeight,
  scale: {
    x: -scale,
    y: scale,
  },
  offset: {
    x: boundingBox.x1 + canvasWidth,
    y: boundingBox.y1,
  }
});

const layer = new Konva.Layer();

points.forEach(point => {
  const rect = new Konva.Rect({
    x: point[0],
    y: point[1],
    width: 10,
    height: 10,
    fill: point.every(v => v === 0) ?
      'red' : 'green',
  });

  const text = new Konva.Text({
    x: point[0],
    y: point[1],
    text: `    (${point[0]}, ${point[1]})`,
    fill: 'black',
    fontSize: 30,
    fontFamily: 'Calibri',
  });

  layer.add(rect);
  layer.add(text);
})

stage.add(layer);

body {
  font-family: arial;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.6.0/konva.js"></script>
<div id='container'></div>