2017-12-21 13 views
0

私は3つのアプローチを試みましたが、どれもうまくいきませんでした。カーソルの下のオブジェクトが見つかりません

私はキャンバス上に2つの矩形を配置し、マウスカーソルの下のオブジェクトを捕まえたいときは、マウスイベントが発生しました。

stagemousownownは機能しますが、オブジェクトが見つかりません。デバッガを見て、私は後で設定したものではなく、描画座標を描画しています。また、hittestとgetObjectUnderPointの間にチェックされているので、使用方法がわからない 'hitarea'もあります。

アプローチ1:makeButtonはライン上のハンドラを作成します66ff - >それは決してアプローチ2

発射しません:getObjectUnderPointのMouseDown EVTが起こります。 - >は常にnullを返します

アプローチ3:各子をループし、hitttest - >を常に返します。

私はJavaとC#から来て、JSでの経験は遠いですが、私は少なくとも1つのアプローチでmousedownを捕まえることができると期待していました。

矩形内の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>

答えて

0

あなたのデモが正常に動作します - あなたの正方形は何の塗りつぶしを持っていないそのことだけなので、唯一の境界線がクリック可能です。あなたは塗りつぶしを追加する場合、それは素晴らしい作品:

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のヒットテストではピクセル塗りが使用されているため、ピクセルがない場合はヒットしません!

希望に役立ちます!

関連する問題