Я хочу использовать команду отмены и повтора на моем маленьком веб-сайте, я использую fabric.js, кто-нибудь есть идеи, как это сделать, следуя моему коду. Нажмите кнопку отмены и повтора. Я пытаюсь отменить и переделать объект canvas Это ссылка js fiddle
$(document).ready(function(){
var canvas = new fabric.Canvas('c');
var colorSet="red";
$("#svg3").click(function(){
fabric.loadSVGFromURL('http://upload.wikimedia.org/wikipedia/en/c/cd/-Islandshreyfingin.svg', function (objects, options) {
var shape = fabric.util.groupSVGElements(objects, options);
shape.set({
left: canvas.width/2,
top: canvas.height/2,
scaleY: canvas.height / shape.width,
scaleX: canvas.width / shape.width
});
if (shape.isSameColor && shape.isSameColor() || !shape.paths) {
shape.setFill(colorSet);
} else if (shape.paths) {
for (var i = 0; i < shape.paths.length; i++) {
shape.paths[i].setFill(colorSet);
}
}
canvas.add(shape);
canvas.renderAll();
});
});
$("#undo").click(function(){
yourJSONString = JSON.stringify(canvas);
});
$("#redo").click(function(){
canvas.clear();
//alert(yourJSONString);
canvas.loadFromJSON(yourJSONString);
canvas.renderAll();
// alert(svgobj);
});
});
вы можете написать свою собственную функцию отмены и повтора с помощью javascript и jquery следующим образом:
// --------------------------------undo+redu--------------------------
var vall=20;
var l=0;
var flag=0;
var k=1;
var yourJSONString = new Array();
canvas.observe('object:selected', function(e) {
//yourJSONString = JSON.stringify(canvas);
if(k!=20)
{
yourJSONString[k] = JSON.stringify(canvas);
k++;
//$('#btn').show();
}
j = k;
var activeObject = canvas.getActiveObject();
});
$("#undo").click(function(){
// counts the no of objects on canvas
var objCount = canvas.getObjects().length;
console.log("Undo"+objCount);
if(k-1 >=0)
{
canvas.clear();
canvas.loadFromJSON(yourJSONString[k-1]);
k--;
l++;
}else
{
canvas.clear();
k--;
l++;
}
canvas.renderAll();
});
$("#redo").click(function(){
// counts the no of objects on canvas
var objCount = canvas.getObjects().length;
console.log("redo"+objCount);
if(l > 1)
{
if (objCount = 0) {
canvas.clear();
canvas.loadFromJSON(yourJSONString[k-1]);
k++;
l--;
canvas.renderAll();
}
else{
canvas.clear();
canvas.loadFromJSON(yourJSONString[k+1]);
k++;
l--;
canvas.renderAll();
}
}
});
Этот код будет выполнять отмену и повтор для каждого изменения, сделанного на холсте. Он сохранит состояние холста при каждом изменении, а затем выполнит отмену и повтор при необходимости.