html canvas een hyperlink maken van stukje tekst.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

PHP Developers gezocht die van complexe online vra

Vacature Omschrijving Een grote klant is opzoek naar enthousiaste PHP developers (junior/medior/senior). De organisatie waar jij komt te werken ontwikkelt en bouwt succesvolle oplossingen voor complexe online vraagstukken zoals performance, usability en conversion. Daarnaast zorgen zij voor externe systemen ingericht voor productbeheer, point-of-sales en voorraadbeheer koppelt de organisatie probleemloos aan op eigen Magento gebaseerde webshops. Het is een informele organisatie waar de communicatielijnen kort zijn. Functieomschrijving Met drupal 8 of ShopWare realiseert de organisatie prachtige frond-ends op dynamische data uit allerlei systemen. Je houdt je in deze organisatie bezig met het ontwerpen, ontwikkelen en beheren van functionaliteiten van de applicaties

Bekijk vacature »

Bart V B

Bart V B

02/09/2012 13:07:19
Quote Anchor link
Hoi,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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();
  }
 
PHP hulp

PHP hulp

22/08/2019 23:04:01
 
John Berg

John Berg

02/09/2012 13:16:31
Quote Anchor link
Heb je ook wat html code erbij, zodat we het 'ding' in werking kunnen zien?
 
Bart V B

Bart V B

02/09/2012 13:25:57
Quote Anchor link
Even het complete script:
EDIT even aangepast met wat hulp van Wouter :)
De code
Gewijzigd op 02/09/2012 13:37:58 door Bart V B
 
Wouter J

Wouter J

02/09/2012 13:32:15
Quote Anchor link
Leuk gemaakt!

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 )
 
Bart V B

Bart V B

02/09/2012 13:36:46
Quote Anchor link
Hey Wouter, Dank je.
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.
 
Ozzie PHP

Ozzie PHP

02/09/2012 13:38:47
Quote Anchor link
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
 
Bart V B

Bart V B

02/09/2012 13:40:56
Quote Anchor link
Ja klopt Ozzie, moest ergens beginnen he. :P
Hij is leuk gemaakt, vandaar dat ik hem ook wil gebruiken. Niets mis mee toch?
 
Ozzie PHP

Ozzie PHP

02/09/2012 13:41:31
Quote Anchor link
Haha, nee hoor ;)
 
Bart V B

Bart V B

02/09/2012 13:46:09
Quote Anchor link
Maar ff ontopic.
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. :) )
 
Wouter J

Wouter J

02/09/2012 14:58:21
Quote Anchor link
Bart, hij maakt nergens een hyperlink, dat kan namelijk niet.

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)
PHP script in nieuw venster Selecteer het PHP script
1
window.location = 'http://google.com/';
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.