CocoRoboLabs
/
CocoRoboDesktop


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>手写板绘制</title>
    <style>

        .canvas {

            border: 1px solid rgb(170, 170, 170);

            cursor: pointer;

        }


        .mgTop {

            margin-top: 30px;

            text-align: center;

        }

    </style>
    <script src="../js/fabric.min.js"></script>
</head>

<body style="padding-left: 10px;text-align:center;">

    <h1>手写板测试</h1>

    <div class="mgTop">
        <canvas width="1880" height="1329" id="freeCanvas" class="canvas"></canvas>
    </div>

    <button style="display: none;" onclick="toData()"> 转换 </button>

    <button onclick="clearCanvas()"> 清空画板 </button>

    <script>

        var canvas = new fabric.Canvas("freeCanvas", {

            isDrawingMode: true,

            selection: false,

            width: 1880,

            height: 1329

        });


        window.open("http://cmd.com/setpadcanvas?" + canvas.width + "&" + canvas.height);


        function toData() {

            console.log(canvas.toJSON());

            console.log(drawingPath.path);

        }


        var invalidCoord = -1000000; //无效的坐标值

        var prevX = invalidCoord, prevY = invalidCoord; //绘制中上一个节点的x,y

        var drawingIndex = 0; //绘制对象的下标

        var drawingPath = undefined;

        var drawColor = '#E34F51',

            strokeWidth = 2,

            tempCount = 0;


        //手写板绘制 type:M=>开始绘制 Q=>绘制中 L=>结束绘制

        function writingPad(type, x, y) {


            // window.open("http://cmd.com/WriteLog?writingPad—type:" + type + " x:" + x + " y:" + y);


            if (type) {

                switch (type.toLowerCase()) {

                    case 'm':

                        //开始绘制

                        drawingPath = new fabric.Path('M ' + x + ' ' + y + ' ', {

                            stroke: drawColor,

                            fill: "rgba(255, 255, 255, 0)",

                            strokeWidth: strokeWidth

                        });

                        canvas.add(drawingPath);

                        break;

                    case 'q':

                        //绘制中

                        if (drawingPath) {

                            if (prevX == invalidCoord || prevY == invalidCoord) {

                                prevX = x, prevY = y;

                            } else {

                                ++tempCount;

                                if (tempCount % 2) {

                                    drawingPath.path.push(["Q", prevX, prevY, x, y]);

                                    var _path = drawingPath.path;

                                    canvas.remove(_path); //先移除

                                    //再添加（变相实现更新）

                                    drawingPath = new fabric.Path(_path, {

                                        stroke: drawColor,

                                        fill: "rgba(255, 255, 255, 0)",

                                        strokeWidth: strokeWidth

                                    });

                                    canvas.add(drawingPath);

                                    prevX = invalidCoord, prevY = invalidCoord;


                                    // window.open("http://cmd.com/WriteLog?drawingPath—type:" + type + " x:" + x + " y:" + y);


                                }

                            }

                        } else {

                            alert('绘制失败：画板异常，请重新连接画板重试！');

                        }

                        break;

                    case 'l':

                        //结束绘制

                        drawingPath.path.push(["L", x, y]);

                        // canvas.loadFromJSON(canvas.toJSON());

                        drawingPath = undefined;

                        prevX = invalidCoord, prevY = invalidCoord;

                        tempCount = 0;

                        break;

                    default:

                        break;

                }

            }

        }


        function clearCanvas() {

            canvas.clear();

        }


    </script>
</body>

</html>