html5 forme personnalisée de toile de l'image

J'ai des problèmes avec faire un jeu semblable au risque en html. La solution que j'utilise actuellement est de donner à chaque pays «position: absolue»; puis placez-le où il appartient, mais le problème se produit lorsque l'utilisateur veut passer la souris ou cliquez sur le pays souhaité. Le pays est représenté comme un bloc et a une image de fond avec la forme d'un pays, donc quand vous le regardez, vous ne voyez pas qu'il s'agit en fait d'un bloc.html5 forme personnalisée de toile de l'image

Pouvez-vous me donner des exemples ou un bon site de ressources où je peux obtenir les résultats suivants:

Voici comment il ressemble courant comme: http://s24.postimg.org/402tvyovp/image.png

voilà comment je veux regarder et agir comme : http://s24.postimg.org/5cpkuysmt/image.png

Donc élément a la forme d'un pays, pas un bloc, ce qui signifie que lorsque l'utilisateur met la souris dans cette forme (pas le bloc qui l'entoure), script exécuterait une certaine fonction.

Source

2013-04-07 Nikola R.

-ce que vos formes de pays attirés par vous en utilisant un chemin de toile, ou sont-ils juste une image? – markE

ces maquettes sont dessinées dans photoshop donc, ce sont des images. –

Voici comment identifier quelle forme pays personnalisée a cliqué sur votre toile

Tout d'abord, utiliser Photoshop pour changer chaque pays sur votre carte dans une autre couleur unique (une carte à code couleur)

(Ne vous inquiétez pas, l'utilisateur n'a pas besoin de voir cette carte codée en couleur).

Ensuite, lorsque l'utilisateur clique sur la toile, obtenir la couleur à la ClickPoint et comparer avec les couleurs de votre pays comme celui-ci:

function handleMouseDown(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     var color=getPixelRGB(mouseX,mouseY); 
     if(isColorMatch(color,255,0,0)){ alert("You clicked on the red country"); }   
     if(isColorMatch(color,0,255,0)){ alert("You clicked on the green country"); }   
     if(isColorMatch(color,0,0,255)){ alert("You clicked on the blue country"); }   
    } 

    function isColorMatch(color,red,green,blue){ 
     return(color.red==red && color.green==green && color.blue==blue); 
    } 

    function getPixelRGB(x, y) { 
     var pxData = ctx.getImageData(x,y,1,1); 
     var R = pxData.data[0]; 
     var G = pxData.data[1]; 
     var B = pxData.data[2]; 
     return({red:R, green:G, blue:B});  
    }

Vous ne voulez pas afficher la carte de couleur codé pour vos utilisateurs. Si ce n'est pas le cas, vous pouvez créer votre carte codée en couleur sur un canevas hors écran identique à votre canevas à l'écran, à l'exception du code couleur. Lorsque l'utilisateur clique sur votre canevas à l'écran, il vous suffit de vérifier la position de ce pixel sur votre carte à code couleur. Vous obtenez une beauté à l'écran + une fonctionnalité hors écran.

est ici code et un Fiddle: http://jsfiddle.net/m1erickson/rmn5D/

Notez que ce violon ne utilisateur votre carte exacte en raison des avertissements que vous sécurité du navigateur cross-site voudront remplacer votre carte code couleur.

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var img=new Image(); 
    img.onload=function(){ 
     canvas.width=img.width; 
     canvas.height=img.height; 
     ctx.drawImage(img,0,0); 
    } 
    img.src="yourColorCodedMap.png"; 


    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    function handleMouseDown(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     var color=getPixelRGB(mouseX,mouseY); 
     if(isColorMatch(color,255,0,0)){ alert("You clicked on the red country"); }   
     if(isColorMatch(color,0,255,0)){ alert("You clicked on the green country"); }   
     if(isColorMatch(color,0,0,255)){ alert("You clicked on the blue country"); }   
    } 

    function isColorMatch(color,red,green,blue){ 
     return(color.red==red && color.green==green && color.blue==blue); 
    } 

    function getPixelRGB(x, y) { 
     var pxData = ctx.getImageData(x,y,1,1); 
     var R = pxData.data[0]; 
     var G = pxData.data[1]; 
     var B = pxData.data[2]; 
     return({red:R, green:G, blue:B});  
    } 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>Click on a map location to get country</p> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

Source

2013-04-07 22:46:55 markE

C'est une réponse géniale! Je vais l'accepter, dites-moi, cela fonctionnera-t-il même si la forme n'est pas rectangle mais la forme personnalisée (disons la forme du continent américain)? –

Oui, n'importe quelle forme, et ils n'ont même pas besoin d'être connectés ... Vous pourriez faire toutes les 17000 îles individuelles en Indonésie si vous le vouliez! – markE

html5 forme personnalisée de toile de l'image

Répondre

Questions connexes