0
私はキャンバスを操作し、JavaScript（Fabric.js）を使用して取り消し直す操作を実装しています。しかし、Fabric.jsの元に戻すやり直しは、画像は消えますが、キャンバス領域をクリックすると表示されます。ファブリックjに元に戻すRedoを実装している間、イメージは消えますが、キャンバス領域をクリックすると表示されます
誰でも役立つ解決策を提供できる場合は、 loadFromJSONが非同期であるため、この問題が発生したhttps://jsfiddle.net/devilla/wdrbohj5/4/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js">
</script>
</head>
<body>
<div style=" height:80px; margin-bottom: 50px; margin-top: 50px;">
<p style="width:30; height:15px; font-size: 25px; font-family: appleberry;"></p>
<img src="https://www.w3schools.com/css/trolltunga.jpg" onclick="clipFunction(this)" style="width:60px; height:35px;margin-left: 2px; margin-top: 2px; margin-right: 2px;margin-bottom: 2px;">
<img src="https://www.planwallpaper.com/static/images/images_1_05GM1zY.jpg" onclick="clipFunction(this)" style="width:60px; height:35px;margin-left: 2px; margin-top: 2px; margin-right: 2px;margin-bottom: 2px;">
</div>
<div id="image5">
<canvas id="c" height="500px" width="280px" style="position:fixed; border:0px solid lightblue; user-select: none; border-radius: 7px;">
</canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script>
var canvas = new fabric.Canvas('c');
function clipFunction(elt) {
fabric.Image.fromURL(elt.src, function(oImg) {
oImg.setLeft(50);
oImg.set({
width: canvas.width/2,
height: canvas.height/2
});
oImg.setTop(150);
oImg.set('selectable', false);
img = new fabric.Group([oImg]);
canvas.add(img);
canvas.renderAll();
});
}
/* UNDO REDO */
var state = [];
var mods = 0;
canvas.on(
'object:modified',
function() {
updateModifications(true);
},
'object:added',
function() {
updateModifications(true);
});
function updateModifications(savehistory) {
if (savehistory === true) {
myjson = JSON.stringify(canvas);
state.push(myjson);
}
}
undo = function undo() {
if (mods < state.length) {
canvas.clear().renderAll();
canvas.loadFromJSON(state[state.length - 1 - mods - 1]);
canvas.renderAll();
//console.log("geladen " + (state.length-1-mods-1));
//console.log("state " + state.length);
mods += 1;
//console.log("mods " + mods);
}
}
redo = function redo() {
if (mods > 0) {
canvas.clear().renderAll();
canvas.loadFromJSON(state[state.length - 1 - mods + 1]);
canvas.renderAll();
//console.log("geladen " + (state.length-1-mods+1));
mods -= 1;
//console.log("state " + state.length);
//console.log("mods " + mods);
}
}
clearcan = function clearcan() {
canvas.clear().renderAll();
}
/**/
</script>
</div>
<div id="UR" style="position: fixed; bottom :10px; height:50px;width:180px; border:1px solid lightgreen;">
<input type="button" value="undo" onclick="undo()">
<input type="button" value="redo" onclick="redo()">
<input type="button" value="clear" onclick="clearcan()">
</div>
あなたが使用する必要があります。あなたの答えのためのあなたの先生をお願いします。 –