ホーム > ブログ > matter.js マウス操作 MouseConstraint

Webデザイナー ブログ

matter.js マウス操作 MouseConstraint

2016年9月2日(matter.js)

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

まず、モジュールで

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);

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

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

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

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

って感じですね。

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

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

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

人気ブログランキングへ
応援お願いします!

コメントをどうぞ