Tutorial HTML5: zdjęcie na Canvas z klikalnymi elementami

html5-tutorial-canvas-image-hot-points_128

Poziom średnio-zaawansowany

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:

html5-tutorial-canvas-image-hot-points

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ę.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook2Tweet about this on TwitterShare on Google+2Share on LinkedIn4Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.