html canvas een hyperlink maken van stukje tekst.
Ik ben bezig met een spinning wheel met html5 canvas.
Dat lukt me allemaal. :)
Als hij op een stukje stopt krijg ik netjes een tekst te zien in het midden van het wiel. Daarvan moet een hyperlink worden gemaakt. Maar hoe doe ik dit?
Ik heb de volgende code die er voor zorgt dat de tekst word weergegeven:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 50px sans-serif';
// dit is de tekst waarvan het hyperlink word gemaakt
var text = winner[index];
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 50px sans-serif';
// dit is de tekst waarvan het hyperlink word gemaakt
var text = winner[index];
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
EDIT even aangepast met wat hulp van Wouter :)
De code
Gewijzigd op 02/09/2012 13:37:58 door Bart V B
Helaas is dit een heel gedoe, kijk eens hier om erachter te komen en ga dan heel wat uurtjes puzzelen...
PS: Even een JSbin gemaakt, werkt altijd handig voor debuggen en je hebt hoeft hier niet heel veel code te plaatsen: http://jsbin.com/ehusav/1 (code te zien op http://jsbin.com/ehusav/1/edit )
Was het al aan het proberen om hem op jsfiddle te zetten.
Maar deze lijkt me makkelijker. :)
Quote:
Helaas is dit een heel gedoe, kijk eens hier om erachter te komen en ga dan heel wat uurtjes puzzelen...
Die link had ik ook als bekeken. Dit word lastiger dan dat ik in eerste instantie had bedacht.
Wouter J op 02/09/2012 13:32:15:
Leuk gemaakt!
gemaakt...gemaakt... ge..kopieerd? :-)
http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas
Hij is leuk gemaakt, vandaar dat ik hem ook wil gebruiken. Niets mis mee toch?
Op zich lijkt het toch niet zo moeilijk.
Als ik http://stackoverflow.com/questions/6215841/create-links-in-html-canvas zo bestudeer, dan maakt hij er een var van met een hyperlink.
Alleen zit ik even met canvas.addEventListener("click", on_click, false);
Die zal dan op een X en Y as gemaakt moeten worden in het midden van het wiel?
En dan is het nog een function maken die de klik afhandeld. Of zie ik het verkeerd?
(Mijn javascript is een beetje stroefjes. :) )
Ipv dat maakt hij een onclick event op het canvas (dat doet die regel die jij geeft). Een onclick event wordt aangeroepen als iemand ergens op klikt, in dit geval het canvas.
In de callback, functie die wordt aangeroepen als het event wordt uitgevoerd, kijkt hij vervolgens op welke x en y de gebruiker klikt. Als dat ergens in een gebied ligt waar de tekst had kunnen staan kun je hem doorsturen naar een pagina doormiddel van:
Code (php)
1
window.location = 'http://google.com/';