Question

我希望我的功能能够采用矩形坐标。系统并返回true或false，以确定是否在区域内单击了鼠标。

这应该设置一个区域供用户点击，顶部的上角是in1X，in1Y和in2X，in2Y。

       if ((event.clientX  >= in1X && event.clientX  <= in2X) &&
            (event.clientY >= in1Y && event.clientY  <= in2Y)) {
                context.font = "20px Arial";
                context.fillText("Click Me",100,300);
       }

代码：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>
    <script>
      var canvas  = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(20, 20, 100, 100);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = 'black';
      context.stroke();

      var mouseIsDown = false;

        canvas.onmousedown = function(e){
            var Test1X,Test1Y;
            Test1X = 20;
            Test1Y = 20;

            var Test2X,Test2Y;
            Test2X = 100;
            Test2Y = 100;

            CheckIfInCoord(Test1X,Test1Y,Test2X,Test2Y,e);

            mouseIsDown = true;
        }
        canvas.onmouseup = function(e){
            if(mouseIsDown) {
                mouseClick(e);
            }

            mouseIsDown = false;
        }

        canvas.onmousemove = function(e){
            if(!mouseIsDown) {
                return;
            }

            return false;
        }

        //mouse click is both a onmouseup and onmousedown
        function mouseClick(e){
            context.font = "20px Arial";
            context.fillText("Should be in Square",10,150);
        }

        function CheckIfInCoord(in1X,in1Y,in2X,in2Y,event) {
            console.log(event.x);
            console.log(event.y);
              console.log("--");
            console.log(in1X);
            console.log(in2X);

            if (event.clientX  >= in1X) {
                    context.font = "20px Arial";
                    context.fillText("Click Me",100,300);
            }


        }
    </script>
  </body>
</html>

enter image description here

实际上它似乎可以在第一次点击时工作，但如果再次点击则会打印点击进入屏幕。

小提琴：

http://jsfiddle.net/doughauf/dnx85rva/

Answer 1

我相信你必须使用event.clientX / event.clientY而不是event.x / event.y

Answer 2

我将小提琴上的代码更改为如下所示。这似乎工作但我确实注意到，在第一次点击的某些情况下，它给垃圾，但如果页面刷新，那么将工作。

如果你需要做更多的工作，请告诉我。

  var canvas  = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.beginPath();
  context.rect(20, 20, 100, 100);
  context.fillStyle = 'yellow';
  context.fill();
  context.lineWidth = 1;
  context.strokeStyle = 'black';
  context.stroke();

  var mouseIsDown = false;

    canvas.onmousedown = function(e){
        var Test1X,Test1Y;
        Test1X = 20;
        Test1Y = 20;

        var Test2X,Test2Y;
        Test2X = 100;
        Test2Y = 100;

        CheckIfInCoord(Test1X,Test1Y,Test2X,Test2Y,e);

        mouseIsDown = true;
    }

    canvas.onmouseup = function(e){
        if(mouseIsDown) {
            mouseClick(e);
        }

        mouseIsDown = false;
    }

    canvas.onmousemove = function(e){
        if(!mouseIsDown) {
            return;
        }

        return false;
    }

    function mouseClick(e){
    }

    function CheckIfInCoord(in1X,in1Y,in2X,in2Y,event) {
        if ((event.clientX  >= in1X && event.clientX  <= in2X) &&
            (event.clientY  >= in1Y && event.clientY  <= in2Y)) {
                context.fillStyle    = 'white';
                context.font = "20px Arial";
                context.fillText("Out of box",200,300);

                context.fillStyle    = 'red';
                context.font = "20px Arial";
                context.fillText("In box",100,300);
        } else {
            context.fillStyle    = 'white';
            context.font = "20px Arial";
            context.fillText("In box",100,300);

            context.fillStyle    = 'red';
            context.font = "20px Arial";
            context.fillText("Out of box ",200,300);
        }
    }

单击特定坐标（返回TRUE或FALSE）？

2 个答案: