Question

我尝试了三种不同的方法，但都没有效果。

我在画布上放置两个矩形，并希望在发生mousedown事件时捕捉鼠标光标下的对象。

stagemousedown有效，但找不到对象。看着调试器我看到矩形仍然是直接坐标，而不是我后面设置的坐标。还有一个'hitarea'我不知道如何使用，因为它在hittest和getObjectUnderPoint中被检查。

方法1：makeButton在第66ff行创建处理程序 - ＆gt;它永远不会发射

方法2：当mousedown evt发生时getObjectUnderPoint。 - ＆GT;返回始终为null

方法3：循环每个孩子并应用hitttest - ＆gt;总是假的。

我来自Java和C＃并且远没有JS的经验，但我希望我能用至少一种方法来捕捉mousedown。

让我想知道的是，矩形中的x和y永远不会改变创建过程中使用的x和y（0,0）。这不是我在73和74中设置的当前位置！

我似乎没有找到对象的REAL x和y，也没有找到方法2和3.我希望，方法1可以工作，因为这对我来说最有意义。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="./css/style.css">
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/1.0.2/easeljs.js"></script>
    <script>

    function init() {
        var followme = 0;
        var canvas = document.getElementById("canvas");
        var stage=new createjs.Stage(canvas);
        var shape=new createjs.Shape();
        var dispO = new createjs.Shape();

        makeBtn(3,3);
        makeBtn(300,300);
        stage.on("stagemousedown", function (evt) {
            followme = 1;
            found=stage.getObjectUnderPoint(stage.mouseX, stage.mouseY,0)
            if(found != null)
            {
                console.log(found);
            }
            var xxx=stage.children;
            for (i=0; i<xxx.length;i++)
            {
                if (xxx[i].hitTest(stage.mouseX, stage.mouseY))
                {
                    shape.alpha=1;
                }
            }
        });
        stage.on("stagemouseup", function (evt) {
            followme = 0;
        });
        stage.update();

        createjs.Ticker.setFPS(30);
        createjs.Ticker.addEventListener("tick", handleTick);
        function handleTick(event) 
        {
            if ((followme === 1) && (dispO != null))
            {
                var difX = stage.mouseX - dispO.x - 100;
                var difY = stage.mouseY - dispO.y - 50;

                dispO.x += difX / 20;
                dispO.y += difY / 20;
                stage.update();
            }
            else
            if(dispO != null)
            {
                var dmy=dispO;
            }
        }
        function makeBtn(x,y)
        {
                shape = new createjs.Shape();
                shape.graphics.beginStroke("black").setStrokeStyle(2, 0, 1).drawRect(0, 0, 200, 100);
                dispO=shape;
                dispO.mouseEventsEnabled = true;
                var handler=dispO.on("mousedown", 
                    function(event) {console.log(instance == this); },// true, "on" uses dispatcher scope by default.      
                    null,
                    once=true,
                    'theButton',
                    useCapture=true
                );
                dispO.x=x;
                dispO.y=y;
                stage.addChild(dispO);
                
        }
    }

    </script>
</head>
<body onload="init();">
    <div id="outer">
        <canvas id="canvas" width="500" height="600">
        </canvas>
            <menu id="controls">
            </menu>
    </div>
</body>
</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/1.0.2/easeljs.js"></script>

Answer 1

您的演示工作正常 - 只是您的方块没有填充，因此只有边框可点击。如果你添加一个填充，那么效果很好：

https://jsfiddle.net/lannymcnie/ozcr6tna/

shape.graphics.beginStroke("black")
  .setStrokeStyle(2, 0, 1)
  .beginFill("white") //      <----- Fill call
  .drawRect(0, 0, 200, 100);

如果您希望可点击区域透明，则可以使用hitArea。只需指定一个不同的形状，并将填充作为hitArea（并且不要将该形状添加到舞台上）。在EaselJS中的命中测试使用像素填充 - 所以如果没有像素，则没有命中！

希望有所帮助！

找不到光标下的对象

1 个答案: