Inhaltsverzeichnis
Titel:
Analyse
Rekursiver Backtracking-Algorithmus
Verwenden Sie Algorithmen, Statistiken und berechnen Sie die Ergebnisse.
Der endgültige Code
Das Ergebnis des Laufens:
Heim Web-Frontend HTML-Tutorial Teilen Sie eine Frage zum Algorithmus im Zusammenhang mit dem Frontend

Teilen Sie eine Frage zum Algorithmus im Zusammenhang mit dem Frontend

Jun 24, 2017 am 11:59 AM
前端 算法 面试

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>
    Nach dem Login kopieren
  • js ruft Leinwandobjekt ab

    let ctxt = canvas.getContext('2d');
    Nach dem Login kopieren
  • js erstellt Bildobjekt

    let img = new Image;
    img.src = './image.png'; //图片路径
    img.onload = function(){}  //加载成功后的执行函数,之后的代码就写在其中
    Nach dem Login kopieren
  • Erstellen Sie ein zweidimensionales Array zum Speichern von Bildpixeln

    let coordinates = [];for(let i=0; i<200; i++){
         coordinates[i] = [];
    }
    Nach dem Login kopieren
  • 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;//读取整张图片的像素。
    Nach dem Login kopieren
  • 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++;
          }
    }
    Nach dem Login kopieren
  • 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);
          }
      })();
    Nach dem Login kopieren
  • 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)=&gt;{//走过的路就置0
      coordinates[i][j] = 0;
      num++;      //向上
      if((i+1 &lt; h) &amp;&amp; coordinates[i+1][j] == 1){
        num = linkSum(i+1 , j , num);
      }      //向下
      if((j+1 &lt; w) &amp;&amp; coordinates[i][j+1] == 1){
        num = linkSum(i , j+1 , num);
      }      //向左
      if((i-1 &gt;= 0) &amp;&amp; coordinates[i-1][j] == 1){
        num = linkSum(i-1 , j , num);
      }      //向右
    if((j-1 &gt;= 0) &amp;&amp; coordinates[i][j-1] == 1){
        num = linkSum(i , j-1 , num);
    }

    return num;
}
Nach dem Login kopieren

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 = () =&gt;{let sum = [];let count = 0;for(let i = 0; i &lt; h; i++)  //遍历二维数组
    {      for(let j = 0; j &lt; 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
    };
}
Nach dem Login kopieren

Der endgültige Code

(function(){
        let ctxt = canvas.getContext(&#39;2d&#39;);
        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;
        }
    })();
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

CLIP-BEVFormer: Überwacht explizit die BEVFormer-Struktur, um die Leistung der Long-Tail-Erkennung zu verbessern CLIP-BEVFormer: Überwacht explizit die BEVFormer-Struktur, um die Leistung der Long-Tail-Erkennung zu verbessern Mar 26, 2024 pm 12:41 PM

CLIP-BEVFormer: Überwacht explizit die BEVFormer-Struktur, um die Leistung der Long-Tail-Erkennung zu verbessern

Implementierung von Algorithmen für maschinelles Lernen in C++: Häufige Herausforderungen und Lösungen Implementierung von Algorithmen für maschinelles Lernen in C++: Häufige Herausforderungen und Lösungen Jun 03, 2024 pm 01:25 PM

Implementierung von Algorithmen für maschinelles Lernen in C++: Häufige Herausforderungen und Lösungen

Entdecken Sie die zugrunde liegenden Prinzipien und die Algorithmusauswahl der C++-Sortierfunktion Entdecken Sie die zugrunde liegenden Prinzipien und die Algorithmusauswahl der C++-Sortierfunktion Apr 02, 2024 pm 05:36 PM

Entdecken Sie die zugrunde liegenden Prinzipien und die Algorithmusauswahl der C++-Sortierfunktion

PHP und Vue: eine perfekte Kombination von Front-End-Entwicklungstools PHP und Vue: eine perfekte Kombination von Front-End-Entwicklungstools Mar 16, 2024 pm 12:09 PM

PHP und Vue: eine perfekte Kombination von Front-End-Entwicklungstools

Häufig gestellte Fragen von Front-End-Interviewern Häufig gestellte Fragen von Front-End-Interviewern Mar 19, 2024 pm 02:24 PM

Häufig gestellte Fragen von Front-End-Interviewern

Verbesserter Erkennungsalgorithmus: zur Zielerkennung in hochauflösenden optischen Fernerkundungsbildern Verbesserter Erkennungsalgorithmus: zur Zielerkennung in hochauflösenden optischen Fernerkundungsbildern Jun 06, 2024 pm 12:33 PM

Verbesserter Erkennungsalgorithmus: zur Zielerkennung in hochauflösenden optischen Fernerkundungsbildern

Kann künstliche Intelligenz Kriminalität vorhersagen? Entdecken Sie die Möglichkeiten von CrimeGPT Kann künstliche Intelligenz Kriminalität vorhersagen? Entdecken Sie die Möglichkeiten von CrimeGPT Mar 22, 2024 pm 10:10 PM

Kann künstliche Intelligenz Kriminalität vorhersagen? Entdecken Sie die Möglichkeiten von CrimeGPT

Analyse des PHP-Algorithmus: effiziente Methode zum Auffinden fehlender Zahlen in einem Array Analyse des PHP-Algorithmus: effiziente Methode zum Auffinden fehlender Zahlen in einem Array Mar 02, 2024 am 08:39 AM

Analyse des PHP-Algorithmus: effiziente Methode zum Auffinden fehlender Zahlen in einem Array

See all articles