Нарисуйте текст при наведении мыши на графику в позиции курсора - PullRequest
Новая
       55

Нарисуйте текст при наведении мыши на графику в позиции курсора

1 голос
/ 01 ноября 2019

У меня проблема, когда я иду рисовать 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);
  }

}

Я использую ngraph.events на ctx (это графика PIXI)объект, метод on и fire это модуль nghraph.events

1 Ответ

1 голос
/ 02 ноября 2019

В вашем примере кода (первый фрагмент) обработчик «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 ", чтобы наблюдать это в консоли браузера devtools.

Затем нам также нужно обработать событие 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>

См. Также:

...