Javascript 如何与小精灵中的形状交互?
我正在尝试获取鼠标当前悬停的形状的id 我的形状在一个容器里Javascript 如何与小精灵中的形状交互?,javascript,pixi.js,Javascript,Pixi.js,我正在尝试获取鼠标当前悬停的形状的id 我的形状在一个容器里 // creating the layers gridLayer = new PIXI.DisplayObjectContainer (); gridLayer.setInteractive(true); stage.addChild(gridLayer); 我正在创造每一个这样的形状 function drawHexagon(x,y, size, gap,scale, color, iterI, iterJ, type) {
// creating the layers
gridLayer = new PIXI.DisplayObjectContainer ();
gridLayer.setInteractive(true);
stage.addChild(gridLayer);
我正在创造每一个这样的形状
function drawHexagon(x,y, size, gap,scale, color, iterI, iterJ, type) {
var shape = new PIXI.Graphics();
// set a fill and line style
shape.beginFill(color);
shape.lineStyle(1, 0xa0a0a0, 1);
size = size-gap;
for (i = 0; i < 7; i++) {
angle = 2 * Math.PI / 6 * (i + 0.5);
var x_i = x + size * Math.cos(angle);
var y_i = y + size * Math.sin(angle);
if (i === 0) {
shape.moveTo(x_i, scale *y_i)
}
else {
shape.lineTo(x_i, scale * y_i)
}
};
shape.endFill();
// calculate and save the axial coordinates
var cX = iterJ - (iterI - (iterI&1)) / 2;
var cZ = iterI;
var cY = -1*(cX+cZ);
shape.hexId = cX + "x" + cY + "y" + cZ + "z";
shape.hexPosX = x;
shape.hexPosY = y;
shape.setInteractive(true);
shape.mouseover = function(mouseData){
console.log("MOUSE OVER " + shape.hexId);
}
shape.click = function(mouseData){
console.log("MOUSE CLICK " + shape.hexId);
}
gridLayer.addChild(shape);
}
及
但这两种方法对我都不管用
编辑:我添加了一个JSFIDLE。它不起作用(我不知道如何在JSFIDLE中链接东西),但您可以在那里看到我的全部代码。
对于要交互的PIXI.Graphics对象,您需要设置hitArea形状(可以是矩形、圆形或多边形): 另一种方法是从形状生成纹理并使用精灵,但命中区域将是六边形的整个矩形边界:
var texture = shape.generateTexture();
var sprite = new PIXI.Sprite(texture);
sprite.setInteractive(true);
sprite.anchor.set(0.5, 0.5);
我将为与我同舟共济的任何人添加一些信息 将形状定义为几何图形时,必须显式声明一个区域 因此,添加以下代码可以使其正常工作
shape.hitArea = new PIXI.Polygon(vertices);
shape.interactive = true;
shape.click = function(mouseData){
console.log("MOUSE CLICK " + shape.hexId);
}
但是,当您将形状定义为精灵/纹理时,不需要这样做。
对于精灵,只需为精灵设置
shape.interactive=true
。您不需要为父对象或阶段设置交互属性。@imcg我更新了您的代码,使其适用于Pixi 3.0.8
- sprite.setInteractive(true);
+ shape.interactive = true;
+ shape.buttonMode = true;
- sprite.setInteractive(true)
+ sprite.interactive = true;
+ sprite.buttonMode = true;
您是否通过将true传递给stage构造函数的第二个参数来使stage具有交互性?e、 新PIXI阶段(0x000000,真)是。但奇怪的是,我仍然没有得到console.log。谢谢。最让我困惑的是pixi博客上的这篇文章,作者在那里说:“唯一值得一提的是,您还可以为displayObject设置hitArea。hitArea定义了一个矩形,用于该displayObject的触摸和鼠标检测。如果您的显示对象包含大量的子对象,那么使用hitArea也可以是优化代码的一种巧妙方式,因为这意味着对于交互管理器来说,触摸/鼠标检测变得简单得多!“这让我觉得Hitbox是可选的,主要用于优化。是的,这一点也不直观,与PIXI的大多数功能相比,PIXI的这些功能非常容易使用。不过多边形hitArea选项非常酷!如果您想将图形对象的顶点重新用作hitArea,可以使用:myObject.hitArea=myObjectct.currentPath.shape;
var texture = shape.generateTexture();
var sprite = new PIXI.Sprite(texture);
sprite.setInteractive(true);
sprite.anchor.set(0.5, 0.5);
shape.hitArea = new PIXI.Polygon(vertices);
shape.interactive = true;
shape.click = function(mouseData){
console.log("MOUSE CLICK " + shape.hexId);
}
- sprite.setInteractive(true);
+ shape.interactive = true;
+ shape.buttonMode = true;
- sprite.setInteractive(true)
+ sprite.interactive = true;
+ sprite.buttonMode = true;