sprite点击事件位置便宜

mason311

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

[code] 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

        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);
    }[/code]

laya-stage为页面一个div，设置样式为[code] border: 2px solid #999;

    display: block;
    width: 480px;
    height: 360px;
    position: relative;
    top:100px;
    left:100px;[/code]这样导致鼠标事件偏移