如果使用Pixi.js渲染器，Matter.js不更新主體屬性

我想在用戶點擊它時更新某些主體屬性，例如， body.render.lineWidth = 5; 如果使用默認畫布渲染器，它工作得很好。如果我切換到Pixi.js渲染器，它將停止工作，並且似乎完全不反映任何屬性。我也嘗試Matter.Body.set函數，但沒有運氣。屬性爲實際設置爲一個身體，但身體不斷顯示在施工時提供的初始樣式。如果使用Pixi.js渲染器，Matter.js不更新主體屬性

什麼是設置這些屬性的正確方法？

編輯： 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

我對matter.js沒有經驗，但是如果可能的話，您至少可以提供一些代碼來顯示它。需要注意的是，您正在使用/查看PIXI.js在構建時創建的正確的「自定義」渲染器和畫布，而不是DOM上的其他某些渲染器和畫布，而實際上並不是那些被操縱的渲染器和畫布？ – Hachi

RenderPixi在主體第一次呈現並且獲得緩存時僅創建一次原語。
從緩存中刪除它，你應該能夠做這樣的事情：

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

那麼就應該得到重新創建。

來源

2016-03-28 18:54:50 liabru

如果使用Pixi.js渲染器，Matter.js不更新主體屬性

回答

相關問題