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>