Teilen Sie eine Frage zum Algorithmus im Zusammenhang mit dem Frontend

Sprechen wir über eine Algorithmusfrage, die etwas mit dem Frontend zu tun hat und interessant ist.

Titel:

Es gibt mehrere unspezifische Formen auf dem Flugzeug, wie in der Abbildung unten gezeigt. Bitte schreiben Sie ein Programm, um die Anzahl der Objekte und die Fläche jedes einzelnen Objekts zu ermitteln.

Analyse

Wenn Sie wissen möchten, wie viele Grafiken es gibt, fällt Ihnen als Erstes Folgendes ein: um jedes Pixel im Bild zu erhalten Klicken Sie und beurteilen Sie dann, um die Hintergrundfarbe (RGBA) des Pixels zu erhalten. Wenn Sie jedes Pixel im Bild erhalten möchten, können Sie über die Verwendung von h5-Canvas nachdenken.
Wie folgt:

Die getimagedata-Methode von Canvas im Anfänger-Tutorial

• HTML-Tags schreiben.

  <canvas id="canvas" height="200" width="350">对不你，你的浏览器不支持Canvas</canvas>

• js ruft Leinwandobjekt ab

  let ctxt = canvas.getContext('2d');

• js erstellt Bildobjekt

  let img = new Image;
  img.src = './image.png'; //图片路径
  img.onload = function(){}  //加载成功后的执行函数，之后的代码就写在其中

• Erstellen Sie ein zweidimensionales Array zum Speichern von Bildpixeln

  let coordinates = [];for(let i=0; i<200; i++){
       coordinates[i] = [];
  }

• Rufen Sie die Pixel ab, dh verwenden Sie die Methode getimagedata.

  ctxt.drawImage(img, 0, 0);  //将图片画如canvas
  let data = ctxt.getImageData(0, 0, 350, 200).data;//读取整张图片的像素。

• Pixel in einem zweidimensionalen Array speichern

  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++;
        }
  }

• Der aktuelle Code lautet wie folgt:

  (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);
        }
    })();

• Wie im Bild gezeigt:

image.png

• bildet etwas Ähnliches. Das folgende zweidimensionale Array:

  0,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
  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

Dann müssen wir nur wissen, wie viele aufeinanderfolgende Einsenblöcke es in der zweidimensionalen Anordnung gibt, um zu wissen, wie viele Formen es im Bild gibt und wie viele Einsen es gibt der Block, dann ist die Fläche dieses Blocks die Anzahl der Einsen.

Rekursiver Backtracking-Algorithmus

//计算连续的面积和个数
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;
}

Wenn Sie damit nicht vertraut sind, gehen Sie einfach zu Baidu. Ich werde hier nicht auf Details eingehen .

Verwenden Sie Algorithmen, Statistiken und berechnen Sie die Ergebnisse.

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
    };
}

Der endgültige Code

(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;
        }
    })();

Das Ergebnis des Laufens:

Wenn Sie während des Lernprozesses auf Probleme stoßen oder dies möchten Erhalten Sie Lernressourcen. Willkommen in der Lernaustauschgruppe
343599877. Lassen Sie uns gemeinsam Front-End lernen!

Das obige ist der detaillierte Inhalt vonTeilen Sie eine Frage zum Algorithmus im Zusammenhang mit dem Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!