如何使用 javascript 和 canvas 将图像切割成等距的单个图块？

Question

谁能帮我解决这个问题……我已经被这个问题困扰了几个星期了……理论上任何图片都可以解决这个问题，如果需要我可以上传一张，但基本上它是一个来自 Blender 的等距渲染图... 最初从Whosebug看这个问题： Cutting an Image into pieces through Javascript

但我的需求有点不同，因为我打算用等距图块切割整张地图，我已经获得了一个很好的投影公式，但似乎无法将其正确应用于我的 canvas 切割功能，这是我当前的片段：

var tileWidth = 256;
var tileHeight = 256;
var totalColumns = 30;
var totalRows = 30;
var isometric = true
var isoOffsetX = 14;
var isoOffsetY = 2;
var isoSpacing = 12;
var image = new Image();
var renderDiv = document.getElementById("render");

image.onload = cutImageUp;
image.src = './test.jpeg';

function cutImageUp() {
    var imagePieces = [];
    for(var x = 0; x < totalColumns; ++x) {
        for(var y = 0; y < totalRows; ++y) {
            var canvas = document.createElement('canvas');
            canvas.width = tileWidth;
            canvas.height = tileHeight;
            var context = canvas.getContext('2d');
            var tileX = x * tileWidth;
            var tileY = y * tileHeight;

            if (isometric){
              // tileX = (a - b + isoOffsetX) * (tileSize.x / 2 + isoSpacing)
              // tileY = (a + b + isoOffsetY) * (tileSize.x / 4 + isoSpacing)
            }

            context.drawImage(image, tileX, tileY, tileWidth, tileHeight, 0, 0, canvas.width, canvas.height);
            imagePieces.push(canvas.toDataURL());
        }
    }
    var imageElement = document.createElement("img");
    imageElement.src = imagePieces[0];
    renderDiv.appendChild(imageElement);
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>split image into tiles</title>
  <!-- <link rel="stylesheet" href="./style.css"> -->

</head>
<body>
<div id="render"></div>
<canvas id="canvas"></canvas>
<script  src="./script.js"></script>


</body>
</html>

非常感谢能得到的所有帮助，提前致谢！

Answer 1

用边界框切割单个图块并移除角三角形。

使用context.globalCompositeOperation=destination-out在要删除的位置绘制"transparent"个三角形 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

否则，当它们已经分开时处理您的图块会更容易：

如何使用 javascript 和 canvas 将图像切割成等距的单个图块？

How can I cut an image into isometric individual tiles using javascript and canvas?

javascript

html

css

game-development

tile