私は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>