日曜プログラミング

ゲーム好きの中の人が、自分が作りたいアプリを作る記録です

更新情報 : おはララジェネレータのEaselJSによるロゴ回転の実装

おはララジェネレータについて

妻「もっと、ロゴが回転できたり色を変えれたりできたら、もっとスクショを撮るんだけどなあ〜」
私「いや、色を変えるのは、ロゴ製作者に許可が必要だろう・・・・」
妻「じゃぁ、回転だけなら?」
私「それだけなら、まぁ、許可してくれるロゴ製作者の方々は多いんじゃないかな・・・」
妻「じゃ、つくってw」


ということで更新情報です。
ロゴを回転できるようにしました。

おはララジェネレータのご紹介

まずは、おはララジェネレータを知らない方へご紹介。
おはララなどのロゴを画像に貼り付けるためのブラウザアプリです。

https://gelehrtecrest.github.io/ohalala-ss-generator/

今回の更新内容

内容

ロゴを回転できるようにしました。15度ずつの固定にしてあります。

きっかけ

たぶん、妻はこの方のツィートをみて、こんな話をし始めたんだと思います。

さすがに色変えはどうなんだろう?と思うので、回転だけ実装しました。

方法

おはララジェネレータは、EaselJSを使って画像加工を行なっています。
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

EaselJSにはすでに回転(rotation)機能が備わっているので、それを利用するだけで基本的には終わりました。
ただ、回転軸を画像の中心点にしたく(しなくてもよかったかもしれませんが)、ちょっとだけ苦戦しました。
以下の記事を参考に
qiita.com

具体的には

gist8e78080dcf714c6f70ad89197a6782a1

回転だけなら

img.rotation = imageIni.rotation;

だけで終わるのですが、まず回転軸を指定するために画像サイズの縦横の半分の位置を中央とし

img.regX = img.getBounds().width / 2;
img.regY = img.getBounds().height / 2;

これだけでは、画像の位置がずれるので、画像の縮尺(Scale)も計算しつつ補正

img.x = imageIni.xPos * 10 + img.getBounds().width / 2 * (1 + imageIni.Scale / 10);
img.y = imageIni.yPos * 10 + img.getBounds().height / 2 * (1 + imageIni.Scale / 10);

これで一応、回転が実装できました。
詳細はソースコードをご確認ください。
ohalala-ss-generator/main.js at master · gelehrtecrest/ohalala-ss-generator · GitHub

使い方

二つのボタンを用意しました。

  • 左回転
  • 右回転

それぞれ、15度ずつ回転します。(本当は、15度ずつでいいのかどうか悩ましいですが)

f:id:gelehrtecrest:20171006150649p:plain

あとは使い方は今まで通り。合成したら右クリックでダウンロードしてください。

それではみなさま、たくさんのスクショをお待ちしております。
おはララでしたー


f:id:gelehrtecrest:20171006194604p:plain


スポンサーリンク