Probleme bei mehreren Bildern in Canvas

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Probleme bei mehreren Bildern in Canvas

    Hallo zusammen,

    ich stehe auf dem Schlauch und bitte um euer Schwarmwissen.
    Mit dem u.A. Code beabsichtige ich mehrere Symbole in Canvas darzustellen.
    Die Dartstellung geling mir aber leider immer nur das letzte aus der Datenbank.
    Was mache ich falsch, dass ich es nicht schaffe mehrere Bilder darzustellen?

    Ich bin für jeden Tipp sehr dankbar.

    PHP-Code:
    <script>
            const canvas = document.getElementById("canvas");
            const ctx = canvas.getContext("2d");
            const img = new Image();
            <?php
             $sql 
    "SELECT * FROM v1_card_cards Where active='1'";
                foreach (
    $pdo->query($sql) as $row) {
                echo
    'img.src = "'.$row['file'].'";';
                }    

                  
    ?>



            img.onload = function() {
              canvas.height = canvas.width * (img.height / img.width);
              const oc = document.createElement('canvas');
              const octx = oc.getContext('2d');
              oc.width = img.width * 1;
              oc.height = img.height * 1;
              octx.drawImage(img, 0, 0, oc.width, oc.height);
              ctx.drawImage(oc, 0, 0, oc.width * 1, oc.height * 1, 0, 0, canvas.width, canvas.height);
            }
           <?php


           $sql 
    "SELECT * FROM v1_card";
              foreach (
    $pdo->query($sql) as $row) {


                
    $sql "SELECT * FROM v1_card_milsym Where file_name ='" $row['name'] . "'";
                  foreach (
    $pdo->query($sql) as $row2) {
                    
    $path $row2['file'];
                    
    $namm =  $row2['id'];
                  }

                  
    ////////////////

                
    echo' width = window.innerWidth;';
                echo
    ' height = window.innerHeight;';

                echo
    'function drawImage(imageObj) {';
                echo
    ' stage = new Konva.Stage({';
                echo
    'container: "container",';
                echo
    'width: width,';
                echo
    'height: height,';
                echo
    '});';

                echo
    ' layer = new Konva.Layer();';

                echo
    ' MilSym = new Konva.Image({';
                echo
    'image: imageObj,';
                echo
    ' x: ' $row['posx'] . ',';
                echo
    'y: ' $row['posy'] . ',';
                echo
    'width: 90,';
                echo
    'height: 70,';
                echo
    'draggable: true,';
                echo
    '});';


                echo
    'MilSym.on("mouseover", function () {';
                echo
    '  document.body.style.cursor = "pointer";';
                echo
    '});';
                echo
    'MilSym.on("mouseout", function () {';
                echo
    '  document.body.style.cursor = "default";';
                echo
    '});';

                echo
    'layer.add(MilSym);';
                echo
    'stage.add(layer);';
                echo
    '}';
                echo
    ' imageObj = new Image();';
                echo
    'imageObj.onload = function () {';
                echo
    'drawImage(this);';
                echo
    '};';
                echo
    'imageObj.src = "'$path.'";';
                  
    /////////




              
    }

          
    ?>
    Zuletzt geändert von kleinmarci; 11.02.2023, 15:56.

  • #2
    Die Dartstellung geling mir aber leider immer nur das letzte aus der Datenbank.
    Und warum? Weil du in der Schleife das Image immer wieder überschreibst. Im erzeugten Quellcode dürfte es bei dir so ausehen:
    img.src = "bild1.jpg"
    img.src = "bild2.jpg"
    img.src = "bild3.jpg"
    img.src = "bild4.jpg"
    Zuletzt geändert von scatello; 11.02.2023, 15:20.

    Kommentar


    • #3
      Zitat von scatello Beitrag anzeigen
      Und warum? Weil du in der Schleife das Image immer wieder überschreibst. Im erzeugten Quellcode dürfte es bei dir so ausehen:
      img.src = "bild1.jpg"
      img.src = "bild2.jpg"
      img.src = "bild3.jpg"
      img.src = "bild4.jpg"
      Ich lasse den Code mit der foreach schleife wiederholen, sodass er die Werte immer von dem in der DB bekommt.
      Der Gedanke ist, dass er die richtigen Werte aus der DB holt und für das jeweilige Symbol setzt, dies tut er auch aber halt nur für das letzte in der DB gefunden Symbol

      PHP-Code:
      // Hier gehe ich die schleife sooft durch wie Symbole in der DB gespeichert sind
      $sql "SELECT * FROM v1_card";
                foreach (
      $pdo->query($sql) as $row) {

      // Hier suche ich die Symboldaten aus einer anderen Tabelle
                  
      $sql "SELECT * FROM v1_card_milsym Where file_name ='" $row['name'] . "'";
                    foreach (
      $pdo->query($sql) as $row2) {
                      
      $path $row2['file'];
                      
      $namm =  $row2['id'];
                    }

                    
      ////////////////

                  
      echo' width = window.innerWidth;';
                  echo
      ' height = window.innerHeight;';

                  echo
      'function drawImage(imageObj) {';
                  echo
      ' stage = new Konva.Stage({';
                  echo
      'container: "container",';
                  echo
      'width: width,';
                  echo
      'height: height,';
                  echo
      '});';

                  echo
      ' layer = new Konva.Layer();';

                  echo
      ' MilSym = new Konva.Image({';
                  echo
      'image: imageObj,';
                  echo
      ' x: ' $row['posx'] . ',';
                  echo
      'y: ' $row['posy'] . ',';
                  echo
      'width: 90,';
                  echo
      'height: 70,';
                  echo
      'draggable: true,';
                  echo
      '});';


                  echo
      'MilSym.on("mouseover", function () {';
                  echo
      '  document.body.style.cursor = "pointer";';
                  echo
      '});';
                  echo
      'MilSym.on("mouseout", function () {';
                  echo
      '  document.body.style.cursor = "default";';
                  echo
      '});';

                  echo
      'layer.add(MilSym);';
                  echo
      'stage.add(layer);';
                  echo
      '}';
                  echo
      ' imageObj = new Image();';
                  echo
      'imageObj.onload = function () {';
                  echo
      'drawImage(this);';
                  echo
      '};';
                  echo
      'imageObj.src = "'$path.'";';​ 
      Zuletzt geändert von kleinmarci; 11.02.2023, 15:56.

      Kommentar


      • #4
        Dann sieh' dir doch mal deine Schleifen genau an.
        PHP-Code:
        foreach ($pdo->query($sql) as $row2) {
                        
        $path $row2['file'];
                        
        $namm =  $row2['id'];
                      }
        ​ 
        Was soll außer dem letzten Datensatz sonst in $row2 stehen?

        Kommentar


        • #5
          Vieleicht sollte er mal echos benutzen hier
          PHP-Code:
                        foreach ($pdo->query($sql) as $row2) {
                       echo  
          $path $row2['file'];
                          echo 
          $namm =  $row2['id'];
                        }
          ​ 
          Und dann mal im Quelltext schauen des Browsers.
          Vielleicht versteht er dann, was er ändern muss.

          Ich weiß ja nicht wie der Quelltext aussehen muss (weil Canvas Malerei ist nicht mein Ding), sonst hätte ich gesagt das man mal einfach die Klammer so um 35 Zeilen verschiebt , doch dann sollte das JS nicht mehr laufen.

          Kommentar

          Lädt...
          X