sketchpad.js一款好用的画板js插件-BFW插件库

sketchpad.js一款好用的画板js插件
第一步引入bfwone
第二步加载插件代码
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var sketchpad;
        bready(function() {
            use(["sketchpad"], function() {

                sketchpad = new Sketchpad({
                    element: '#sketchpad',
                    width: 400,
                    height: 400
                });
                $('#color-picker').change(color);
                $('#color-picker').val('#000');
                $('#size-picker').change(size);
                $('#size-picker').val(1);
            });
        });

        function undo() {
            sketchpad.undo();
        }
        function redo() {
            sketchpad.redo();
        }
        function color(event) {
            sketchpad.color = $(event.target).val();
        }
        function size(event) {
            sketchpad.penSize = $(event.target).val();
        }
        function animateSketchpad() {
            sketchpad.animate(10);
        }

        function recover(event) {
            var settings = sketchpad.toObject();
            settings.element = '#other-sketchpad';
            var otherSketchpad = new Sketchpad(settings);
            $('#recover-button').hide();
        }
    </script>
    <style type="text/css">
        .sketchpad {
            background: #FFF;
            width: 400px;
            height: 400px;
            border-radius: 2px;

            -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
            -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
            box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
        }
    </style>
</head>
<body>
    <div id="main_content_wrap" class="outer">
        <section id="main_content" class="inner">
            <p class="center">
                undo：撤销操作。redo：重做操作。可以通过颜色拾取器修改线条的颜色。拖动滑块可以修改线条的尺寸。animate按钮可以播放绘制的图像
            </p>
            <div style="text-align: center">
                <canvas class="sketchpad" id="sketchpad"><canvas>
                </div>
                    <div style="text-align: center">
                        <button onclick="undo()">undo</button>
                        <button onclick="redo()">redo</button>
                        <input id="color-picker" type="color">
                        <input id="size-picker" type="range" min="1" max="50">
                        <button onclick="animateSketchpad()">animate</button>
                    </div>
                    <p class="center">
                        你可以将sketchpad保存为Json或对象，然后在其它地方恢复原来的画板设置：
                    </p>
                    <div style="text-align: center; margin: 12px 0 12px">
                        <button id="recover-button" onclick="recover()">recover</button>
                    </div>
                    <div style="text-align: center">
                        <canvas class="sketchpad" id="other-sketchpad"><canvas>
                        </div>
                        </section>
                    </div>
                </body>
            </html>
sketchpad.js一款好用的画板js插件

网友评论0

ace.js

xheditor.js

jsmind.js

sketchpad.js

prism.js

highlight.js

tinymce.js

gantt.js

tui-image-editor.js

drawingboard.js
