如何使用 javascript 和画布将图像切割成等距的单个图块？答案

【问题标题】：How can I cut an image into isometric individual tiles using javascript and canvas?如何使用 javascript 和画布将图像切割成等距的单个图块？
【发布时间】：2019-10-20 17:53:06
【问题描述】：

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

但我的需求有点不同，因为我打算用等距图块切割整个地图，我已经实现了一个很好的投影公式，但似乎无法将其正确应用于我的画布切割功能，这是我目前的 sn -p：

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>

非常感谢我能得到的所有帮助，在此先感谢！

【问题讨论】：

整个地图图像会是这样的：blogs.unity3d.com/wp-content/uploads/2019/03/image3-3.png 然后我必须从中剪出等距的部分

标签： javascript html css game-development tile

【解决方案1】：

使用边界框切割单个瓷砖并移除角三角形。

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

否则，当瓷砖已经分开时，处理它们会更容易：

【讨论】：