Wie füge ich einem SVG ViewBox -Element eine Materie hinzu. ⇐ JavaScript

[Guest]

Ich versuche, Materie.js für die Physik -Engine zu verwenden, während ich D3.JS zum Rendern der Materie Physikkörper als SVG -Elemente verwendet. Code> auf den Boden fallen. Alles funktioniert wie erwartet, bis ich versuche, eine Mouseconstraint hinzuzufügen. Meine Maus. Der folgende Code befindet sich auch in diesem CodePen. Kann das Feld auf das Feld klicken/ziehen. Ich benutze JavaScript in meinem Alltag nicht (neben einigen D3), also ist das alles für mich etwas undurchsichtig.

Code: Select all

const Engine = Matter.Engine
const Bodies = Matter.Bodies
const Composite = Matter.Composite
const World = Matter.World

const width = 400;
const height = 400;

// Helpers
vertices_to_points = function(vertices) {
return vertices.map(vertex => `${vertex.x},${vertex.y}`).join(" ");
}

// Initialize D3 selection
const svg = d3.select("#container")
.append("svg")
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");

// Initialize physics objects
const engine = Engine.create();
const world = engine.world;
const bodies = world.bodies;

const box = Bodies.rectangle(width/2, height/2, 100, 100);
const ground = Bodies.rectangle(width/2, height - 25, width - 10, 40, { isStatic: true });
Composite.add(engine.world, [box, ground]);

// Render
bodies.forEach(body => {
svg.append("polygon")
.attr("id", `body-${body.id}`)
.attr("points", vertices_to_points(body.vertices))
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", 2)
});

// Update + render loop
(function update() {
window.requestAnimationFrame(update);
Engine.update(engine, 5);

// Move the vertices to sync the D3  with the Matter
// physics body.
bodies.forEach(body => {
svg.select(`#body-${body.id}`)
.attr("points", vertices_to_points(body.vertices))
});
})();

// Mouse interaction (DOES NOT WORK)
const mouse = Matter.Mouse.create(svg.node());
mouse.pixelRatio = 2;
const mouse_constraint = Matter.MouseConstraint.create(engine, {
mouse: mouse
})
World.add(world, mouse_constraint);