Matter.js - опция для добавления html в тело

Question

Я пробую материю создавать объекты (тела), падающие под действием силы тяжести. Ниже приведен мой пример кода для создания. Я хочу добавить гиперссылку поверх этого тела, чтобы пользователь мог щелкнуть по созданному телу и перемещаться. Есть ли способ добавить или добавить HTML-код в тело, созданное в Matter JS.

    var phone = Matter.Bodies.rectangle(600, 200, 65, 45,  {
        id : 'phoneBody',
    density: 30.04,
    friction: 10.01,
    frictionAir: 0.00001,
    restitution: 0.2,

    render: {
        fillStyle: '#F35e66',
        strokeStyle: 'black',
        lineWidth: 1,
        sprite: {
                    texture: './images/phone.png'
                }
    }
});
Matter.World.add(world, phone); 

Answer 1

Объявление гиперссылки на тело в Matter.js - это пользовательская реализация (т. Е. Обработка событий для обеспечения интерактивности, такой как гиперссылки).

Эта пользовательская реализация будет включать следующее:

1. Определите URL для данного тела
2. Объявить обработчик событий мыши для интерактивности (т.е. реагировать на события mouseup)

---

Детали реализации

URL может быть определен для данного тела, как показано ниже:

var phone = Matter.Bodies.rectangle(30, 50, 35, 55, {
              id : 'phoneBody',
              density: 30.04,
              friction: 0.15,
              frictionAir: 0.15,
              restitution: 0.2,
              render: { 
                fillStyle: '#F35e66',
                strokeStyle: 'black',
                lineWidth: 1
              },
              url: "https://www.phone.com"
            });

Теперь вам нужно объявить обработчик событий мыши, чтобы взаимодействовать с существующими в мире телами.

Это делается в два этапа: (i) Объявление интерактивного объекта мыши и добавление его в мир. (Ii) Объявление обработчика события On-Mouseup для предоставления функции гиперссылки.

// Create a Mouse-Interactive object & add it to the World
render.mouse = Matter.Mouse.create(render.canvas);
var mouseInteractivity = Matter.MouseConstraint.create(engine, {
                          mouse: render.mouse,
                          constraint: {
                            stiffness: 0.2,
                            render: { visible: false }
                          }
                         });
Matter.World.add(engine.world, mouseInteractivity);

// Create a On-Mouseup Event-Handler
Events.on(mouseInteractivity, 'mouseup', function(event) {
  var mouseConstraint = event.source;
  var bodies = engine.world.bodies;
  if (!mouseConstraint.bodyB) {
    for (i = 0; i < bodies.length; i++) { 
      var body = bodies[i];
      if (Matter.Bounds.contains(body.bounds, mouseConstraint.mouse.position)) {
        var bodyUrl = body.url;
        console.log("Body.Url >> " + bodyUrl);
        // Hyperlinking feature
        if (bodyUrl != undefined) {
          window.open(bodyUrl, '_blank');
          console.log("Hyperlink was opened");
        }
        break;
      }
    }
  }
});

Не стесняйтесь поиграть с вышеуказанной реализацией в CodePen >> https://codepen.io/anon/pen/xQEaQX?editors=0011

Заметка! Чтобы гиперссылка работала, не забудьте отключить блокировку всплывающих окон в вашем любимом веб-браузере.