0
ユーザがクリックすると、特定のボディのプロパティを更新したいとします。 body.render.lineWidth = 5; デフォルトのキャンバスレンダラーを使用するとうまく動作します。私がPixi.jsレンダラに切り替えると、動作を停止し、プロパティをまったく反映していないように見えます。 私もMatter.Body.set機能を試しましたが、運が足りませんでした。プロパティはが実際にボディに設定されていますが、ボディは構築時に提供された初期スタイルを表示し続けます。Pixty.jsレンダラが使用されている場合、Matter.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すべてがOKに動作コメントアウトした場合。
私はmatter.jsについての経験はありませんが、可能であれば、少なくともこれを示すコードを提供することができます。注意すべき点は、PIXI.jsが作成したものの、実際には操作されていないDOM上の他のものではない正しい「カスタム」レンダラーとキャンバスを使用しているか見ていますか？ – Hachi