Matter.js, Pixi.js işleyicisi kullanıldıysa gövde özelliklerini güncelleştirmiyor

Kullanıcı tarafından tıklandığında belirli gövde özelliklerini güncellemek istiyorum, ör. body.render.lineWidth = 5; Varsayılan tuval işleyicisi kullanıldığında çok iyi çalışır. Pixi.js işleyicisine geçersem çalışmayı durdurur ve hiçbir özelliği yansıtmıyor gibi görünmektedir. Ayrıca, Matter.Body.set işlevini de denedim, ancak şans da yok. Özellikler aslında bir gövdeye ayarlanmış olan'dir, ancak gövde yapım süresinde sağlanan ilk stili gösterir.Matter.js, Pixi.js işleyicisi kullanıldıysa gövde özelliklerini güncelleştirmiyor

Bu özellikleri ayarlamak için uygun yol hangisidir?

DÜZENLEME: 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>

Ben controller: Matter.RenderPixi Her şeyin yolunda dışarı yorum yaparsanız.

kaynak

2016-03-26 John Doe

matter.js ile ilgili deneyimim yok, ancak mümkünse bunu göstermek için en azından bir kod yazabilirsiniz. Dikkat etmeniz gereken, PIXI.js'nin yapım üzerinde yarattığı ve DOM üzerinde bir başkası değil, aslında manipüle edilen doğru olan "özel" işleyiciyi ve tuvalini mi kullanıyorsunuz? – Hachi

RenderPixi, ilk önce gövde oluşturulduğunda ve bu önbelleğe alındığında ilkelleri bir kez oluşturur. Sonra tekrar yaratılan almalısınız

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

: önbellekten kaldırmak için
, sen böyle bir şey yapmak mümkün olmalıdır.

kaynak

2016-03-28 18:54:50 liabru

Matter.js, Pixi.js işleyicisi kullanıldıysa gövde özelliklerini güncelleştirmiyor

cevap

İlgili konular