在鼠标上绘制文本 将鼠标悬停在光标位置的图形上

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，方法 on and fire 是模块 nghraph.events

Answer 1

在您的示例代码（第一个 sn-p）中，“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>

另请参阅：

• “交互/拖动”Pixi.js 演示（附源码）：https://pixijs.io/examples/#/interaction/dragging.js
• Igor Neuhold 的“向鼠标旋转并朝那个方向射击”教程：http://proclive.io/shooting-tutorial/
• Pixi.js API 参考：
  • https://pixijs.download/dev/docs/PIXI.DisplayObject.html#event:mousemove
  • https://pixijs.download/dev/docs/PIXI.interaction.InteractionEvent.html
  • https://pixijs.download/dev/docs/PIXI.interaction.InteractionData.html