Canvas Grid passt sich nmicht an


Jofre

Erfahrenes Mitglied
#1
Nicht erschrecken bitte .Der Code sieht sehr umfangreich aus. Es geht nur um die Funktion
function aufbauBasisMatrix2(zeilen,spalten,br,ho)

frage0.JPG frage1.JPG

Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8">
<style>
canvas {
    
    border: 1px red solid;
     background-color: #FFEFDB;
   cursor: url(Images/fadenkreuz.png),  auto;


}
</style>
</head>
<body onload="ladeGame()"></body>
<body >
    <canvas id = "nanogram"></canvas>

<script>

var canv = document.getElementById("nanogram");
var ctx = canv.getContext("2d");
canv.width=500;
canv.height=600;
var spalten = 8;

var grid=[];
var gridVektor=[];
var inhaltZeilen, inhaltSpalten;
var xAbstand=25,yAbstand = 70;     // Verschiebt die Matrix nach rechts und unten
var xDist=15, yDist=25;  // Verschiebt die Zahlen im Feld;
var xCoord =[],yCoord=[];
var xBreite=32,yHoehe=32;
var zeilen = spalten;
var zaehlerTreffer;
var anzahlEins;
var falsch;

//Rechtecke für die Buttons
var bgColor="lightblue";
var xBasis=20, yBasis1=220, wBasis1=60, hBasis=30, dBasis=40, xtestdis=20, ytextdis=25;
var yBasis2= 500, wBasis2=120, yErhoehung=50;

var rects = [ {x: xBasis, y: yBasis2, w: wBasis2, h: hBasis,col: bgColor},
             {x: (xBasis + wBasis2+ dBasis), y: yBasis2, w: wBasis2, h: hBasis,col: bgColor},
             {x: (xBasis + 2 * (wBasis2+ dBasis)), y: yBasis2, w: wBasis2, h: hBasis,col: bgColor},
             {x: (xBasis + 2 * (wBasis2+ dBasis)), y: yBasis2 + yErhoehung, w: wBasis2, h: hBasis,col: bgColor}];
 
var texts = [{na: "Go on", x: xBasis + xtestdis -10, y: yBasis2 + ytextdis},
            {na: "Abbruch", x: (xBasis + xtestdis +  wBasis2 + dBasis),y: yBasis2 + ytextdis} ,
            {na: "Kombis +", x: (xBasis + xtestdis + 2 * (wBasis2+ dBasis)),y: yBasis2 + ytextdis },
            {na: "Kombis -", x: (xBasis + xtestdis + 2 * (wBasis2+ dBasis)),y: yBasis2 + yErhoehung + ytextdis }];



function ladeGame(){
    
    //aufbauInhaltMatrix(zeilen,spalten);
    //aufbauBasisMatrix(zeilen,spalten,xBreite,yHoehe);
    buttonErstellen();
    buttonText();   
    //inhaltZeilen=analyseZeilen(zeilen,spalten);
    //inhaltSpalten=analyseSpalten(spalten,zeilen);   
    zaehlerTreffer=0;
}


function aufbauBasisMatrix2(zeilen,spalten,br,ho)
{
   // legt eine Matrix an . In derren Elemente werden nachfolgend die ausgewählten Bilder gezeichnet
     console.log("zeile   " + zeilen + " spalte   " + spalten);
    for (let i = 0; i<zeilen; i++)
    {
        var y=yAbstand+ ho*i;
        for(let j=0;j < spalten;j++)
        {   
            console.log("  i  " + i + "  j  " + j);         
            var x=xAbstand+ br*j; 
            ctx.lineWidth="5";
            ctx.strokeStyle="red";       
            ctx.rect(x,y,br,ho);
            ctx.stroke();           
            ctx.fillStyle="black";
           ctx.font= "22px Arial";

           //ctx.fillText(grid[i][j],x + xDist,y+yDist);
           ctx.fillText("w",x + xDist,y+yDist);
            
            //linke, obere Koordinaten der Rechtecke
            xCoord.push(x);
            yCoord.push(y);
          
          
        }
    }   
}

function buttonErstellen()
{
       for (var i = 0, len = rects.length; i < len; i++) {
        ctx.rect(rects[i].x, rects[i].y, rects[i].w, rects[i].h);
        ctx.stroke();     
        ctx.fillStyle=rects[i].col; 
        ctx.fillRect(rects[i].x, rects[i].y, rects[i].w, rects[i].h);
      }
}

