时间戳

首页 > 解决方案 > Matter.Js 缩放精灵（与其他变量相关）

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

问题描述

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

文档说： “给定一个属性和一个值（或映射），设置主体上的属性，如果存在，则使用适当的设置器函数。在性能关键情况下更喜欢使用实际的设置器函数。”

我试过了：

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

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

我试过了：

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

这似乎什么都不做，也不会改变渲染。

除了创建身体之外，是否不能在任何时候设置精灵对象的值？还是我只是在函数调用中错误地定位了这些值？

标签： javascriptspritematter.js

解决方案

您可以直接在精灵属性上设置比例并通过以下方式缩放身体Body.scale：

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>

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

推荐阅读