Question

您好我是Javascript和HTML的新手我已经在网络开发公司担任实习生3个月了。我决定进行一个个人项目，试图提高我的技能，并帮助我所在的社区。

基本上我正在制作一个难以处理的银河地图，它允许人们在他们故事中使用的地图上放置和命名系统。我的目标是为我所在的社区创建一个单独的地方。我想要的帮助是，当用户点击画布时，他们将被带到“扇区视图，在那里他们可以再次点击并放置他们的系统。

我需要帮助的是，每个部门都加入其他部门，并且如果你足够接近这一点，就应该显示加入部门的主张。我怎么能这样做，目前我所想的不允许我这样做。

以下是我目前为自己的网站构建的图片：Website Screenshot

这是我第一次尝试这样做，所以我发现它有点难以解释我需要什么。如果您需要更多信息，请尽量尽量回答。

Brainwave ：好的，我想过使用一些数学来检查点击坐标半径范围内的任何声明。任何人都可以指出我正确的方向来解决这个问题吗？以及保持它不变成怪物的一些好方法。

Answer 1

您可以使用此数学测试圆形“声明”是否位于单击“搜索半径”内：

var dx=mouseX-claimX;
var dy=mouseY-claimY;
if(dx*dx+dy*dy < searchRadius*searchRadius – claimRadius*claimRadius){
    console.log(“This claim is within the search radius”);
}

这是如何使用此数学在用户的搜索范围内显示声明的一个示例

左侧画布是用户进行搜索并仅显示搜索半径中的那些声明。

右侧画布显示所有声明。

enter image description here

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

<!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: black; padding:20px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

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

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

    var startX;
    var startY;
    var isDown=false;


    var claims=[];
    var searchRadius=50;
    var searchRadius2=searchRadius*searchRadius;

    for(var i=0;i<20;i++){
        var x=parseInt(Math.random()*350);
        var y=parseInt(Math.random()*250);
        var radius=parseInt(Math.random()*10+10);
        var color=randomColor();
        claims.push({
            x:x,
            y:y,
            radius:radius,
            color:color
        });

        revealCtx.beginPath();
        revealCtx.arc(x,y,radius,0,Math.PI*2,false);
        revealCtx.fillStyle=color;
        revealCtx.fill();
        revealCtx.stroke();

    }


    // create a random color object {red,green,blue}
    function randomColor(){
        return("#"+Math.floor(Math.random()*16777215).toString(16));
    }


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

      ctx.clearRect(0,0,canvas.width,canvas.height);
      for(var i=0;i<claims.length;i++){
          var claim=claims[i];
          var dx=mouseX-claim.x;
          var dy=mouseY-claim.y;
          var rr=claim.radius*claim.radius;
          if(dx*dx+dy*dy<searchRadius2-rr){
              ctx.beginPath();
              ctx.arc(claim.x,claim.y,claim.radius,0,Math.PI*2,false);
              ctx.closePath();
              ctx.fillStyle=claim.color;
              ctx.fill();
              ctx.stroke();
          }
      }
      // draw sighting scope
      ctx.beginPath();
      ctx.arc(mouseX,mouseY,searchRadius,Math.PI*2,false);
      ctx.closePath();
      ctx.moveTo(mouseX-searchRadius,mouseY);
      ctx.lineTo(mouseX+searchRadius,mouseY);
      ctx.moveTo(mouseX,mouseY-searchRadius);
      ctx.lineTo(mouseX,mouseY+searchRadius);
      ctx.fillStyle="white";
      ctx.globalAlpha=.40;
      ctx.fill();
      ctx.stroke();
      ctx.globalAlpha=1.00;

    }

    $("#canvas").mousemove(function(e){handleMouseMove(e);});

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

</head>

<body>
    <canvas id="canvas" width=350 height=250></canvas>
    <canvas id="reveal" width=350 height=250></canvas>
</body>
</html>

在顶部画布层下连接彼此相邻的绘图图像

1 个答案: