Posted at

EaselJSでドラッグしたらオブジェクトを回す

More than 5 years have passed since last update.

サンプル


ドラッグでオブジェクトを回す

てこの原理を使う。

しくみとしては


  • 視点から離れた位置を持った方が力がかかる

  • 垂直に力を加えるとより力が加わる

というかんじ。

計算については、力のモーメントという考え方を使うっぽい

FN1009002 - 力のモーメント - Flash : テクニカルノート

公式をざっくりいうと

_r2_c2.gif

インスタンスの中心とドラッグしている座標を結ぶ部分がてこ(radius)

ドラッグするマウスの動き(fource)がてこに加える力になる。

それらをベクトル(方向と大きさを表すやつ)として考える

2次元のベクトルの外積の求め方は

てこのベクトル(radius)の座標を

 r_xr_y 

マウスの動きのベクトル(fource)を

 f_xf_y 

とすると

 r_xf_y - r_yf_x

で求められるらしい。

FN1312003 | 平面上の2直線の交点を外積により求める | HTML5 : テクニカルノート

てこのベクトル(radius)とマウスの動きのベクトル(fource)をPointインスタンスで作って、

外積計算関数に渡す

//てこのベクトル(radius)

var radius = new createjs.Point(lastMouse.x - card.x, lastMouse.y - card.y);
//マウスの動きのベクトル(fource)
var force = new createjs.Point(mouseX - lastMouse.x, mouseY - lastMouse.y);

var moment = crossProduct2D(radius, force);

//外積計算関数

function crossProduct2D(point0, point1) {
return point0.x * point1.y - point0.y * point1.x;
}


慣性で移動させる

ドラッグ中とドラッグ後でアニメーションが切り替えることで、

マウスボタンを放した後も減速しつつアニメーションできる。

function startRotation(eventObject) {

update = updateDrag;
}
function stopRotation(eventObject) {
update = updateInertia;
}

function updateDrag(mouseX, mouseY) {
angularVelocity *= deceleration;
}
function updateInertia(mouseX, mouseY) {
var velocityX = velocity.x;
var velocityY = velocity.y;
if (Math.abs(velocityX) + Math.abs(velocityY) + Math.abs(angularVelocity) < 1) {
createjs.Ticker.removeEventListener("tick", rotate);
} else {
lastMouse.x = mouseX + velocityX;
lastMouse.y = mouseY + velocityY;
velocity.x = velocityX * deceleration;
velocity.y = velocityY * deceleration;
angularVelocity *= deceleration;
}
}


他参考になりそうなの