Matter.js如果使用 Pixi.js渲染器，则不会更新正文属性

如果用户点击，我想更新某些主体属性，例如body.render.lineWidth = 5;如果使用默认的画布渲染器，它也可以正常工作。如果我切换到Pixi.js渲染器，它将停止工作，并且似乎根本不反映任何属性。我也尝试过使用Matter.Body.set函数，但也没有成功。属性实际上设置为实体，但实体始终显示构造时提供的初始样式。

设置这些属性的正确方法是什么？

编辑：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，一切正常。

RenderPixi仅在主体首次渲染并缓存时创建一次基元
要将其从缓存中删除，您应该能够执行以下操作：

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

然后应该重新创建它。

相关内容

最新更新

热门标签：