将鼠标悬停在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);
FiddleJS链接:
http://jsfiddle.net/anps0abt/
也许我应该使用精灵而不是图形元素?
谢谢!
解决方法:
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);
};
http://jsfiddle.net/anps0abt/3/
标签:pixi-js,javascript 来源: https://codeday.me/bug/20191028/1956219.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。