Question

如果用户点击它，我想更新某些正文属性，例如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，一切正常。

Answer 1

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

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

然后它应该再次创建。

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

1 个答案: