Hatena::ブログ(Diary)

_development, RSSフィード Twitter

2013-08-29

enchantMOONのシールのストロークを変更する方法


概要

ページに貼り付けたシールのストロークを変更する方法です。


予備知識

enchantMOONには、ページの情報を取得する以下のAPIが用意されています。

  • MOON.getCurrentPage
  • MOON.getPaperJSON
  • MOON.setPaperJSON

これらのAPIを使うとページに配置されているオブジェクトの読み取りと書き込みが可能です。


MOON.getCurrentPage

MOON.getCurrentPageは、シールが貼られているページの情報を返すメソッドです。

実行すると、次のようなJSONオブジェクトが返ってきます。


MOON.getCurrentPage();


{"backing":"_CpZ206t1377673853927","papers":["eKkRhcBN1377787370632"]}

backingはページのストロークのID、papersはシールのIDです。複数のシールが貼られている場合、papersには複数のIDが格納されます。


MOON.getPaperJSON

MOON.getPaperJSONは、ストロークの情報を返すメソッドです。

実行すると、次のようなJSONオブジェクトが返ってきます。


MOON.getPaperJSON("_CpZ206t1377673853927");


{ "version":"0.2",
  "x":0,
  "y":0,
  "width":768,
  "height":1024,
  "scale":1.0,
  "color":-16777216,
  "transparent":false,
  "strokes":[{"width":2.0,"color":-16742145,"type":"pen","data":[77.0,33.0,1.0,80.0,33.0,1.0]}, 
                 {"width":2.0,"color":-16742145,"type":"pen","data":[41.0,93.0,1.0,60.0,93.0,1.0]}]}

MOON.setPaperJSON

MOON.setPaperJSONは、ストロークの情報を設定するメソッドです。

上記MOON.getPaperJSONで得られるオブジェクトと同様の形式のJSONオブジェクトを指定して呼び出すことで、ストローク情報を任意に設定できます。

MOON.setPaperJSON("_CpZ206t1377673853927", {...});

たとえば、ページの真ん中に一本の直線を引くストロークを設定したい場合は次のようにします。


var page = MOON.getCurrentPage();
var paper = MOON.getPaperJSON(page.backing);
paper.strokes = [{"width":2.0,"color":-16742145,"type":"pen","data":[0, 512, 1.0, 768, 512, 1.0]}];
MOON.setPaperJSON(page.backing, paper);

これが基本的なストロークの取得・設定方法です。


シールのストロークを変更する

実はページとシールは同じモデルに基いて構成されています。なので、シールのストロークの設定方法はページの設定方法と変わりません。

MOON.getPaperJSON, MOON.setPaperJSONに渡していたIDをシールのIDに変更すれば良いのです。シールのIDはMOON.getCurrentPage()で取得できるオブジェクトのpapersプロパティに格納されています。


{"backing":"_CpZ206t1377673853927","papers":["eKkRhcBN1377787370632"]}

MOON.getCurrentPage()が上記のようなオブジェクトを返した場合、ページとシールの情報をそれぞれ取得する呼び出しは以下のようになります。


//ページのストローク
MOON.getPaperJSON("_CpZ206t1377673853927");

//シールのストローク
MOON.getPaperJSON("eKkRhcBN1377787370632");

また、ページとシールの情報をそれぞれ設定する呼び出しは以下のようになります。


//ページのストローク
MOON.setPaperJSON("_CpZ206t1377673853927", {...});

//シールのストローク
MOON.setPaperJSON("eKkRhcBN1377787370632", {...});

シールが複数ある場合

上述の例では、シールが一枚しか貼られていなかったので特定は簡単でした。実際には、シールが複数貼られている場合も多いでしょう。

その場合はどのシールのIDが目的のシールなのかを判断しなければなりません。しかし現行バージョン(2.5)のMOONPhaseは、実行されているシール自身のIDを取得する方法がありません。

というわけで、複数のシールが貼られている場合は何らかの工夫をして目的のシールを特定しなければなりません。どうするかというと...

このissue (Feature request: window.location improvement) にみんなでvoteしよう!!


...おわり。


参考

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/esmasui/20130829/1377801904