Объект под курсором не найден
Я пробовал три разных подхода, но ни один не работал.
Я помещаю два прямоугольника на холст и хочу поймать объект под курсором мыши, когда произошло событие mousedown.
Сценарная работа работает, но объекты не найдены. Наблюдая за отладчиком, я вижу, что у прямоугольника все еще есть координаты рисования, а не те, которые я установил позже. Существует также "hitarea", который я не знаю, как использовать, так как он проверяется во время hittest и getObjectUnderPoint.
Подход 1: makeButton создает обработчик в строках 66ff -> он никогда не срабатывает
Подход 2: getObjectUnderPoint, когда происходит сбой mousedown. -> возвращает всегда ноль
Подход 3: переберите каждого дочернего элемента и примените метод hitttest -> всегда возвращает false.
Я пришел из Java и C# и далек от того, чтобы иметь опыт работы с JS, но я надеялся, что смогу поймать муссоун хотя бы одним подходом.
Что заставляет меня задуматься, так это то, что x и y в прямоугольнике никогда не меняются по сравнению с теми, которые использовались при создании (0,0). Это не текущая позиция, которую я установил, например, в 73 и 74!
Кажется, я не нахожу НАСТОЯЩИХ 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>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 использует заполнение пикселями - так что если нет пикселей, то и попадания нет!
Надеюсь, это поможет!