function buttonText()
{
    ctx.fillStyle = "black";
    ctx.font = "18px Arial";

    for (var i = 0, len = texts.length; i < len; i++)
    {
       ctx.fillText(texts[i].na,texts[i].x, texts[i].y);
        
     }
        
}

function angetippt(rects, x, y) {
    var zw;
    var isCollision = false;
    for (let i = 0, len = rects.length; i < len; i++) {
        var left = rects[i].x, right = rects[i].x+rects[i].w;
        var top = rects[i].y, bottom = rects[i].y+rects[i].h;
        if (right >= x
            && left <= x
            && bottom >= y
            && top <= y) {
                isCollision = rects[i];   
                getipptRechteck=i;
            
                }
    }
    return isCollision;
}

function plusMinus(sw)
{
  spalten=spalten + sw;
  zeilen=spalten;
  let lg = 20 + ctx.measureText("Anzahl Zeilen / Spalten  = ").width
  meldung("Anzahl Zeilen / Spalten  " +  spalten,"18px Arial","black",xBasis ,390);
}

canv.addEventListener('click', function(e)
     {
      
        var rect = angetippt(rects, e.offsetX, e.offsetY);       
        if (rect)
        {
            auswahlButton();           
        }

    }, false);

function auswahlButton()
    {
               switch (getipptRechteck)
              {
                  
                    case 0:
                        start();                       
                        break;                           
                    case 1:
                        abbruch();                       
                        break;
                    case 2:
                        plusMinus(1);                       
                        break;
                     case 3:
                        plusMinus(-1);                       
                        break;
                       default:
                        alert("Sorry");
                }             
    }

function start(){
    ctx.clearRect(0,0,canv.width,canv.height);
    xCoord=[];
    yCoord=[];
    grid=[];
    gridVektor=[];
  
    //aufbauInhaltMatrix(zeilen,spalten);
    aufbauBasisMatrix2(zeilen,spalten,xBreite,yHoehe);
    buttonErstellen();
    buttonText();   
    //inhaltZeilen=analyseZeilen(zeilen,spalten);
    //inhaltSpalten=analyseSpalten(spalten,zeilen);   
    zaehlerTreffer=0;   
}

function meldung(text, schrift,farbe,xm,ym)
   {
        var lg = 20 + ctx.measureText(text).width
        ctx.clearRect(xm, ym-25,lg,25);
        ctx.fillStyle = farbe;
        ctx.font = schrift;
        ctx.fillText(text, xm ,ym);
    }
</script>



      
</body>
</html>
 

Jofre

Erfahrenes Mitglied
#2
Das war zu schnell .

wenn ich GO ON drücke erscheinmt Bild1.
wenn ich über Kombi- die Zeilen und Spalten Anzahl ändere auf 4. dann erscheint bild 2.
Warum ist das Raster immer noch 8 x 8?
 

Sempervivum

Erfahrenes Mitglied
#3
Das ist wirklich überraschend! Anscheinend merkt sich die API alle Rechtecke, die zuvor angelegt wurden und zeichnet mit stroke() für alle den Rahmen. Mit strokeRect() kann man jedoch gezielt ein Rechteck zeichnen:
Code:
                for (let j = 0; j < spalten; j++) {
                    console.log("  i  " + i + "  j  " + j);
                    var x = xAbstand + br * j;
                    ctx.lineWidth = "5";
                    ctx.strokeStyle = "red";
                    // ctx.rect(x, y, br, ho);
                    ctx.strokeRect(x, y, br, ho);
Außerdem wurden die Rechtecke gar nicht neu gezeichnet, Du musst dazu die Funktion start() aufrufen:
Code:
                case 2:
                    plusMinus(1);
                    start();
                    break;
                case 3:
                    plusMinus(-1);
                    start();
                    break;
 

Jofre

Erfahrenes Mitglied
#4
Danke Meister,

sorry mit dem Start , das hatte ich vergessen zu erwähnen.
Ich hatte mehrere Stunden gesucht und gesucht. Ich habe den Fehler im Code gesucht und gesucht. Ich war fertig!
Deine Annahme stimmt. Ich kann es am Prtogramm insgesamt sehen. Alle Rechtecke,( mehr als im Programm Auszug) einmal angelegt mit rect, werden beim nächsten Aufruf, selbst wenn es nur eine Teilmenge betrifft, angesprochen. TTEUFLISCH für Anfänger
strokeRect funktioniert einwandfrei. Danke !