我需要帮助,我正在为游戏创建城市地图,我创建了这个脚本,通过数组检索信息到结构的顺序,但我不能突出显示结构,我出现重叠,我会放一个Z-Index但是我不知道怎么做,请帮帮我。
var Canvas_Image_Arr = [{"name":"NAME1","Image":"../structure1.png","x":"439","y":"47","z":"3","w":"175","h":"179"},{"name":"NAME2","Image":"../structure2.png","x":"554","y":"175","z":"2","w":"175","h":"179"}];
window.onload = function(){
var canvas = document.getElementById("ctymap");
var ctx = canvas.getContext("2d");
ctx.canvas.width = 942;
ctx.canvas.height = 430;
canvas.style.background = "url(../background.jpg)";
Canvas_Image_Arr.forEach(function(element){
var img = new Image();
img.src = element.Image;
this.zIndex = element.z;
img.onload = function(){
ctx.drawImage(this, element.x, element.y, this.width, this.height);
}
});
}
在阵列" CANVAS_IMAGE_ARR"我为图层创建了一个名为Z的条目,因为我创建了每个drawImage的级别?
答案 0 :(得分:0)
最快的方法是使用两幅画布。一个保存整个图像并保持在屏幕外,另一个是显示画布。
您可以像往常一样将图像渲染到离屏画布。然后,当图像准备就绪时,清除屏幕画布,将屏幕外画布绘制到该画布上,然后在其上绘制突出显示的项目。
这样可以节省您对所有图像进行排序和重绘的工作,只需将其放在顶部即可。
演示显示了这一点。我没有找到一堆图像,而是通过画布创建图像。感兴趣的代码只是顶部函数displayLoop
需要时它会找到最接近鼠标的图像,如果是新图像则清除画布,绘制offScreen
画布,然后是最近的图像顶部。
注意:此方法会增加某些图像的边缘对比度。
requestAnimationFrame(displayLoop);
document.addEventListener("mousemove", mouseEvents);
const numImages = 100;
const ctx = canvas.getContext("2d");
const offScreen = createImage(512,true);
const offCtx = offScreen.getContext("2d");
var lastImage;
function displayLoop(){
if (images.length === 0) { createAllImages() }
if (mouse.update) {
mouse.update = false;
const img = images.getClosest(mouse.x, mouse.y);
if(img !== lastImage) {
ctx.clearRect(0,0,512,512);
ctx.drawImage(offScreen,0,0);
img.draw(ctx);
lastImage = img;
}
}
requestAnimationFrame(displayLoop);
}
/* Code below is support code not related directly to the answer */
const mouse = {x : 0, y : 0, update : true};
function mouseEvents(e){
const bounds = canvas.getBoundingClientRect();
mouse.x = e.pageX - bounds.left - scrollX;
mouse.y = e.pageY - bounds.top - scrollY;
mouse.update = true;
}
function createAllImages(){
var i = numImages;
while(i--){ images.add() }
images.draw(offCtx);
}
function createImage(size, noDraw = false){
const img = document.createElement("canvas");
img.width = size;
img.height = size;
if (noDraw) { return img }
const ctx = img.getContext("2d");
ctx.lineWidth = 4;
ctx.fillStyle = "#" + ((0x1000000+(Math.random() * 0xFFFFFF | 0)).toString(16).substr(1));
ctx.beginPath();
ctx.arc(size / 2, size / 2, size / 2 - 3, 0, Math.PI * 2);
ctx.stroke();
ctx.fill();
return img;
}
const image = {
pos : {x: 0, y: 0},
img : null,
init(){
this.img = createImage(Math.random() * 64 + 64 | 0);
this.pos ={ x : Math.random() * canvas.height | 0, y : Math.random() * canvas.width | 0 };
return this;
},
draw(ctx) { ctx.drawImage(this.img, this.pos.x- this.img.width / 2, this.pos.y-this.img.height / 2) },
distTo(x, y) { return ((x - this.pos.x) ** 2 + (y - this.pos.y) ** 2) ** 0.5 }
}
const images = Object.assign([],{
add() { this.push({...image}.init()) },
each(cb) { var index = 0; for(const item of this) { cb(item,index++) } },
getClosest(x, y) {
var minDist = Infinity;
var minIndex = -1;
this.each((img, i) => {
const dist = img.distTo(x, y);
if(dist < minDist){
minDist = dist;
minIndex = i;
}
});
return this[minIndex];
},
draw(ctx){ this.each(img=>img.draw(ctx)) }
})
<canvas id="canvas" width="512" height="512"></canvas>