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>

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

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>

如何使用偏移和缩放以确保边界框在Konva中始终完全可见？

1 个答案: