1

我正在尝试用物质 js来创建物体（物体）落到重力下。下面是我用来创建的示例代码。我想在此正文顶部添加一个超链接，以便用户可以单击创建的正文并导航。有没有办法将 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);
4

1 回答 1

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

笔记！为了使超链接正常工作，请不要忘记禁用您最喜欢的网络浏览器上的弹出窗口阻止程序。

于 2018-11-11T22:56:08.923 回答