據瞭解，現在前端面試也喜歡考演算法題了。前幾天去面試，果不其然的，面試官給我四道演算法題，讓我自己回去做。下面說一個跟前端有點相關並且有點趣的一道演算法題。
題目：
平面上有若干個不特定的形狀，如下圖所示。請寫程式求出物體的個數，以及每個不同物體的面積。
分析
想要知道有多少個圖形，想到的就是先獲取圖片中的每一個畫素點然後判獲取畫素點的背景顏色（RGBA）。想要獲得圖片中的每一個畫素點，那就可以聯想到使用h5的canvas。
如下：
書寫html標籤。
<canvas id="canvas" height="200" width="350">對不你，你的瀏覽器不支援Canvas</canvas> js獲取canvas物件
let ctxt = canvas.getContext('2d');js建立image物件
let img = new Image;
img.src = './image.png'; //圖片路徑
img.onload = function(){} //載入成功後的執行函式，之後的程式碼就寫在其中建立儲存圖片畫素點的二維陣列
let coordinates = [];
for(let i=0; i<200; i++){
coordinates[i] = [];
}獲取畫素點，也就是使用getimagedata方法。
ctxt.drawImage(img, 0, 0); //將圖片畫如canvas
let data = ctxt.getImageData(0, 0, 350, 200).data;//讀取整張圖片的畫素。將畫素存入二維陣列
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++;
}
}目前程式碼如下：
(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<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++;
}
}
console.log(coordinates);
}
})();如圖：
-
構成類似如下二維陣列：
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
那麼我們就只需要知道二維陣列中這種連續為1的塊有多少個就知道了圖片中形狀有多少個，並且塊中有多少個1，那麼這個塊的面積就是1的個數。
遞迴回溯演算法
//計算連續的面積和個數
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;
}不熟悉的，直接百度就好，這裡就不多說了，其實程式碼就反應了很多資訊。
使用演算法，統計並計算出結果。
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
};
}最後的程式碼
(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<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++;
}
}
// console.log(coordinates);
let rst = getCountAndArea();
// console.log(rst);
console.log('個數： ' + rst.count);
for(let i=0; i<rst.sum.length; i++){
console.log(`第${i+1}個面積為: ${rst.sum[i].area} px`);
}
}
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;
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;
}
})();
