Canvas Schreibarbeit und Anzahl Variable minimieren

  • Die Canvas zeigt unten ( eingekreist) Möglichkeiten 3 Variable zu erhöhen oder zu verkleinern.


    html-seminar.de/woltlab/attachment/1461/

    So ein Kästchen ( Zahl und + -) wird durch die folgende Funktion erstellt.


    function PlusMinus(x0,y0,w,h,was)

    {

    recZahlx=x0;

    recZahly=y0;

    recZahlBreite=w;

    recZahlHoehe=h;

    ctx1.lineWidth = 1;

    ctx1.fillStyle = '#B5EC9B';

    ctx1.strokeRect(recZahlx, recZahly, recZahlBreite,recZahlHoehe);

    ctx1.fillRect(recZahlx, recZahly, recZahlBreite,recZahlHoehe);


    ctx1.fillStyle = '#7EB5EA';

    ctx1.fillStyle = 'black';

    ctx1.fillText((was),recZahlx +10 , recZahly + recZahlHoehe*(2/3));


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


    recPlusx=x0 + w;

    recPlusy=y0;

    recPlusBreite=30;

    recPlusHoehe=h/2


    ctx1.lineWidth = 1;

    ctx1.fillStyle = '#B5EC9B';

    ctx1.strokeRect(recPlusx, recPlusy, recPlusBreite,recPlusHoehe);

    ctx1.fillRect(recPlusx, recPlusy, recPlusBreite,recPlusHoehe);


    ctx1.fillStyle = '#7EB5EA';

    ctx1.fillStyle = 'black';

    ctx1.fillText(("+"),recPlusx+10,y0+recZahlHoehe/2 );


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


    recMinusx=x0+w;

    recMinusy=y0+h/2;

    recMinusBreite=30;

    recMinusHoehe=15;

    ctx1.lineWidth = 1;

    ctx1.fillStyle = '#B5EC9B';

    ctx1.strokeRect(recMinusx, recMinusy, recMinusBreite,recMinusHoehe);

    ctx1.fillRect(recMinusx, recMinusy, recMinusBreite,recMinusHoehe);


    ctx1.fillStyle = '#7EB5EA';

    ctx1.fillStyle = 'black';

    ctx1.fillText((" - "),recMinusx + 10,y0+recZahlHoehe );


    }


    function setzeUrsprung()

    {

    ctx1.fillStyle = '#B5EC9B';

    ctx1.fillRect(links,100,200,60);

    ctx1.strokeRect(links,100,200,60);

    ctx2.fillStyle = '#B5EC9B';

    ctx2.strokeRect(links+250,100,100,60);

    ctx2.fillRect(links+250,100,100,60);


    }



    Diese Funktion wird dreimal aufgerufen und erzeugt so die 3 Kästchen.


    Wenn ich jetzt diese Zahlen verändern will muss ich Plus oder Minus anklicken und abfragen ob sie angeklickt worden sind.


    Beispiel Abfrage

    var s2= xPos> recPlusx && xPos < recPlusx+recPlusBreite && yPos > recPlusy && yPos < recPlusy + recPlusHoehe

    if (s2==true) { LaengeZahl(1) }


    ich kann jetzt allerdings nur das 3. Kästchen anklicken. Das ist mir klar weil das zuletzt erstellt wird und die Variabeln im Program für jedes Kästchen den gleichen Namen haben.

    Ich könnte jetzt für jedes Kästchen ein eigenes Porgaramm erstellen. Aber dann ersticke ich ja in Variablen.


    Hat jemand einen Tipp wie ich das vermeiden kann?.

  • 1. Tipp, der dir offenbar leider nicht zusagt: jCanvas verwenden, das unterstützt Mousevents für Elemente ohne dass man mit den Koordinaten herum rechnen muss.

    2. Tipp um Schreibarbeit zu sparen: Parameter in einem Array ablegen und die drei Gruppen in einer Schleife zeichnen.

  • Ich muss gestehen, dass ich mir das mit Jcanvas zu machen mir nicht zugetraut habe

    weil man als jcanvas - Anfäger zu leicht Fehler macht, die man lange sucht.,


    Ich muss erst das große Rechteck zeichen,

    Dann den Text , das meint die Zahl in dem Rechteck

    dann das Rechteck für das Plus Zeichen

    dann den Text + Zeichen

    dann das Rechteck für das Minus Zeichen

    dann das Minuszeichen selber


    und dann muss sich die Zahkl im Rechteck ändern wenn man plus oder minus klickt.


    Theoretisch kann ich es wahrscheinlich, aber praktisch??i

  • schon erste Problem.


    Warum wird der Text nicht ins Rechteck geschrieben


    for (var i=0; i<3; i+=1) {

    $('canvas').addLayer({

    type: 'rectangle',

    fillStyle: '#B5EC9B',

    x: 140+i*80,

    y:330,

    width: 30,

    height: 30,

    fromCenter: false

    })

    .drawLayers();


    $('canvas').drawText({

    fillStyle: 'black',

    x: 150 +i*80,

    y: 330,

    fontSize: 20,

    fontFamily: 'Verdana, sans-serif',

    text: '7',

    fromCenter: false

    });

    }

  • Ich muss zugeben, dass das mit den Layern bei jCanvas etwas kompliziert ist: Zeichnet man mit drawLayers() neu, werden nur Elemente gezeichnet, die als Layer definiert sind. Daher verschwanden bei dir die ersten beiden Texte, Wegen der anderen Vorteile würde ich aber empfehlen, bei jCanvas zu bleiben.

    In diesem Fall kann es vorteilhaft sein, das Zentrum als Bezugspunkt zu verwenden (fromCenter:true), weil dann die Texte automatisch mittig sind.

  • Klappt wunderbar bis auf den Text


    $('canvas').addLayer({

    type: 'rectangle',

    strokeStyle: 'black',

    strokeWidth: 1,

    fillStyle: '#B5EC9B',

    x: 140+i*80,

    y:330,

    width: 30,

    height: 30,

    fromCenter: false

    })

    .drawLayers();


    $('canvas').drawText({

    fillStyle: 'black',

    x: 150 +i*80,

    y: 330,

    fontSize: 20,

    fontFamily: 'Verdana, sans-serif',

    text: '7',

    fromCenter: false

    });


    $('canvas').drawRect({

    layer: true,

    strokeStyle: 'black',

    strokeWidth: 1,

    fillStyle: '#B5EC9B',

    x: 170+i*80, y: 330,

    width: 30,

    height: 15,

    fromCenter: false,

    click: function(layer) {

    // Plus

    $(this).animateLayer(layer, {

    fillStyle: 'red'

    });

    }

    });


    $('canvas').drawRect({

    layer: true,

    strokeStyle: 'black',

    strokeWidth: 1,

    fillStyle: '#B5EC9B',

    x: 170+i*80, y: 345,

    width: 30,

    height: 15,

    fromCenter: false,

    click: function(layer) {

    // Minus

    $(this).animateLayer(layer, {

    fillStyle: 'red'

    });

    }

    });


    Der Text ( die 7 ) erscheint nur im dritten Feld

  • Den Grund habe ich schon beschrieben:

    Zitat

    werden nur Elemente gezeichnet, die als Layer definiert sind. Daher verschwanden bei dir die ersten beiden Texte,

    d. h. Du musst die Texte auch als Layer definieren.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!