对于我正在制作的棋盘游戏,我必须设计一张由六 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
类以避免性能问题的更有效方法是什么?
最佳答案
对于 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 并将其内容转换为位图。
这留下了实现快速磁贴写入的多种方法。
载入一个图像对象。对于图像中的每个图 block ,
- 创建一个矩形大小的 Canvas 元素(它不必在 DOM 中),
- 为 Canvas 中的图 block 创建剪辑区域,
- 使用
drawImage
的最后一个参数将图像的一部分写入 Canvas 指定要使用图像的哪一部分, - 将 Canvas 存储为图 block 对象的属性。
- 使用
drawImage
将 tile 的 canvas 属性值写入您计算出它需要去的任何地方。
与 1 一样,但是在将一个图 block 写入 Canvas 之后,读取图像数据并使用 createImageBitmap为位图创建 promise 。当所有图像的所有图 block 的所有 promise 都已实现时,就可以使用这些图 block 。
将图 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>
关于javascript - 如何有效地重复使用剪裁的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45495252/