• 手绘板 第一版 欢迎指正~~~~~~


    第一次做插件,第一版还没插件化,还有非常多的问题,希望大家多多指教,帮我提一些问题,多谢~~~~

    做的插件是移动端的,后续将要变成移动、pc通用。不多说,上代码:

    writehand.css:
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
        width: 100%;
        background-color: #ccc;
    }
    .header{
        margin: 0 auto;
        font-size: 40px;
        text-align: center;
    }
    .writeHand{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .headOfWriteHand{
        position:fixed;
        top: 0;
        left : 0;
        z-index: 999;
        height: 50px;
        width: 100%;
        background-color: #fff;
    }
    .headOfWriteHand span{
        margin-left: 4%;
        margin-right: 4%;
        vertical-align: middle;
        line-height: 50px;
        height: 50px;
    }
    .mainOfWriteHand{
        height: auto;
        width: auto;
        /*background-color: rgba(255,255,255,0.5);*/
    }
    canvas{
        background-color: rgba(255,255,255,0.7);
    }

    demo.html:

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta charset="utf-8"/>
            <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
            <title>HTML5绘图板</title>
            <link rel="stylesheet" type="text/css" href="writehand.css"/>
        </head>
        <body>
            <div style='white-space: pre-wrap;  100%;height: auto;'>
                aaaaaaaaaaaaaa
                aaaaaaaaaaaaaaa
                ssssssssss
                ccccccccccccc
                ffffffffffffffffffffffffffffffffffffffffffffff
                vvvvvvvvvvvvvvvvvvvv
                bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
                ddddddd
                ddddddddddddddddddddd
                ddddddddddddddddddddddddddddddddddddd
                ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
                bbbbbbbbbbbbb
                bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
                bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
                bbbbbbb
                bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
                bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
                nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
                nnnnnnnnnnnnnnnnnnnnnnnnnnnnn
                nnnnnnnnnn
                nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
                nnnnnnnnnnnnnnnnnnnnnnnnn
                nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
                nnnnnn
                nnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
                nnnnnnnnnnnnnnnnnnnn
                nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
                mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
                ttttttttttttttttttttttt
                ttttttttttttttttttttttttttttttttttttttttttt
                eeeeeeeeeeeeeee
            </div>
            <div class="writeHand" >
                <div class="headOfWriteHand">
                    <span class="cancel">取消</span>
                    <span class="reset">重置</span>
                    <span class="prev">撤销</span>
                    <span class="next">反撤销</span>
                    <span class="save">保存</span>
                </div>
                <div class="mainOfWriteHand">
                    <canvas id="board" class="board">您的浏览器不支持</canvas>
                </div>
                <canvas id="boardNew" class="board" style="display: none;">您的浏览器不支持</canvas>
            </div>
            <div class='header'>效果展示</div>
            <img class="myimg" style="border: 3px solid yellow"/>
            <!-- <div class='btn'><button class='a'>点击有惊喜</button></div> -->
            <script type="text/javascript" src="jquery-2.1.1.js"></script>
            <script type="text/javascript" src="writehand.js"></script>
        </body>
    </html>

    writehand.js
    var board = document.getElementById('board'),
        gc = board.getContext('2d'),   //第一块画布,用来画
        boardNew = document.getElementById('boardNew'),
        gcNew = boardNew.getContext('2d');   //第二块画布,用来储存.因为toDataURL和getImageData不能同时用.所以专门分了开来
    
    board.width = (document.documentElement.clientWidth) * 3;     //gcWidth;
    board.height = (document.documentElement.clientHeight) * 2;   //gcHeight;
    
    gc.strokeStyle = 'rgb(0,0,0)';        //第一块画布笔触颜色
    gc.lineWidth = 1;                     //第一块画布笔触像素
    gcNew.strokeStyle = 'rgb(0,0,0)';     //第二块画布笔触颜色
    gcNew.lineWidth = 1;                  //第二块画布笔触像素
    
    var recede = [],      //存放历史笔画数组
        forward = [],     //存放可以反撤销笔画的数组
        currentPath = [], //目前的笔画集合
        currentPoint;     //当前坐标点对象
    
    $('body').on('click', '.headOfWriteHand span', function(e) {
        var classN = $(this).attr("class");
        switch(classN) {
            case 'cancel':
                $('.writeHand').hide();
                break;
            case 'reset':
                gc.clearRect(0, 0, board.width, board.height);
                //gc.beginPath();可能会用
                recede.length = 0;   //记得在这里把记录的数组清空
                break;
            case 'prev':
                if (recede.length != 0) {
                    forward.push(recede.pop());
                    gc.clearRect(0, 0, board.width, board.height);
                    if (recede.length > 0) {
                        for (var i = 0; i < recede.length; i++) {
                            gc.beginPath();
                            var currentX = recede[i][0].x, currentY = recede[i][0].y;
                            gc.moveTo(currentX, currentY);
                            for (var j = 0; j < recede[i].length; j++) {
                                currentX = recede[i][j].x;
                                currentY = recede[i][j].y;
                                gc.lineTo(currentX, currentY);
                                gc.stroke();
                                event.preventDefault();//why?
                            }
                            gc.closePath();
                        }
                    }
                }
                break;
            case 'next':
                if (forward.length != 0) {
                    // if( recede.length > 0 ) {
                    gc.beginPath();
                    var leng = forward.length - 1;
                    gc.moveTo(forward[leng][0].x, forward[leng][0].y);
    
                    for (var i = 1; i < forward[leng].length; i++) {
                        gc.lineTo(forward[leng][i].x, forward[leng][i].y);
                        gc.stroke();
                        event.preventDefault();
                    }
                    recede.push(forward.pop());
                    gc.closePath();
                }
                break;
            case 'save':
                var smallX, smallY, bigX, bigY;
                if (recede.length) {
                    if (recede[0][0].x > recede[0][1].x) {
                        smallX = recede[0][1].x;
                        bigX = recede[0][0].x;
                    } else {
                        bigX = recede[0][1].x;
                        smallX = recede[0][0].x;
                    }
                    if (recede[0][0].y > recede[0][1].y) {
                        smallY = recede[0][1].y;
                        bigY = recede[0][0].y;
                    } else {
                        bigY = recede[0][1].y;
                        smallY = recede[0][0].y;
                    }
                }
    
                for (var i = 0; i < recede.length; i++) {
                    for (var j = 0; j < recede[i].length; j++) {
                        smallX = (smallX < recede[i][j].x ) ? smallX : recede[i][j].x;
                        bigX = (bigX > recede[i][j].x ) ? bigX : recede[i][j].x;
                        smallY = (smallY < recede[i][j].y ) ? smallY : recede[i][j].y;
                        bigY = (bigY > recede[i][j].y ) ? bigY : recede[i][j].y;
                    }
                }
                var gcWidth = bigX - smallX,
                    gcHeight = bigY - smallY;
    
                var imgData = gc.getImageData(smallX, smallY, gcWidth, gcHeight);
                $('#board').hide();
    
                boardNew.width = gcWidth;
                boardNew.height = gcHeight;
    
                $('#boardNew').show();
                gcNew.putImageData(imgData, 0, 0);
                var image = new Image();
                image.src = boardNew.toDataURL("image/png", 0.5);
                $('.myimg').attr('src', image.src);
                $('.writeHand').hide();
                break;
        }
    });
    
    board.ontouchstart = function(event) {
        forward.length = 0;
        var e = window.event || event, 
            doc = document.documentElement, 
            body = document.body, 
            ex = e.touches[0].clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0), //|| e.pageX,//e.touches[0]获取第一个触点
            ey = e.touches[0].clientY + (doc && doc.scrollTop || body && body.scrollTop || 0), // || e.pageY,
            startX = ex - this.offsetLeft, startY = ey - this.offsetTop;
        //设置鼠标一定按下状态
        // isMouseDown = true;
        currentPoint = {
            "x" : startX,
            "y" : startY
        };
        currentPath.push(currentPoint);
    
        gc.beginPath();
        //丢弃任何当前定义的路径并且开始一条新的路径
        gc.moveTo(startX, startY);
    }
    
    board.ontouchmove = function(event) {
        var e = window.event || event, 
            doc = document.documentElement, 
            body = document.body,
        // ex = e.x || e.pageX, ey = e.y || e.pageY,
            ex = e.touches[0].clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0), //|| e.pageX,
            ey = e.touches[0].clientY + (doc && doc.scrollTop || body && body.scrollTop || 0), // || e.pageY,
            lineX = ex - this.offsetLeft, lineY = ey - this.offsetTop;
    
        if (e.touches[1]) {
            var edoubleX = e.touches[1].clientX || e.pageX, //e.touches[0]获取第一个触点
            edoubleY = e.touches[1].clientY || e.pageY;
            //startDoubleX = edoubleX - this.offsetLeft,
            //startDoubleY = edoubleY - this.offsetTop;
            $('.board').animate({
                left : -edoubleX,
                top : -edoubleY
            });
        } else {
            gc.lineTo(lineX, lineY);
            gc.stroke();
            event.preventDefault();//why?
    
            currentPoint = {
                "x" : lineX,
                "y" : lineY
            };
            //记录每一步坐标点
            currentPath.push(currentPoint);
        };
        //鼠标移出画布和鼠标抬起事件,处理方式相同
        board.ontouchend = board.ontouchcancel = function(event) {
            // isMouseDown = false;
            if (currentPath.length > 2) {//三个像素点以上才放进去
                recede.push(currentPath.slice(0));
            };
            currentPath.length = 0;
            gc.closePath();
        };
    };
  • 相关阅读:
    Prism 源码解读5-数据绑定和命令
    Prism 源码解读4-ViewModel注入
    Prism 源码解读3-Modules加载
    Prism 源码解读2-View的加载和控制
    java中int 类型的移位运算与位运算
    二进制、十六进制理解及int类型二进制存储方式
    git bash返回上一级目录
    关于我
    【设计模式】设计原则--面向接口编程你理解的对吗?
    回到未来:Smalltalk 编程系统
  • 原文地址:https://www.cnblogs.com/neuscx/p/4991147.html
Copyright © 2020-2023  润新知