img in canvas "klickbar" machen

Java und die Scriptsprachen (z.B. Groovy usw...)

Moderator: wegus

znieh99
Beiträge: 28
Registriert: 28.03.2014, 17:12

img in canvas "klickbar" machen

Beitragvon znieh99 » 14.10.2015, 22:10

Hallo Forum,
ich möchte mehrere img in einer canvas anzeigen und bei einen klick auf eines dieser img dieses mit $(".symbol").click identifizierbar machen. Das funktioniert aber nicht, da das Ereignis scheinbar nicht auslöst. Ist diese Vorgangsweise nicht möglich? oder mache ich es nicht richtig?
Hier mein Code-Beispiel:

Code: Alles auswählen

$(document).ready( function() {

   var canv = document.getElementById("laufLeiste").getContext("2d");
 
   canv.drawImage(document.getElementsByClassName("symbol")[0], 0, 0, 50, 50);

   $(".symbol").click(function(e) {
    alert("Ok");
  })
   
})

Benutzeravatar
wegus
Beiträge: 458
Registriert: 26.09.2006, 09:07

Re: img in canvas "klickbar" machen

Beitragvon wegus » 15.10.2015, 07:28

So sollte es klappen:

Code: Alles auswählen

$("#symbol").click(function(e) {
    alert("Ok");
  });


Also # statt des Punktes und vor allem Semikolon am Ende des Statements. Tipp: Teste so etwas immer mit der Webkonsole an (F12 bei Chrome und Firefox).
Wenn etwas zu einfach klingt um wahr zu sein, dann ist es oft auch nicht wahr!

znieh99
Beiträge: 28
Registriert: 28.03.2014, 17:12

Re: img in canvas "klickbar" machen

Beitragvon znieh99 » 15.10.2015, 08:26

Hallo wegus,
auch das "#symbol" funktioniert nicht, was aber klar ist da es mehrere img gibt und diese im HTML mit "class="symbol" definiert sind.
Ist es möglich, dass das img in der canvas seine Object-Eigenschaft verliert?
lg heinz

Benutzeravatar
wegus
Beiträge: 458
Registriert: 26.09.2006, 09:07

Re: img in canvas "klickbar" machen

Beitragvon wegus » 15.10.2015, 09:09

ach so! Du hattest "einzelnes IMG" geschrieben...

bei einer ID muß eine Raute vorgestellt werden, bei einer CSS-Klasse ist der Punkt die richtige Lösung. Dann war mein Einwand falsch!

Allerdings: Fehlt da eben ein Semikolon am Ende und das wird der Fehler sein. Wenn solche Fehler im Javascript sind, dann arbeiten die Eventhandler eben nicht so wie gewünscht. Beherzige meinen Tipp mit der Webkonsole, da siehst Du Javascriptfehler!
Wenn etwas zu einfach klingt um wahr zu sein, dann ist es oft auch nicht wahr!

znieh99
Beiträge: 28
Registriert: 28.03.2014, 17:12

Re: img in canvas "klickbar" machen

Beitragvon znieh99 » 15.10.2015, 11:27

Habe das Semikolon natürlich bereits eingefügt, hat aber keine Auswirkungen.

Was meinst du mit der "Webkonsole"? Ich finde die in meinem NB IDE 8.0.2 nicht.
lg heinz

znieh99
Beiträge: 28
Registriert: 28.03.2014, 17:12

Re: img in canvas "klickbar" machen

Beitragvon znieh99 » 15.10.2015, 13:18

Ok, Konsole im Browser gefunden. 0 Fehler.

Ich glaube immer noch, dass das Object (img) durch das canv.drawImage() seine Object-Eigenschaft verliert.
lg heinz

Benutzeravatar
wegus
Beiträge: 458
Registriert: 26.09.2006, 09:07

Re: img in canvas "klickbar" machen

Beitragvon wegus » 15.10.2015, 18:38

dann probier doch mal eine javascript id für ein img und teste mal den Einzelfall!
Wenn etwas zu einfach klingt um wahr zu sein, dann ist es oft auch nicht wahr!

znieh99
Beiträge: 28
Registriert: 28.03.2014, 17:12

Re: img in canvas "klickbar" machen

Beitragvon znieh99 » 17.10.2015, 13:08

habe ich schon probiert. Bringt das gleiche Ergebnis - nämlich kein click-Ereignis.
Sobald das Img in eine canvas gezeichnet wird ist es nicht mehr ereignisfähig.
lg heinz

Benutzeravatar
wegus
Beiträge: 458
Registriert: 26.09.2006, 09:07

Re: img in canvas "klickbar" machen

Beitragvon wegus » 19.10.2015, 11:17

Ich habe nochmal nachgelesen und in der Tat ist alles was man in einen Canvas zeichnet nicht mehr mit Events belegbar, also auch Dein Image nicht!
Hier wird eine Lösung über ein DIV um das Canvas herum beschrieben, bei der die IMG dann eben im DIV und nicht im Canvas abgelegt werden:

http://stackoverflow.com/questions/1117 ... lick-event
Wenn etwas zu einfach klingt um wahr zu sein, dann ist es oft auch nicht wahr!

znieh99
Beiträge: 28
Registriert: 28.03.2014, 17:12

Re: img in canvas "klickbar" machen

Beitragvon znieh99 » 27.10.2015, 08:29

Danke wegus. Damit ist die Frage erledigt,
lg heinz


Zurück zu „Java - Scriptsprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste