如何有效地重用剪切图像？

Question

对于我正在制作的棋盘游戏，我必须设计一个由六边形瓷砖组成的地图。地图的地理位置（森林，山脉等）由图块的图像表示，并且因此。我需要剪掉几个图像的六边形区域，并一次又一次地使用它们。在我开始设计地图之前，我需要确保每个单独的瓷砖按预期工作。但是我被卡住了。这是Tile类

的代码

 var Tile = function (startX, startY, l, img) {


this.side = l; //length of the hexagon's size
this.startingPoint = [startX, startY];
this.image = img;

this.incrX = Math.sqrt(3)*this.side/2;
this.incrY = this.side/2;

this.points = [
    this.startingPoint,
    [startX + this.incrX, startY - this.incrY],
    [startX + 2*this.incrX, startY],
    [startX + 2*this.incrX, startY + this.side],
    [startX + this.incrX, startY + this.side + this.incrY],
    [startX, startY + this.side]
]; //list of points comprising the path for making the hexagonal tile

this.middlePoint = [startX + this.incrX, startY + this.side/2];


//draws the hexagonal tile
this.show = function (context) {

    context.save();
    context.beginPath();
    context.moveTo(this.startingPoint[0], this.startingPoint[1]); //starting at the starting point (duh)

    for(var i=1; i<this.points.length; i++){
        context.lineTo(this.points[i][0], this.points[i][1]); //looping through the rest of the points
    }

    context.closePath(); //closing the path
    if(this.image){
        context.clip();
        context.drawImage(this.image, 50, 20);
    }
    context.restore();
    context.stroke();
}

}

为了测试代码的正确性，我尝试在画布上绘制2个图块：

var context = document.getElementById("canvas").getContext('2d');
context.canvas.height = window.innerHeight;
context.canvas.width = window.innerWidth;
var img = new Image;
img.onload = function () {
  var tile = new Tile(200, 100, 50, img);
  var tile2 = new Tile(200, 400, 50, img);
  tile.show(context);
  tile2.show(context);
}
img.src = "tree.png";

绘制了2个图块，但实际上只有其中一个填充了图像。除此之外，我觉得这段代码非常低效。我必须使用的context.save()方法是一项昂贵的操作，需要绘制数百个图块会带来一些性能问题。我正确地谈到这个吗？设计Tile类以避免性能问题的更有效方法是什么？

Answer 1

适用于Canvas Operations

第二个图块没有显示，因为在画布上设置剪裁以显示图块的位置，画布具有屏幕尺寸，图像是从（x，y）位置（50,20）绘制的）没有缩放。如果图像未到达图块放置的位置，则不显示图块内容。如果确实显示，内容取决于平铺位置。

在将图像数据写入画布的两个选项putImageData和drawImage中，putImageData没有实现考虑图像透明度的绘画操作，因此可以＆＃ 39;用于并置非矩形瓦片而不遮挡相邻瓦片的一部分。

drawImage可以编写HTML图像和画布对象，ImageBitMap对象，SVG对象等内容，但遗憾的是列表中没有包含ImageData个对象，可以直接从书面画布。

ImageData对象可以转换为ImageBitMap对象，但工厂函数是异步的并且使用promises，因此您需要在首次使用之前准备切片并将其内容转换为位图。

这留下了多种实现快速拼贴的方法。

1. 加载Image对象。对于图像中的每个图块，

   • 创建一个tile的矩形大小的canvas元素（它不必在DOM中），
   • 在画布中为图块创建剪辑区域
   • 使用drawImage的最后一个参数将图像的一部分写入画布，以指定要使用的图像部分，
   • 将画布存储为tile对象的属性。
   • 使用drawImage在您计算所需的任何位置写入tile的canvas属性值。

2. 对于1，但在将图块写入画布后，请回读图像数据并使用createImageBitmap创建位图的承诺。当满足所有图像的所有图块的所有承诺时，可以使用图块。

3. 创建一个离线图像条带作为相同大小的正方形行或列，并使每个图块的区域不会呈现为透明。然后，对于一个或两个，但省略设置剪辑区域。

我测试了第一个方法来获得确保它工作，而不需要为文档添加每个tile的canvas元素。请参阅代码段。 FYI指定了tile方块的大小，并根据它计算了内部side，incX和incY值。

