Question

我在使用html制作类似RISK的游戏时遇到问题。我现在使用的解决方案是给每个国家“位置：绝对;”然后将其定位在它所属的位置，但当用户想要鼠标悬停或点击所需的国家/地区时会出现问题。国家/地区被表示为块，并且具有国家形状的背景图像，因此，当您查看它时，您看不到它实际上是一个块。

你能给我一些例子或一个好的资源网站，我可以实现以下目标：

这是当前的样子：http://s24.postimg.org/402tvyovp/image.png

这就是我希望它的外观和行为：http://s24.postimg.org/5cpkuysmt/image.png

因此，元素具有国家的形状，而不是块，这意味着当用户将鼠标放入该形状（而不是围绕它的块）时，脚本将执行某些功能。

Answer 1

以下是如何识别在画布上点击了哪个自定义国家/地区形状

首先，使用photoshop将地图上的每个国家/地区更改为不同的独特颜色（彩色编码地图）

（别担心，用户不需要看到这个彩色编码的地图）。

然后当用户点击画布时，在点击点获取颜色并与您的国家/地区颜色进行比较：

    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});    
    }

您可能不希望为用户显示彩色编码的地图。如果没有，您可以在离屏画布上创建颜色编码的地图，该画布与屏幕画布相同 - 除了颜色编码。当用户点击屏幕上的画布时，您只需检查颜色编码地图上的像素位置即可。您可以获得屏幕美容+屏幕外功能。

这是代码和小提琴：http://jsfiddle.net/m1erickson/rmn5D/

请注意，由于跨站点浏览器安全警告，此小提琴不会使用您的确切地图 - 您需要替换自己的彩色编码地图。

<!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>

html5画布自定义图像形状

1 个答案: