将鼠标悬停在光标位置上的画上的文字

Question

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

This is一个简单的演示来重现该问题，当您使用光标越过节点时，我会绘制文本，在这种情况下为“ @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，启用方法是模块nghraph.events。>

我在光标位置绘制PIXI.Text时遇到问题。这是重现问题的简单演示，当您使用光标越过节点时，我会绘制文本，在这种情况下，为“ @ ...

Answer 1

在您的示例代码（第一段）中，“ moseover”处理程序应从以下位置更改：