javascript - 如何有效地重复使用剪裁的图像？

Question

对于我正在制作的棋盘游戏，我必须设计一张由六 Angular 形方 block 组成的 map 。 map 的地理位置(森林、山脉等)由图 block 的图像表示，如此。我需要从几张图片中剪下一个六边形区域，然后一次又一次地使用它们。在我开始设计 map 之前，我需要确保每个单独的图 block 都按预期工作。但是我被卡住了。这是 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();
}

}

为了测试代码的正确性，我尝试在 Canvas 上绘制 2 个图 block :

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 个图 block ，但实际上只有其中一个图 block 填充了图像。除此之外，我觉得这段代码效率很低。我必须使用的 context.save() 方法是一项昂贵的操作，而且需要绘制数百个图 block 会带来一些性能问题。我这样做正确吗？设计 Tile 类以避免性能问题的更有效方法是什么？

Answer 1

对于 Canvas 操作

第二个图 block 没有出现，因为在图 block 出现的地方在 Canvas 上设置了裁剪， Canvas 具有屏幕尺寸，并且图像是从 ( 50, 20 的 (x,y) 位置绘制的) 没有缩放。如果图像没有到达磁贴放置的位置，则不会显示磁贴内容。如果确实显示，内容取决于磁贴位置。

在将图像数据写入 Canvas 的两种选择中，putImageData 和 drawImage，putImageData 未实现绘制操作，这需要考虑考虑到图像透明度，因此不能用于并置非矩形图 block 而不遮挡相邻图 block 的一部分。

drawImage可以编写 HTML 图像和 Canvas 对象、ImageBitMap 对象、SVG 对象等的内容，但不幸的是列表不包括 ImageData可以直接从书面 Canvas 上读取的对象。

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

这留下了实现快速磁贴写入的多种方法。

1. 载入一个图像对象。对于图像中的每个图 block ，

   • 创建一个矩形大小的 Canvas 元素(它不必在 DOM 中)，
   • 为 Canvas 中的图 block 创建剪辑区域，
   • 使用 drawImage 的最后一个参数将图像的一部分写入 Canvas 指定要使用图像的哪一部分，
   • 将 Canvas 存储为图 block 对象的属性。
   • 使用 drawImage 将 tile 的 canvas 属性值写入您计算出它需要去的任何地方。

2. 与 1 一样，但是在将一个图 block 写入 Canvas 之后，读取图像数据并使用 createImageBitmap为位图创建 promise 。当所有图像的所有图 block 的所有 promise 都已实现时，就可以使用这些图 block 。

3. 将图 block 离线创建为一行或一列大小相同的正方形，并将每个图 block 的不渲染区域设为透明。然后至于一二而省略设置剪辑区域。

我测试了第一种方法，以确保它在不需要为每个图 block 添加 Canvas 元素到文档的情况下工作。请参阅片段。仅供引用，方 block 的大小已指定，内部 side、incX 和 incY 值从中计算。

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

希望对您有所帮助。

---

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"

<canvas id="canvas" style="border: thin solid blue;" height=400 width=600>