[]sprite点击事件 位置便宜


var canvas2 = Laya.init(480, 360, WebGL);
canvas2.style.top = canvas.style.top;
canvas2.style.left = canvas.style.left;
当设置stage的位置的时候,再设置sprite的点击事件,发现位置会偏移,点击促发的位置和stage的位置设置有关系,要怎么解决呢
 
已邀请:

Aar0n

赞同来自:

给sprite 设置hitarea

mason311

赞同来自:

let hitArea = new Laya.Rectangle(rect.x-100,rect.y-100,200,200);
rect.hitArea = hitArea;
是这样设置吗,还是不可以呢?

Aar0n

赞同来自:

发demo 我给你看一下吧

mason311

赞同来自:

代发直接发这里吗,还是家qq 呢

mason311

赞同来自:

 var Sprite  = Laya.Sprite;
var Stage = Laya.Stage;
var Text = Laya.Text;
var Event = Laya.Event;
var Browser = Laya.Browser;
var WebGL = Laya.WebGL;

(function()
{
// 不支持WebGL时自动切换至Canvas
<!--laya-stage-->
const canvas = document.getElementById('laya-stage');
Browser.container = canvas;
var canvas2 = Laya.init(480, 360, WebGL);

// Laya.stage.bgColor = "#232628";
setup();

})();


function setup()
{
createInteractiveTarget();
createLogger();
}

function createInteractiveTarget()
{
var rect = new Sprite();
rect.graphics.drawRect(0, 0, 200, 200, "#D2691E");

rect.size(200, 200);
rect.pivot(100,100);
rect.x = Laya.stage.width /2;
rect.y = Laya.stage.height / 2;
// let hitArea = new Laya.Rectangle(rect.x-100,rect.y-100,200,200);
// rect.hitArea = hitArea;
Laya.stage.addChild(rect);

//增加鼠标事件
rect.on(Event.MOUSE_DOWN, this, mouseHandler);
rect.on(Event.MOUSE_UP, this, mouseHandler);
rect.on(Event.CLICK, this, mouseHandler);
rect.on(Event.RIGHT_MOUSE_DOWN, this, mouseHandler);
rect.on(Event.RIGHT_MOUSE_UP, this, mouseHandler);
rect.on(Event.RIGHT_CLICK, this, mouseHandler);
rect.on(Event.MOUSE_MOVE, this, mouseHandler);
rect.on(Event.MOUSE_OVER, this, mouseHandler);
rect.on(Event.MOUSE_OUT, this, mouseHandler);
rect.on(Event.DOUBLE_CLICK, this, mouseHandler);
rect.on(Event.MOUSE_WHEEL, this, mouseHandler);
}

/**
* 鼠标响应事件处理
*/
function mouseHandler(e)
{
switch (e.type)
{
case Event.MOUSE_DOWN:
appendText("\n————————\n左键按下");
break;
case Event.MOUSE_UP:
appendText("\n左键抬起");
break;
case Event.CLICK:
appendText("\n左键点击\n————————");
break;
case Event.RIGHT_MOUSE_DOWN:
appendText("\n————————\n右键按下");
break;
case Event.RIGHT_MOUSE_UP:
appendText("\n右键抬起");
break;
case Event.RIGHT_CLICK:
appendText("\n右键单击\n————————");
break;
case Event.MOUSE_MOVE:
// 如果上一个操作是移动,提示信息仅加入.字符
if (/鼠标移动\.*$/.test(txt.text))
appendText(".");
else
appendText("\n鼠标移动");
break;
case Event.MOUSE_OVER:
appendText("\n鼠标经过目标");
break;
case Event.MOUSE_OUT:
appendText("\n鼠标移出目标");
break;
case Event.DOUBLE_CLICK:
appendText("\n鼠标左键双击\n————————");
break;
case Event.MOUSE_WHEEL:
appendText("\n鼠标滚轮滚动");
break;
}
}

function appendText(value)
{
txt.text += value;
txt.scrollY = txt.maxScrollY;
}

/**添加提示文本*/
function createLogger()
{
txt = new Laya.Text();

txt.overflow = Laya.Text.SCROLL;
txt.text = "请把鼠标移到到矩形方块,左右键操作触发相应事件\n";
txt.size(Laya.stage.width, Laya.stage.height);
txt.pos(10, 50);
txt.fontSize = 20;
txt.wordWrap = true;
txt.color = "#FFFFFF";

Laya.stage.addChild(txt);
}

laya-stage为页面一个div,设置样式为
    border: 2px solid #999;
display: block;
width: 480px;
height: 360px;
position: relative;
top:100px;
left:100px;
这样导致鼠标事件偏移

要回复问题请先

商务合作
商务合作