Tutorial HTML5: zdjęcie na Canvas z klikalnymi elementami

javascript-html5-tutorial.pl

5 maja, 2014

Dominik-W

Rezultatem pracy nad dzisiejszym przykładem będzie efekt, który może być przydatny w wielu projektach z różnych branż. Chodzi o efekt będący swego rodzaju komentarzem do danego punktu na zdjęciu. Możemy w tym miejscu zaprogramować określoną akcję np. pokazanie szczegółowych informacji.

Tutorial HTML5 – klikalne punkty na zdjęciu

Trzeba mieć na uwadze, że konfiguracja klikalnych punktów jest ściśle związana ze zdjęciem, na którym chcemy operować.

Przejdźmy do programowania.

Potrzebujemy stworzyć nowy dokument HTML5, w którym dołączymy jQuery oraz dodamy element canvas:

<canvas id="appCanvas" width="576" height="576"></canvas>

W przypadku obrazka, którego użyliśmy odpowiednie będą wymiary 576×576 px.

Dodajemy style CSS, w których ustawiamy nasz obrazek jako tło elementu canvas, oraz centrujemy całość:

canvas { background:url(building.jpg) }
img, canvas { display: block; border: solid 1px; margin: 1em auto; }

Następnie dodajemy kod JavaScript, a zaczniemy od tablicy z danymi, które będą wyświetlane po kliknięciu w dany punkt:

// data for "hot points"
var dataTab = {
  0: 'Here is our office',
  1: 'The level is empty!',
  2: 'Here you can find our CEO',
};

Tworzymy także główną funkcję render(), która będzie zawierać wszystkie potrzebne operacje.

Operacje to przede wszystkim tworzenie okręgów zaznaczających konkretne punkty, według funkcji:

var theCircle = function(x, y, radius) {
  this.left = x - radius;
  this.top = y - radius;
  this.right = x + radius;
  this.bottom = y + radius;
};

Dodamy także funkcje:

– draw, która wykonuje właściwe rysowanie metodami HTML5 Canvas, takimi jak arc(), dzięki której możemy rysować okręgi,

– drawCircle, która będzie wywoływać funkcję draw() oraz dodawać narysowane okręgi do kolekcji (tablica circles).

Następnie możemy zaprogramować rysowanie naszych okręgów w zadanych punktach, na przykład:

drawCircle(context, 200, canvas.height / 2, "green", 20, 5, "#f00", 
    "#fff", "center", "bold 30px Arial", "A", circles);

Oto przykładowy rezultat:

Parametry funkcji to kolejno: context, x, y, fillcolor, radius, linewidth, strokestyle, fontcolor, textalign, fonttype, filltext, circles.

Dodamy jeszcze tylko obsługę kliknięcia:

$('#appCanvas').click(function (e) {
  var clickX = e.pageX - this.offsetLeft;
  var clickY = e.pageY - this.offsetTop;

  for (var i = 0; i < circles.length; i++) {
    if (clickX < circles[i].right && clickX > circles[i].left 
      && clickY > circles[i].top && clickY < circles[i].bottom) {
      // alert('You clicked: ' + (i + 1));
      alert(dataTab[i]);
    }
  }
});

Może to być dowolna akcja, w naszym przykładzie jest to wyświetlanie komunikatu z informacją na temat tego punktu.

I mamy tym samym kompletny przykład, który dostępny jest on-line:

http://directcode.eu/samples/html5_tutorial_canvas_photo_hints/index.html

oraz do pobrania na GitHub:

https://github.com/dominik-w/js_html5_com/tree/master/html5_tutorial_canvas_photo_hints

Podsumowanie

Efekt, który uzyskaliśmy może mieć różne zastosowania, np. projekty budynków, które można umieścić on-line i dodawać do nich odpowiedni komentarz, czy też tworzenie własnych prostych map, i wiele innych.

Użycie HTML5 Canvas z odrobiną JavaScript to świetne rozwiązanie takiego zadania, a sam kod można bez problemu rozbudowywać.

Dziękuję za uwagę.