matter.js マウス操作 MouseConstraint

with コメントはまだありません

Worldに追加した要素をドラッグ可能にしたい場合は、
WorldにMouseConstraint.create(engine);
をadd()してあげることで可能になります。

まず、モジュールで
[javascript] var MouseConstraint = Matter.MouseConstraint;
こちらを読み込みます。

//いつも通り、エンジンを作成し、
var engine = Engine.create(id, options);

World.add(engine.world, 物体);

// マウスドラッグ追加
var mousedrag = MouseConstraint.create(engine);
World.add(engine.world, mousedrag);

Engine.run(engine);
[/javascript]

基本はこれだけで生成された要素は
すべてマウスドラッグ可能になります。

http://brm.io/matter-js/docs/classes/MouseConstraint.html
がプロパティ一覧です。
MouseConstraintのイベントやプロパティが確認できます。

[javascript] Events.on(mousedrag, "startdrag", function(e) {
console.log(mousedrag.body);
if(e.body.label == "ne") {
console.log(e);
}
});
[/javascript]

Events.on(engine, イベント名, callback);

って感じですね。

startdrag,enddrag,mousedown などがあります。

現在ドラッグしてるものなどは、
MouseConstraint.body プロパティが使えそうです。
idやマウスの位置などありとあらゆる値が
取れますので、例えば、ドラッグしたものを
消去はそれ以外を消去、はたまたidが隣物を消去など
100個生成されていてもアクセスできない物体は
ないでしょう。

そのほかにもfunction(e)で
e.body.label とかでもいいかもしれません。
labelはBodies.rectangle( , label:”hoge”)な感じで、
物体を生成する際につけることができます。

Leave a Reply