3

当我在光标位置绘制 PIXI.Text 时遇到问题。

这是重现问题的简单演示，当您用光标越过节点时，我会绘制文本，在这种情况下，“@author vincenzopalazzo”但我想要节点上的位置，所以我认为为了解决问题我已经得到解决方案我必须设置鼠标的位置。

但我不知道得到这个职位，所以这是一个用 PIXI 重现问题的例子

//setup Pixi renderer
var renderer = PIXI.autoDetectRenderer(600, 400, {
  backgroundColor: 0x000000
});
document.body.appendChild(renderer.view);

// create new stage
var stage = new PIXI.Container();

// create helpful message
var style = {
  font: '18px Courier, monospace',
  fill: '#ffffff'
};


// create graphic object called circle then draw a circle on it
var circle = new PIXI.Graphics();
circle.lineStyle(5, 0xFFFFFF, 1);
circle.beginFill(0x0000FF, 1);
circle.drawCircle(150, 150, 100);
circle.endFill();
circle.alpha = 0.5;
stage.addChild(circle);

// designate circle as being interactive so it handles events
circle.interactive = true;

// create hit area, needed for interactivity
circle.hitArea = new PIXI.Circle(150, 150, 100);

// make circle non-transparent when mouse is over it
circle.mouseover = function(events) {
    var message = new PIXI.Text('Hover your mouse over the circle to see the effect.', style);
  message.x = events.clientX;
  message.y = events.clientY;
  circle.message = message;
  circle.addChild(message);
}

// make circle half-transparent when mouse leaves
circle.mouseout = function(mouseData) {
  this.alpha = 0.5;
  circle.removeChild(circle.message);
  delete circle.message;
}

// start animating
animate();

function animate() {
  requestAnimationFrame(animate);
  // render the root container
  renderer.render(stage);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.4/pixi.js"></script>

这是我的真实代码

   module.exports = function (animatedNode, ctx) {

  ctx.on('hover', function(animatedNode, ctx){
    let x = animatedNode.pos.x;
    let y = - animatedNode.pos.y / 2;
    if(animatedNode.label === undefined){
      animatedNode.label = new PIXI.Text('@author vincenzopalazzo', { fontFamily: "Arial", fontSize: "20px" ,  fill: 0x000000} );
      animatedNode.label.x = x;
      animatedNode.label.y = y + animatedNode.width/2;
      ctx.addChild(animatedNode.label);
    }else{
      animatedNode.label.x = x;
      animatedNode.label.y = y + animatedNode.width/2;
    }
  });

  ctx.on('unhover', function(animatedNode, ctx){
      ctx.removeChild(animatedNode.label);
      delete animatedNode.label;

  });

  ctx.mouseover = function() {
    console.debug('I\'call the hover events');
    this.fire('hover', animatedNode, ctx);
  }

  ctx.mouseout = function() {
    console.debug('I\'call the unhover events');
    this.fire('unhover', animatedNode, ctx);
  }

}

我在 ctx （它是 PIXI 图形）对象上使用 ngraph.events，方法 on and fire 是模块 nghraph.events

4

1 回答 1

3

在您的示例代码（第一个片段）中，“moseover”处理程序应更改为：

// make circle non-transparent when mouse is over it
circle.mouseover = function(events) {
    var message = new PIXI.Text('Hover your mouse over the circle to see the effect.', style);
    message.x = events.clientX;
    message.y = events.clientY;
    circle.message = message;
    circle.addChild(message);
}

至：

    // make circle non-transparent when mouse is over it
    circle.on('mouseover', function(event) {
        // console.log('mouse is over the circle');
        // console.log(event); // see in (for example in Chrome Devtools console) what is inside this variable

        var message = new PIXI.Text('Hover your mouse over the circle to see the effect.', style);
        // By looking at what "console.log(event)" shows we can see that instead of:
        // message.x = events.clientX;
        // message.y = events.clientY;
        // should be:
        message.x = event.data.global.x;
        message.y = event.data.global.y;

        circle.message = message;
        circle.addChild(message);
    });

要进一步了解它，您可以取消注释“console.log”行以在浏览器开发工具控制台中观察它。

然后我们还需要像这样处理'mouseover'事件：

    circle.on('mousemove',function (event) {
        if (!circle.message) {
            return;
        }

        var newPosition = event.data.getLocalPosition(this.parent);
        circle.message.x = newPosition.x;
        circle.message.y = newPosition.y;
    });

所以整个可运行的例子是这样的：

//setup Pixi renderer
var renderer = PIXI.autoDetectRenderer(600, 400, {
  backgroundColor: 0x000000
});
document.body.appendChild(renderer.view);

// create new stage
var stage = new PIXI.Container();

// create helpful message
var style = {
  font: '18px Courier, monospace',
  fill: '#ffffff'
};


// create graphic object called circle then draw a circle on it
var circle = new PIXI.Graphics();
circle.lineStyle(5, 0xFFFFFF, 1);
circle.beginFill(0x0000FF, 1);
circle.drawCircle(150, 150, 100);
circle.endFill();
circle.alpha = 0.5;
stage.addChild(circle);

// designate circle as being interactive so it handles events
circle.interactive = true;

// create hit area, needed for interactivity
circle.hitArea = new PIXI.Circle(150, 150, 100);


    // make circle non-transparent when mouse is over it
    circle.on('mouseover', function(event) {
        // console.log('mouse is over the circle');
        // console.log(event); // see in (for example in Chrome Devtools console) what is inside this variable

        var message = new PIXI.Text('Hover your mouse over the circle to see the effect.', style);
        // By looking at what "console.log(event)" shows we can see that instead of:
        // message.x = events.clientX;
        // message.y = events.clientY;
        // should be:
        message.x = event.data.global.x;
        message.y = event.data.global.y;

        circle.message = message;
        circle.addChild(message);
    });


    circle.on('mousemove',function (event) {
        if (!circle.message) {
            return;
        }

        var newPosition = event.data.getLocalPosition(this.parent);
        circle.message.x = newPosition.x;
        circle.message.y = newPosition.y;
    });


// make circle half-transparent when mouse leaves
circle.mouseout = function(mouseData) {
  this.alpha = 0.5;
  circle.removeChild(circle.message);
  delete circle.message;
}

// start animating
animate();

function animate() {
  requestAnimationFrame(animate);
  // render the root container
  renderer.render(stage);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.4/pixi.js"></script>

另请参阅：

于 2019-11-02T14:53:35.280 回答