html 鼠标悬停触发,javascript-使用PixiJS的交互式图形-鼠标悬停不会触发,而单击会触发...

将鼠标悬停在Graphics元素上时尝试触发事件.

click事件按预期方式工作,但是mouseover似乎没有触发.

这是fiddlejs链接的摘录：

var renderer = PIXI.autoDetectRenderer(500, 500, null, true);

var stage = new PIXI.Stage(0xFFFFFF);

stage.interactive = true;

document.getElementById("canvas").appendChild(renderer.view);

var rect = new PIXI.Graphics();

rect.lineStyle(1, 0x000);

rect.interactive = true;

rect.hitArea = new PIXI.Rectangle(0,0, 200, 200);

rect.drawRect(0,0, 200,200);

rect.click = function(ev) { console.log("clicked"); }

rect.mouseover = function(ev) { console.log("over"); }

stage.addChild(rect);

renderer.render(stage);

也许我应该使用精灵而不是图形元素？

谢谢！

解决方法:

PIXI.InteractionManager在其update()函数中处理mouseover和mouseout事件.您需要不断更新渲染器每一帧,以便获得这些事件的响应

var renderer = PIXI.autoDetectRenderer(500, 500, null, true);

var stage = new PIXI.Stage(0xFFFFFF);

stage.interactive = true;

document.getElementById("canvas").appendChild(renderer.view);

var rect = new PIXI.Graphics();

rect.lineStyle(1, 0x000);

rect.interactive = true;

rect.hitArea = new PIXI.Rectangle(0,0, 200, 200);

rect.drawRect(0,0, 200,200);

rect.click = function(ev) { console.log("clicked"); }

rect.mouseover = function(ev) { console.log("over"); }

stage.addChild(rect);

update();

function update(){

requestAnimFrame(update);

renderer.render(stage);

};

标签：pixi-js,javascript

来源： https://codeday.me/bug/20191028/1956219.html