enchantMoonで下書きシールを作ってみた

ラフにメモを取ったり絵を描いた後にその上から清書したかったので、書いた絵を下書きにできるシールを作ってみた。

鉛筆で書く、ボールペンで清書、最後に消しゴム掛けのような感じを再現できます。

1. 絵を描いた後にこのシールをタップする
2. 線の色が変わるのでその上に清書する
3. 清書が終わったあとこのシールをはがすと、下書きの絵が消える

やってる事は簡単で、シールがタップされた時に線の色の変更とストロークの最終インデックスの保存を行い、シールがはがされた時に保存した位置より前のストロークを削除してます。

 ソースは下記。

importJS(["lib/MOON.js"

        , "lib/enchant.js"

        , "lib/ui.enchant.js"

        , "lib/color.enchant.js"

        , "lib/stylus.enchant.js"

        , "lib/puppet.enchant.js"

        , "lib/moon.puppet.enchant.js"], function() {

 

    var LAST_INDEX_KEY="lastIndex";

    var DRAFT_COLOR=-5002905;

 

    enchant();

    enchant.puppet.prepareTheatre({

        assets: []

    });

    StickerPuppet.create("シール", {

        behavior: [{

            stickertap: function(event) {

                var page = MOON.getCurrentPage();

                var backing = page.backing;

                var paper = MOON.getPaperJSON(backing);

                var strokes = paper.strokes;

                var lastIndex = strokes.length;

 

                stickerStorage.setItem(LAST_INDEX_KEY, lastIndex);

                for(var i=0; i<lastIndex; i++){

                    strokes[i].color = DRAFT_COLOR;

                }

                paper.strokes = strokes;

                MOON.setPaperJSON(backing,paper);

                enchant.puppet.stopTheatre();

            },

            stickerattach: function(event) {

                enchant.puppet.stopTheatre();

            },

            stickerdetach: function(event) {

                var page = MOON.getCurrentPage();

                var backing = page.backing;

                var paper = MOON.getPaperJSON(backing);

                var strokes = paper.strokes;

                var index = stickerStorage.getItem(LAST_INDEX_KEY);

 

                strokes.splice(0, index);

                paper.strokes = strokes;

                MOON.setPaperJSON(backing,paper);

 

                enchant.puppet.stopTheatre();

            }

        }]

    });

});

 

本当はシールを貼った時に色変更とインデックス保存を行いたかったのだけど、stickerattachに処理を記述するとなぜかうまく動かなかった。。。

それにしても enchantMoon楽し〜。