我正在开发以下案例。
由于恒星背景的阿尔法值为0,这意味着恒星不是矩形,因此很难检测到恒星图像是否完全覆盖了菱形图像。
是否有任何库或方法可以检测图像是否被其他图像完全覆盖?
或者,是否有人知道这个算法的名称,以便我可以在JS中实现?
感谢您的帮助!
答案 0 :(得分:1)
对于形状未知的物体,我们可以通过像素检查来检查物体是否落后。
以下是有关如何执行此操作的完整示例:
<强> ONLINE DEMO HERE 强>
(GameAlchemist提供了modified version here)
/// basic allocations
var ctx = demo.getContext('2d'),
os = document.createElement('canvas'),
octx = os.getContext('2d'),
w = os.width = demo.width,
h = os.height = demo.height,
/// the images
urlD = 'http://i.imgur.com/U72xIMZ.png',
urlS = 'http://i.imgur.com/n5rgo11.png',
imgD = new Image(),
imgS = new Image(),
cnt = 2,
/// check region (optimized)
rect = [140, 140, 180, 60];
/// load images and when ready, start show
imgD.crossOrigin = imgS.crossOrigin = 'anonymous';
imgD.onload = imgS.onload = function() {
cnt--;
if (cnt === 0) start();
}
imgD.src = urlD;
imgS.src = urlS;
主函数检查上面定义的区域内的像素。为了优化,我们可以缩小搜索范围。如果您需要检查图像是否在另一个尺寸上可见,则只需扩展该区域以检查该区域。
该功能将离屏画布与仅绘制背景和前景的“实时”画布上绘制的最前面的图像进行比较。
如果实时画布=离屏画布,则表示背景图像不可见。
function start() {
octx.drawImage(imgS, (w - imgS.width) * 0.5, 20);
var x = -50,
buffer1 = octx.getImageData(rect[0], rect[1], rect[2], rect[3]).data,
len = buffer1.length;
loop();
function loop() {
ctx.clearRect(0, 0, w, h);
ctx.drawImage(imgD, x, 130);
ctx.drawImage(imgS, (w - imgS.width) * 0.5, 20);
if (compare() === true) {
info.innerHTML = 'Object is behind!';
return;
}
x += 2;
if (x < w) requestAnimationFrame(loop);
}
function compare() {
var buffer2 = ctx.getImageData(rect[0], rect[1], rect[2], rect[3]).data,
i = len - 1;
while(i--) {
if (buffer1[i] !== buffer2[i]) return false
}
return true;
}
}