お絵かきできるSNSを作りたい!10
13457 ワード
お絵かきできる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の情報を保存します。
次回は小技(ショートカットの実装)を予定しています。
また気が向いたときにお会いしましょう。
Author And Source
この問題について(お絵かきできるSNSを作りたい!10), 我々は、より多くの情報をここで見つけました https://qiita.com/cardcapt/items/34bea786011397bbe01a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .