enventHandler

Jofre

Erfahrenes Mitglied
Hallo miteinander

wenn ich mit canvas so eine Art Button erstelle, wie hier im Beispiel:
Code:
function roundedButton(a)
    {
        // a : Anzahl Buttons
        
        for (var i = 0; i< a; i++) {      
        ctx.fillStyle=rects.col1;         
        roundedRect(rects.x, rects.y, rects.w, rects.h,10);      
        ctx.fillStyle=rects.col2; 
        roundedRect(rects.x+5, rects.y+5, rects.w-10, rects.h-10,10);
        ctx.fill();       
    }
}
function roundedRect(x, y, width, height, radius) {
    ctx.beginPath();
    ctx.moveTo(x, y + radius);
    ctx.lineTo(x, y + height - radius);
    ctx.arcTo(x, y + height, x + radius, y + height, radius);
    ctx.lineTo(x + width - radius, y + height);
    ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
    ctx.lineTo(x + width, y + radius);
    ctx.arcTo(x + width, y, x + width - radius, y, radius);
    ctx.lineTo(x + radius, y);
    ctx.arcTo(x, y, x, y + radius, radius);
    ctx.stroke();
  }
wie kann ich die mit dem eventHandler ansprechen. Oder geht das nicht?

GzG

Joachim
 
Zuletzt bearbeitet von einem Moderator:
Geht nicht gibts nicht, aber: Du kannst den Eventhandler nur für das ganze Canvas registrieren und musst dann selber anhand der Mausposition prüfen, ob das Rechteck getroffen wurde. Anders ist es, wenn man eine Bibliothek wie jCanvas verwendet, dann kann man ganz einfach für jedes gezeichnete Objekt einen Eventhandler hinzu fügen.
 
so habe ich es auch gemacht. Aber da noch einige Sachen mehr mit dem eventHandler gesteuert werden, wollte ich wegen der Übersichtlichkeit so Teilblöcke schaffen.Wenn jetzt die Buttons unten im Canvas Rechteck liegen, würde es Sinn machen mit mehreren Canvas zu arbeiten?
 
Aber da noch einige Sachen mehr mit dem eventHandler gesteuert werden, wollte ich wegen der Übersichtlichkeit so Teilblöcke schaffen.
Das verstehe ich jetzt nicht, wie Du das meinst.
würde es Sinn machen mit mehreren Canvas zu arbeiten?
Glaube ich eher nicht:
1. Du müsstest dann bei der Programmierung zwischen den Canvas-Blöcken sowie zwischen Canvas-API und HTML/CSS hin- und herspringen.
2. Da ein Canvas ein Rechteck ist, könntest Du auf die Weise nur den Klick auf einen rechteckigen Bereich abfangen.

Wenn Du es übersichtlicher haben willst, empfehle ich eher, es objektorientiert anzulegen. Dann ist jedes abgerundete Reckteck ein Objekt und Du kannst ihm eine Methode geben, z. B. myAddEventListener, die Du genau so wie das Original addEventListener registrieren kannst. Also so wie es jCanvas auch macht.
 
Zurück