Probleme bei mehreren Bildern in Canvas

[kleinmarci]

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.

<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.'";';​
              /////////




          }

      ?>​

[scatello]

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"

[kleinmarci]

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

// 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.'";';​ 

[scatello]

Dann sieh' dir doch mal deine Schleifen genau an.

foreach ($pdo->query($sql) as $row2) {
                $path = $row2['file'];
                $namm =  $row2['id'];
              }​ 

Was soll außer dem letzten Datensatz sonst in $row2 stehen?

[basti1012]

Vieleicht sollte er mal echos benutzen hier

              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.