方法2可能会使用更少的内存，但不确定性会少得多。方法3只是一个想法。无论如何，创建具有相似大小图标的图像条可能是有用的，并且有助于从图像中自动创建图块阵列。

希望它有所帮助。

＆＃13;
＆＃13;
function BlankTile( size) {
    this.size = size;
    this.xInc = size/2;
    this.yInc = this.xInc * Math.tan(Math.PI/6);
    this.side = size - 2* this.yInc;
    this.vTab = this.side+this.yInc;
    
    this.canvas = document.createElement("canvas");
    this.canvas.height = this.size;
    this.canvas.width = this.size;
    
    var ctx = this.canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo( 0, this.yInc);
    ctx.lineTo( this.xInc, 0);
    ctx.lineTo( this.size, this.yInc);
    ctx.lineTo( this.size, this.yInc + this.side);
    ctx.lineTo( this.xInc, this.side + 2* this.yInc);
    ctx.lineTo( 0, this.yInc + this.side);
    ctx.closePath();
    ctx.clip();
    
    this.ctx = ctx;
}

function Tile ( size, image, x, y, width, height) {
    var blank = new BlankTile( size);
    blank.ctx.drawImage( image, x||0, y || 0, width || size, height || size, 0, 0, size, size);
    this.canvas = blank.canvas;
    this.vTab = blank.vTab;
    this.size = size;
}
Tile.prototype.draw = function( context, x, y) {
    context.drawImage( this.canvas, x, y);
}

//  demonstrate code above:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
   var tile = new Tile( 50, image);
   for( var y = 0, row = 0; y < 400; y += tile.vTab, ++row) {
       for( var x = 0; x < 600; x += tile.size ) {
           var start = row&1 ? tile.size /2 : 0;
           tile.draw( context, start + x, y);
       }
   } 
}
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAADAFBMVEUcjhyEpoREikTU2tQMqgSsvqwsiizs7uxklmQEsgQMmgycspzEysQErgT8+vx0nnQckhTk5uSkuqRUjlQMpgy8yrw8ijz09vQEugQMogyktqTM0sx8nnwkiiSMqozc4ty0wrQ0ijT08vRsmmwEtgQMngyctpzEzsQMrgT8/vwUlhTk6uRcklwMqgx8onwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC9hQTeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAz0lEQVR42u3Wyw6CMBRFUUSw4AsElYtaUCiCPPz/z1MTjVba0iYO1LDHXdNzq52U036LVGWqSPYNEFypEIvANWJEsgRheJSZUmQawkta3k0cAnSjoZgkGFoRfSEgWwNY2T7iEZ8ApyINWCQOQdDy3CY1AXGZRxOQqSc96cl3k/jQ9d7deO9zYWYiUJrMHUtnPDCe8KavWrPXaCDa5FUp2jzO8u8KChjOvPu+IP05m4WVyB2+3L0Pfo3kz2vU3M4KUjriCbaPyl+F4G/+MJ8mF2o3RsTR4WQ1AAAAAElFTkSuQmCC"
＆＃13;
<canvas id="canvas" style="border: thin solid blue;" height=400 width=600>
＆＃13;
＆＃13;
＆＃13;

Answer 2

如果将单个位图与其上的所有图像一起使用，然后使用CSS background-position 来执行裁剪呢？

background-position: 13px 0;

下面的演示显示了右侧的源图像和左侧的3个裁剪实例

.board {
  width: 600px;
  height: 600px;
  border: 1px solid #ccc;
  position: relative;
}

.image {
  background-image: url('https://s-media-cache-ak0.pinimg.com/originals/b7/0a/79/b70a7978cdc41e84c165d46eed433dce.png');
  height: 200px;
}

.image.image1 {
  background-position: -13px 0px;
  width: 60px;
  height: 151px;
}

.image.image2 {
  position: absolute;
  background-position: -30px -302px;
  top: 60px;
  left: 70px;
  z-index: 3;
  width: 60px;
  height: 148px;
}

.image.image3 {
  position: absolute;
  top: 90px;
  background-position: -211px 0px;
  width: 110px;
  height: 150px;
}

.image.full {
  position: absolute;
  top: 0px;
  left: 160px;
  width: 210px;
  height: 410px;
  background-size: contain;
  border: 1px solid red;
}

<div class="board">
  <div class="image image1"></div>
  <div class="image image2"></div>
  <div class="image image3"></div>
  <div class="image full"></div>
</div>