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