javascript - 如何使用 Konva.Image 模拟背景位置行为？

Question

在展示我的舞台之前，我需要加载大约 50 张图像。我想减少请求的数量并加载一个包含我需要的所有图像的大精灵，然后在任何地方使用它，但要使用正确的偏移量。就像我们在 CSS 中使用 background-position 属性一样。

在文档中没有找到任何关于它的信息 - 这甚至可能吗？

Answer 1

对于该用例，您可以使用裁剪属性。

对于每个Konva.Image实例，您只使用一个源图像元素。

const img = new Image();
img.onload = () => {
  const part1 = new Konva.Image({
    image: img,
    cropX: 0,
    cropY: 0,
    cropWidth: img.width / 2
    cropHeight: img.height
  });
  layer.add(part1);
  const part2 = new Konva.Image({
    image: img,
    cropX: img.width / 2,
    cropY: 0,
    cropWidth: img.width / 2
    cropHeight: img.height
  });
  layer.add(part2);
  layer.batchDraw();
}
img.src = url;

Answer 2

您可以将精灵图像加载为单个 JS 图像对象，然后将其分配给您需要的每个 Konva 图像对象，将每个 Konva 图像添加到其自己的组中，以便您可以使用组 clipFunc 来剪辑不需要的部分的图像。您必须将图像的 x 和 y 移动图像中精灵的 x 和 y 的负值，才能将目标精灵移到您需要的位置。

这里的工作示例。该示例只是将地图图像切成均匀的图块，但要点就在那里。下面的示例图片显示了从单个地图图像中获取的图块。由谷歌地图提供的地图显示了艺术家猪Pigcasso 的位置。