Я пытаюсь использовать вещества. Код> падает на землю . Все работает, как и ожидалось, пока я не попытаюсь добавить MouseConstraint. My Mouse.element - это SVG Viewbox, который хорошо, но нажимать на поле ничего не делает. Приведенный ниже код также находится в этом коде. может щелкнуть/перетащить поле. Я не использую JavaScript в своем повседневном дне (кроме D3), так что это все немного непрозрачно.
Вот неработающий код:
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);
Подробнее здесь: https://stackoverflow.com/questions/794 ... ox-element
Как добавить вопрос. ⇐ Javascript
Форум по Javascript
1739648060
Anonymous
Я пытаюсь использовать вещества. Код> падает на землю . Все работает, как и ожидалось, пока я не попытаюсь добавить MouseConstraint. My Mouse.element - это SVG Viewbox, который хорошо, но нажимать на поле ничего не делает. Приведенный ниже код также находится в этом коде. может щелкнуть/перетащить поле. Я не использую JavaScript в своем повседневном дне (кроме D3), так что это все немного непрозрачно.
Вот неработающий код:
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);
Подробнее здесь: [url]https://stackoverflow.com/questions/79442128/how-to-add-a-matter-js-mouseconstraint-to-an-svg-viewbox-element[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия