Matter.js не обновляет свойства тела, если используется средство визуализации Pixi.js.

Я хочу обновить определенные свойства тела, если пользователь нажмет на него, например. body.render.lineWidth = 5; Он отлично работает, если используется рендеринг холста по умолчанию. Если я переключусь на Pixi.js renderer, он перестает работать и вообще не отражает каких-либо свойств. Я также пробовал с функцией Matter.Body.set, но также не повезло. Свойства : набор фактически к телу, но тело продолжает показывать начальный стиль, который был предоставлен во время строительства.Matter.js не обновляет свойства тела, если используется средство визуализации Pixi.js.

Каков правильный способ установки этих свойств?

EDIT: sample.js

var Engine = Matter.Engine, 
    World = Matter.World, 
    Bodies = Matter.Bodies, 
    Common = Matter.Common, 
    MouseConstraint = Matter.MouseConstraint; 

var createOptions = function(options) { 
    var defaults = { 
     isManual: false, 
     sceneName: 'mixed', 
     sceneEvents: [] 
    }; 
    return Common.extend(defaults, options); 
}; 

var options = { 
    positionIterations: 6, 
    velocityIterations: 4, 
    enableSleeping: false, 
    metrics: { extended: true }, 
    render: { 
     controller: Matter.RenderPixi 
    } 
}; 

var engine = Engine.create(document.getElementById('canvas-container'), createOptions(options)); 
var world = engine.world; 

var mouseConstraint = MouseConstraint.create(engine, { 
    constraint: { 
    render: { 
     visible: false 
    } 
    } 
}); 
World.add(engine.world, mouseConstraint); 

World.add(world, [ 
    Bodies.rectangle(400, 0, 800, 1, { isStatic: true }), 
    Bodies.rectangle(400, 600, 800, 1, { isStatic: true }), 
    Bodies.rectangle(800, 300, 1, 600, { isStatic: true }), 
    Bodies.rectangle(0, 300, 1, 600, { isStatic: true }) 
]); 

var body = Bodies.polygon(200, 200, 4, Common.random(50, 60), { 
    isStatic: true, 
    friction: 1, 
    render: { 
     fillStyle: '#f0f0f0', 
     strokeStyle: 'black', 
     lineWidth: 1 
    } 
}); 

World.add(world, body); 

Matter.Events.on(mouseConstraint, 'mousedown', function(e) { 
    body.render.lineWidth = 5; 
}); 

var renderOptions = engine.render.options; 
renderOptions.wireframes = false; 
renderOptions.hasBounds = false; 
renderOptions.showDebug = false; 
renderOptions.showBroadphase = false; 
renderOptions.showBounds = false; 
renderOptions.showVelocity = false; 
renderOptions.showCollisions = false; 
renderOptions.showAxes = false; 
renderOptions.showPositions = false; 
renderOptions.showAngleIndicator = false; 
renderOptions.showIds = false; 
renderOptions.showShadows = false; 
renderOptions.showVertexNumbers = false; 
renderOptions.showConvexHulls = false; 
renderOptions.showInternalEdges = false; 
renderOptions.showSeparations = false; 
renderOptions.background = '#fff'; 

Engine.run(engine);

sample.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
</head> 
<body> 
    <div id="canvas-container"></div> 
    <script src="pixi.min.v3.0.10.js" type="text/javascript"></script> 
    <script src="matter.min.v0.9.1.js" type="text/javascript"></script> 
    <script src="sample.js" type="text/javascript"></script> 
</body> 
</html>

Если я закомментировать controller: Matter.RenderPixi все работает нормально.

источник

2016-03-26 John Doe

У меня нет опыта работы с материей. Если возможно, вы можете хотя бы предоставить код, чтобы показать это. Просто обратите внимание, что вы используете/просматриваете правильный «настраиваемый» рендерер и холст, создаваемый PIXI.js при построении, а не какой-либо другой в DOM, который на самом деле не управляется? – Hachi

RenderPixi создает примитивы только один раз, когда тело сначала получает визуализацию, и это кэшируется.
Чтобы удалить его из кэша, вы должны быть в состоянии сделать что-то вроде:

engine.render.primitives['b-' + body.id] = null;

Затем он должен получить созданный снова.

источник

2016-03-28 18:54:50 liabru

Matter.js не обновляет свойства тела, если используется средство визуализации Pixi.js.

ответ

Смежные вопросы