Matter.Js 缩放精灵（与其他变量相关）

Question

我正在使用 Matter.Js 制作交互式动画。我正在研究的一项功能是根据身体与光标的距离来缩放我的一些身体。我的问题是我似乎无法缩放覆盖这些身体的精灵。我尝试缩放身体本身，但精灵大小实际上并没有改变。所以我想我只需要缩放精灵大小。但是我似乎无法获得 Matter.Body.set() 的任何配置来进行此更改。阅读源代码我不确定是否可行。

documentation 说："Given a property and a value (or map of), sets the property(s) on the body, using the appropriate setter functions if they exist. Prefer to use the actual setter functions in performance critical situations."

我试过：

Body.set(body, {
  render: {
    sprite: {
      texture: // url to sprite reset here incase of overwrite,
      xScale: scaleFactor,
      yScale: scaleFactor
    }
  }
});

这似乎只是删除了 sprite 和任何其他渲染设置，所以我什么也看不到。

我试过：

Body.set(body, 'render.sprite.xScale', scaleFactor);

这似乎什么也没做，也没有改变渲染。

是否无法在创建 body 之外的任何时刻设置精灵 object 的值？或者我只是在我的函数调用中将这些值定位错误？

Answer 1

可以直接在sprite属性上设置比例，通过Body.scale:

缩放body

body.render.sprite.xScale = box.render.sprite.xScale * scaleX;
body.render.sprite.yScale = box.render.sprite.yScale * scaleY;
Matter.Body.scale( body, scaleX, scaleY);

这是一个玩具示例。

var Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies,
  Body = Matter.Body;

var engine = Engine.create();

var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
width: 800,
height: 400,
wireframes: false
  }
});

engine.world.gravity.y = 0;

var box = Bodies.rectangle(460, 120, 40, 40, { render: { strokeStyle: '#ffffff',
                sprite: {
                    texture: '//cdn.rawgit.com/liabru/matter-js/2560a681/demo/img/box.png'
                }
            }
        });

World.add(engine.world, [box]);

Engine.run(engine);

Render.run(render);

$('.scale').on('click', function () {
box.render.sprite.xScale = box.render.sprite.xScale * 1.5;
box.render.sprite.yScale = box.render.sprite.yScale * 1.2;
Body.scale( box, 1.5, 1.2);
});

$('.rotate').on('click', function () {
Body.rotate( box, Math.PI/6);
});

$('.translate').on('click', function () {
Body.translate( box, {x: -10, y: 20});
});

body {
  text-align: center;
  margin: 10px;
}

canvas {
  margin: 20px auto;
}

button {
  color: white;
  background: orange;
  border: none;
  padding: 10px;
  font-weight: 300;
  font-size: 1.2em;
  font-family: 'Lato';
  margin: 10px;
  cursor: pointer;
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.11.0/matter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="scale">Scale</button>
<button class="rotate">Rotate</button>
<button class="translate">Translate</button>
<br>

请注意，精灵纹理在初始坐标（本地坐标）中缩放，而如果先前已应用旋转，则主体（在本例中为框）将在旋转坐标系中缩放。

Matter.Js 缩放精灵（与其他变量相关）

Matter.Js scaling a sprite (related to other variables)

javascript

sprite

matter.js