~$ 存档

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::
[redo]和[undo] fabric.js

###

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/fabric.1.7.22.js"></script>
    <script src="js/jquery.1.9.1.min.js"></script>
</head>
<body>
    <button id="draw">circle</button>
    <button id="undo" disabled>undo</button>
    <button id="redo" disabled>redo</button>

    <canvas id="canvas" width="500" height="500"></canvas>

    <script>
        var canvas;

        var state;// current unsaved state   
        var undo = [];// past states     
        var redo = []; // reverted states

        /**
         * Push the current state into the undo stack and then capture the current state
         */
        function save() {
            // clear the redo stack
            redo = [];
            $('#redo').prop('disabled', true);

            // initial call won't have a state
            if (state) {
                undo.push(state);
                $('#undo').prop('disabled', false);
            }
            state = JSON.stringify(canvas);
            console.log("state--->   ", state)
        }

        /**
         * Save the current state in the redo stack, reset to a state in the undo stack, and enable the buttons accordingly.
         * Or, do the opposite (redo vs. undo)
         * @param playStack which stack to get the last state from and to then render the canvas as
         * @param saveStack which stack to push current state into
         * @param buttonsOn jQuery selector. Enable these buttons.
         * @param buttonsOff jQuery selector. Disable these buttons.
         */
        function replay(playStack, saveStack, buttonsOn, buttonsOff) {
            saveStack.push(state);
            state = playStack.pop();
            var on = $(buttonsOn);
            var off = $(buttonsOff);
            // turn both buttons off for the moment to prevent rapid clicking
            on.prop('disabled', true);
            off.prop('disabled', true);
            canvas.clear();

            canvas.loadFromJSON(state, function () {
                canvas.renderAll();
                // now turn the buttons back on if applicable
                on.prop('disabled', false);
                if (playStack.length) {
                    off.prop('disabled', false);
                }
            });
        }

        $(function () {

            canvas = new fabric.Canvas('canvas');//canvas设置
            canvas.setWidth(500);
            canvas.setHeight(500);
            
            save();//保存初始状态
            //注册事件侦听，监听用户行为
            canvas.on('object:modified', function () {
                console.log("called from here")
                save();
            });
            // draw button
            $('#draw').click(function () {
                var imgObj = new fabric.Circle({
                    fill: '#' + Math.floor(Math.random() * 1677).toString(16),
                    radius: Math.random() * 250,
                    left: Math.random() * 250,
                    top: Math.random() * 50
                });
                canvas.add(imgObj);
                canvas.renderAll();
                save();
            });
            // undo and redo buttons
            $('#undo').click(function () {
                replay(undo, redo, '#redo', this);
            });
            $('#redo').click(function () {
                replay(redo, undo, '#undo', this);
            })

        });
    </script>
</body>
</html>

 

posted on 2018-03-29 11:04  LuoTian  阅读(670)  评论(0)    收藏  举报