Jcanvas Funktionen in Standardmethoden einbinden

  • ich erzeuge mit mit jcanvas folgendes Bild


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


    Der Code dazu:


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


    $('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({

    layer: true,

    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: 'blue'


    });


    }

    });


    Wenn jetzt zum Beipiel in der ersten Gruppe auf " + " geklickt wird,

    soll die in der ersten (nur) Gruppe die 7 auf 8 erhöht werden.

    Gleichzeitig soll die variable "8" außerhalb der Funktion für eine weitere Verarbeitung zur Verfügung stehen.


    Ich habe in Anlehnung an die JCanvas Dokumentation versucht das über eine Funktion zu ermöglichen., Klappt aber nicht.

  • Ich habe mal dies ausgearbeitet:

    Ich habe den einzelnen Elementen Namen mit Nummer gegeben: name: 'textvalue' + nr Dies ist jeweils der linke Layer, der den aktuellen Wert enthält.

    Mit

    Code
                        var textval = cv.getLayer('textvalue' + nr);
                        var val = parseInt(textval.text);

    kann ich dann im Clickhandler diesen Layer ermitteln und den Wert herausholen.

    Auf die gleiche Weise kannst Du auch den Wert irgend wo anders im Skript herausholen. Um das zu vereinfachen, kann es jedoch angebracht sein, die Werte parallel in einem Array zu führen.

  • Danke Meister,


    dann bekomme ich jetzt über val die geänderte Zahl und über nr das entsprechende Element von den Dreien.


    Ich hatte es auch mit dem click probiert, aber irgendwie klappte es nicht.

Jetzt mitmachen!

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