基準点を中心にするJSFLを考える1


普段はアニメーションはTweenerで作っていて、久しぶりにタイムラインでバリバリやる感じのものを作ろうと思い、久しぶりにクラシックトゥイーンなどしてみたんですが、基準点を操作するのがなかなかメンドクサイ。そこでJSFLで何とかならないかと思ったわけです。

作ったのは以下のようなものです。複数選択には対応していません。

var doc = fl.getDocumentDOM();
doc.enterEditMode('inPlace');
var beforeRect = doc.getSelectionRect();
doc.align('vertical center', true);
doc.align('horizontal center', true);
//サイズが奇数値だとセンタリングしたときに端数がでるので調整
var tempRect = doc.getSelectionRect();
var roundX = Math.round(tempRect.left) - tempRect.left;
var roundY = Math.round(tempRect.top) - tempRect.top;
roundX = Math.round(roundX * 10) / 10;
roundY = Math.round(roundY * 10) / 10;
doc.moveSelectionBy({x:roundX, y:roundY});
var afterRect = doc.getSelectionRect();
var moveX = Math.round(beforeRect.left - afterRect.left);
var moveY = Math.round(beforeRect.top - afterRect.top);
doc.exitEditMode();
doc.moveSelectionBy({x:moveX, y:moveY});
doc.setTransformationPoint({x:0, y:0});

とりあえずはシェイプ1つ置いたものならば、基準点と変形点を真ん中に変更できました。

作ってみて気になったのは、getSelectionRectで取得できるRectangle.leftやRectangle.topの値が、100.499など、中途半端な値になってしまうこと。

置き方が悪いのかといろいろやってみましたが、上手くいかないようなので、四捨五入しました。

次はこれをもうちょっと使い易くしてみようと思います。