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

问题描述 投票：0回答：1

如果用户点击它，我想更新某些主体属性，例如

body.render.lineWidth = 5;
如果使用默认的画布渲染器，它就可以正常工作。如果我切换到 Pixi.js 渲染器，它会停止工作并且似乎根本不反映任何属性。 我也尝试过使用 
Matter.Body.set
功能，但也没有运气。属性实际上设置为主体，但主体保持显示在构造时提供的初始样式。

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

样本.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);

样本.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
一切正常。

pixi.js matter.js
1个回答
0
投票

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

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

然后应该再次创建它。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.