お絵かきできるSNSを作りたい!10


お絵かきできるSNSを作りたい後半戦、1つ前に戻すを作っていきます。

筆跡が分るようにjsonで座標を逐一保存しようかとも考えたのですが、管理が大変そうだったので1ストローク毎にcanvasの中身をスクリーンショットを撮る感じにしました。

まず、対処のボタンにイベントを追加します。

<a href="#" class="btn" onclick="doPrevCanvas();">1つ前に戻す</a>

ローカルストレージを用意し、レイヤー1とレイヤー2をそれぞれ1ストローク毎に保存していきます。

// ストレージの初期化
var myStorage = localStorage;

function initLocalStorage(){
    myStorage.setItem("__layer", JSON.stringify([]));
    myStorage.setItem("__layer2", JSON.stringify([]));
}

function setLocalStoreage(){
    var png = $("#canvas")[0].toDataURL();
    var logs = JSON.parse(myStorage.getItem("__layer"));
    setTimeout(function(){
        logs.unshift({png});
        myStorage.setItem("__layer", JSON.stringify(logs));
    }, 0);
    var png2 = $("#canvas2")[0].toDataURL();
    var logs2 = JSON.parse(myStorage.getItem("__layer2"));
    setTimeout(function(){
        logs2.unshift({png2});
        myStorage.setItem("__layer2", JSON.stringify(logs2));
    }, 0);
}

function doPrevCanvas(){
    var logs = JSON.parse(myStorage.getItem("__layer"));
    if(logs.length > 0){
        logs.shift();
        setTimeout(function(){
            myStorage.setItem("__layer", JSON.stringify(logs));
            ct.clearRect(0, 0, $("#canvas").width(), $("#canvas").height());
            if (logs.length == 0) {
                draw("canvas",logs["png"]);
            } else {
                draw("canvas",logs[0]["png"]);
            }
        }, 0);
    }
    var logs2 = JSON.parse(myStorage.getItem("__layer2"));
    if(logs2.length > 0){
        logs2.shift();
        setTimeout(function(){
            myStorage.setItem("__layer2", JSON.stringify(logs2));
            ct2.clearRect(0, 0, $("#canvas2").width(), $("#canvas2").height());
            if (logs2.length == 0) {
                draw("canvas2",logs2["png2"]);
            } else {
                draw("canvas2",logs2[0]["png2"]);
            }
        }, 0);
    }
}

function draw(target,src) {
    var img = new Image();
    img.src = src;
    img.onload = function() {
        if (target == "canvas"){
            ct.drawImage(img, 0, 0);
        } else {
            ct2.drawImage(img, 0, 0);
        }
    }
}

あとは初期化の中でローカルストレージの用意し、線の書き終わりにレイヤー1と2の情報を保存します。

[github]修正内容はこちら

次回は小技(ショートカットの実装)を予定しています。
また気が向いたときにお会いしましょう。

次:お絵かきできるSNSを作りたい!11
最初:お絵かきできるSNSを作りたい!