Js Onclick na rysowanym obiekcie? (canvas)

Question

Witam, przykladowo rysując takim kodem w canvas kulkę

ctx.beginPath();
    ctx.arc(20, 20, 10, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();

Istnieje możliwość aby po jej kliknięciu wykonywała się funkcja? jak to zrobić? może coś z onlick, nie mam pojęcia, byłbym bardzo wdzięczny za odpowiedź

Answer 1

Musisz użyć addEventListener który przy kliknięciu będzie pobierał dane dotyczące miejsca kliknięcia, a następnie przy pomocy twierdzenia pitagorasa liczysz czy dystans między środkiem okręgu a miejscem kliknięcia jest mniejszy niż promień, jeśli tak to wywołujesz swoją funkcję. Np:

const x = 20; 
const y = 20; 
const radius = 10;

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();

function yourFunction() {
  console.log("Inside!");
}

addEventListener("click", (event) => {
  const mouseX = event.clientX;
  const mouseY = event.clientY;
  const distance = Math.sqrt(Math.pow(mouseX - x, 2) + Math.pow(mouseY - y, 2));
  if(distance < radius) {
    yourFunction();
  }
});

 

Answer 2

Rysując po canvas-ie nie tworzysz elementu html więc zdarzenie onclick samego obiektu rysowanego odpada. Dało by się to w ten sposób zrobić, gdybyś używał grafiki svg.

Na canvas-ie też można jednak wykonywać takie operacje, jednak wymaga to znajomości programowania obiektowego, gdyż taki obiekt (okrąg) musi być opisany i zapisany w klasie (a w zasadzie to najlepiej by było, żeby tak był opisany), później odpowiednia metoda tego obiektu byłaby wywoływana w celu sprawdzenia, czy kliknięto obszar, w którym znajduje się ten obiekt. To wywołanie musiało by zostać wykonane w funkcji podpiętej pod zdarzenie onclick samego canvas-u. Tak w ogóle to takich obiektów na canvas-ie może być więcej więc powinieneś mieć listę utworzonych elementów rysowanych na danym canvas-ie.

Answer 3

Jeśli do rysowanych figur chcemy podpiąć obsługę zdarzeń, to zastanowiłbym się, czy aby nie byłoby wygodniej wykorzystać do tego SVG, który pozwoliłby do każdego kształtu dopiąć dowolne zdarzenie.

Comments

Pewnie, że to by było wygodniejsze bo odchodzi ci cała obsługa tego, który obiekt kliknięto i nie musisz się tym już martwić.

---

@Comandeer,

witam, nie gniewajcie się że stary temat odkopuję, ale nie chcę zakładać kolejnych tematów, mam jedno pytanie apropo canvasa. Myślę że JQuery html css mam na poziomie zaawansowanym, canvasem sie zainteresowałem niedawno, ale szybko chwytam i jestem nim zafascynowany i udalo mi się zrobić juz kilka ciekawych efektów. Nie pojmuję jednak obsługi zdarzeń. Jeśli ja dobrze rozumiem to jedyną opcją jest sprawdzić pozycję kursora i porównać z pozycją prostokąta i jego szerokością - podobnie koło. No ale jak są bardziej skomplikowane figury?

jest na przykład taka gra (TUTAJ) i wyświetlana jest jako canvas, i klikanie na róże obiekty jest nieproblemem - zatem o co tu chodzi - niby canvas a działa - jakie są na to sposoby?

---

Znając kształt rysowanego przedmiotu, wiesz też, jakie dokładnie koordynaty zajmuje na canvasie. Zasada jest dokładnie taka sama, jak przy prostych figurach.

---

no powiedzmy, że przygotuję grafikę w png lub svg i nastepnie umieszcze w canvasie to jedyne co mi przychodzi do głowy to jakas tablica w ktorej umieszcze wszystkie współrzędne piksele co raczej nie wchodzi w gre bo przeglądarka by nie dała rady przy tej ilosci. Zatem podpowiedź mi proszę ...

---

A po co Ci wszystkie piksele? Wystarczą tylko te z brzegu, tworzące obrys danego przedmiotu. Można też pobawić się tzw. hit regions. Swego czasu canvas miał nawet wbudowane addHitRegion, ale na razie standaryzacja utknęła w miejscu.

---

Tylko takie rozwiaznie jak na tę chwilę mi przychodzi do głowy - skrypt w javascript który znajduje ostatni "biały" pixel (i ostatni biały od prawej) i dodaje to tablicy współrzędne - w ten sposób znam współrzędne - one są stałe do obrazka więc po wygenerowaniu mogę je użyć do statmentu - jeśli cursor jest pomiedzy ... 

Jedyne co mi przychodzi do głowy - jaki znasz innyc sposób? Bo ten wydaj mi się za bardzo wymagający jak dla przeglądarki - szczególnie jak takich obiektów (różnego kształu) będzie dużo więcej.