I want to use undo and redo command in my small website, i am using fabric.js ,anybody have any idea how to do this,following is my code.on click undo & redo button i am trying to undo & redo the object of canvas This is js fiddle link
$(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);
});
});
var mods = 0;
//Undo Functionality
$scope.undo = function()
{
if (mods < $scope.state.length) {
$rootScope.canvas.clear().renderAll();
$rootScope.canvas.loadFromJSON($scope.state[$scope.state.length-1 - mods - 1]);
$rootScope.canvas.renderAll();
mods += 1;
}
}
//Redo Functionality
$scope.redo = function()
{
if (mods > 0) {
$rootScope.canvas.clear().renderAll();
$rootScope.canvas.loadFromJSON($scope.state[$scope.state.length-1 - mods +
1]);
$rootScope.canvas.renderAll();
mods -= 1;
}
}
This works fine try it!!
you can write your own undo and redo function using javascript and jquery like this:
// --------------------------------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();
}
}
});
This code will perform undo and redo for every change u make on canvas. It will save the state of canvas on every change and then perform undo and redo when needed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.