Maison >interface Web >tutoriel HTML >Partager une question d'algorithme liée au front-end
Partager une question d'algorithme liée au front-end
- 零下一度original
- 2017-06-24 11:59:181324parcourir
Parlons d'une question d'algorithme qui est quelque peu liée au front-end et intéressante.
Titre :
Il existe plusieurs formes non spécifiques sur l'avion, comme le montre la figure ci-dessous. Veuillez écrire un programme pour trouver le nombre d'objets et la superficie de chaque objet différent.
Analyse
Si vous voulez savoir combien de graphiques il y a, la première chose qui vous vient à l'esprit est pour obtenir chaque pixel de l'image Cliquez puis jugez pour obtenir la couleur d'arrière-plan (RGBA) du pixel. Si vous souhaitez obtenir chaque pixel de l'image, vous pouvez penser à utiliser le canevas h5.
Comme suit :
La méthode getimagedata de canvas dans le tutoriel novice
-
Écriture de balises html.
<canvas id="canvas" height="200" width="350">对不你，你的浏览器不支持Canvas</canvas>
-
js obtient un objet canevas
let ctxt = canvas.getContext('2d');
-
js crée un objet image
let img = new Image; img.src = './image.png'; //图片路径 img.onload = function(){} //加载成功后的执行函数，之后的代码就写在其中 -
Créez un tableau bidimensionnel pour stocker les pixels de l'image
let coordinates = [];for(let i=0; i<200; i++){ coordinates[i] = []; } -
Obtenez les pixels, c'est-à-dire utilisez la méthode getimagedata.
ctxt.drawImage(img, 0, 0); //将图片画如canvas let data = ctxt.getImageData(0, 0, 350, 200).data;//读取整张图片的像素。
-
Stockage des pixels dans un tableau bidimensionnel
let x=0,y=0; //二维数组的行和列， x：列 y：行 for(let i =0,len = data.length; i<len;i+=4){ let red = data[i],//红色色深 green = data[i+1],//绿色色深 blue = data[i+2],//蓝色色深 alpha = data[i+3];//透明度 //把每个像素点，以二位数组的形式展开 if(`${red} ${green} ${blue}` === '210 227 199'){ coordinates[y][x] = 0; }else{ coordinates[y][x] = 1; } x++; if(x >= 350){ x = 0; y++; } } -
Le code actuel est le suivant :
(function(){ let ctxt = canvas.getContext('2d'); let img = new Image; let coordinates = []; let h = 200, w = 350; for(let i=0; i<200; i++){ coordinates[i] = []; } img.src = './image.png'; //图片路径 img.onload = function(){ ctxt.drawImage(img, 0, 0); let data = ctxt.getImageData(0, 0, 350, 200).data;//读取整张图片的像素。 let x=0,y=0; for(let i =0,len = data.length; i Comme le montre l'image :
-
forme quelque chose de similaire Le tableau bidimensionnel suivant :
0,0,0,0,0,0,0,0,0,0,0,0
0,0 ,1,1,1,0,0 ,0,0,0,0,0
0,1,1,1,1,0,0,0,0,0,0,0
0 ,1,1,1,0,0 ,0,1,1,1,1,0
0,0,0,0,0,0,1,1,1,0,0,0
0,0,0,0,0 ,0,1,1,1,0,0,0
0,0,0,0,0,0,0,0,0,0,0,0
Ensuite, il nous suffit de savoir combien de blocs consécutifs de 1 il y a dans le tableau bidimensionnel pour savoir combien de formes il y a dans l'image et combien de 1 il y a dans le bloc, alors l'aire de ce bloc est le nombre de 1.
Algorithme de backtracking récursif
//计算连续的面积和个数
const linkSum = (i,j,num)=>{//走过的路就置0
coordinates[i][j] = 0;
num++; //向上
if((i+1 < h) && coordinates[i+1][j] == 1){
num = linkSum(i+1 , j , num);
} //向下
if((j+1 < w) && coordinates[i][j+1] == 1){
num = linkSum(i , j+1 , num);
} //向左
if((i-1 >= 0) && coordinates[i-1][j] == 1){
num = linkSum(i-1 , j , num);
} //向右
if((j-1 >= 0) && coordinates[i][j-1] == 1){
num = linkSum(i , j-1 , num);
}
return num;
}Si vous ne le connaissez pas, allez simplement sur Baidu. Je n'entrerai pas dans les détails ici. En fait, le code reflète beaucoup d'informations. .
Utilisez des algorithmes, des statistiques et calculez les résultats.
const getCountAndArea = () =>{let sum = [];let count = 0;for(let i = 0; i < h; i++) //遍历二维数组
{ for(let j = 0; j < w; j++)
{ //连续1的个数 if(coordinates[i][j] == 1)
{let buf = 0; //连续1的个数
buf = linkSum(i,j,buf);count++; //形状的总数
sum.push({
index: count, //第几个形状
area: buf //形状的面积
});
}
}
}return {count,
sum
};
}Le code final
(function(){
let ctxt = canvas.getContext('2d');
let img = new Image;
let coordinates = [];
let h = 200,
w = 350;
for(let i=0; i<200; i++){
coordinates[i] = [];
}
img.src = './image.png'; //图片路径
img.onload = function(){
ctxt.drawImage(img, 0, 0);
let data = ctxt.getImageData(0, 0, 350, 200).data;//读取整张图片的像素。
let x=0,y=0;
for(let i =0,len = data.length; i= 350){
x = 0;
y++;
}
}
// console.log(coordinates);
let rst = getCountAndArea();
// console.log(rst);
console.log('个数： ' + rst.count);
for(let i=0; i{
let sum = [];
let count = 0;
for(let i = 0; i < h; i++)
{
for(let j = 0; j < w; j++)
{
//连续1的个数
if(coordinates[i][j] == 1)
{
let buf = 0;
buf = linkSum(i,j,buf);
count++;
sum.push({
index: count,
area: buf
});
}
}
}
return {
count,
sum
};
}
//计算连续的面积和个数
const linkSum = (i,j,num)=>{
//走过的路就置0
coordinates[i][j] = 0;
num++;
//向上
if((i+1 < h) && coordinates[i+1][j] == 1){
num = linkSum(i+1 , j , num);
}
//向下
if((j+1 < w) && coordinates[i][j+1] == 1){
num = linkSum(i , j+1 , num);
}
//向左
if((i-1 >= 0) && coordinates[i-1][j] == 1){
num = linkSum(i-1 , j , num);
}
//向右
if((j-1 >= 0) && coordinates[i][j-1] == 1){
num = linkSum(i , j-1 , num);
}
return num;
}
})(); Le résultat de l'exécution :
Si vous rencontrez des problèmes pendant le processus d'apprentissage ou si vous souhaitez obtenez des ressources d'apprentissage , bienvenue dans le groupe d'échange d'apprentissage
343599877, apprenons le front-end ensemble !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!