canvas的使用-------canvas动态为图片添加图形标注-一只努力的小前端

使用Tdrag插件，需要先引入jq

    <!-- 背景画布 -->
    <canvas id="canvas"></canvas>
    <!-- 图形画布 -->
    <canvas id="gCanvas"></canvas>
    <!-- 添加图形 -->
    <div class="controller">
        <div class="button" onclick="addGeometry('rect')">矩形</div>
        <div class="button" onclick="addGeometry('circle')">圆形</div>
        <div class="button" onclick="finsh()">保存</div>
        <div style="padding: 0;color: #fff;font-size: 12px;" id="geometryArrLen"> </div>
    </div>
    <!-- 编辑时图形移动的容器 -->
    <div id="move">
    </div>
    <div id="tmp" style="display: none;">
        <div class="point left-top" position="left-top"></div>
        <div class="point top" position="top"></div>
        <div class="point right-top" position="right-top"></div>
        <div class="point left" position="left"></div>
        <div class="point right" position="right"></div>
        <div class="point left-bottom" position="left-bottom"></div>
        <div class="point bottom" position="bottom"></div>
        <div class="point right-bottom" position="right-bottom"></div>
    </div>
    <!-- 操作图形菜单 -->
    <ul class="menu">
        <li class="menu-item" onclick="delGeometry()">删除</li>
        <li class="menu-item" onclick="editGeometry()">修改</li>
    </ul>

获取两个canvas，一个用作背景一个放置图形

// 存储的图形
        var geometryArr = [];
        // 当前画布上的图形
        var currGeometryArr = [];
        
        // 当前放置了两块画布，一块防置背景，一块放置图形，以免清除图形时将背景清除
        // 背景画布
        var gCanvas = document.getElementById("gCanvas");
        gCanvas.width=gCanvas.clientWidth;
        gCanvas.height=gCanvas.clientHeight;
        var gCtx = gCanvas.getContext("2d");
        // 图形画布
        var canvas = document.getElementById("canvas");
        canvas.width=canvas.clientWidth;
        canvas.height=canvas.clientHeight;
        var ctx = canvas.getContext("2d");

        // 选中的图形下标
        var selectGeometry = -1;
        // 初始化背景
        var img = new Image();
        img.src = "./homeImg/bj.jpg";
        img.onload = function(){

			// 这一段如果不等img加载完成会无法绘制出图片
            ctx.drawImage(img, 0, 0, canvas.clientWidth, canvas.clientHeight);
            geometryArr = window.localStorage.getItem("geometryArr") || [];
            $("#geometryArrLen").text("数量：0");
            
            // currGeometryArr = geometryArr;
            if(geometryArr && geometryArr.length > 0){
                geometryArr = JSON.parse(geometryArr);
                $("#geometryArrLen").text("数量：" + geometryArr.length);
                for (let i = 0; i < geometryArr.length; i++) {
                    const geometry = geometryArr[i];
                    geometry.path = new Path2D();
                    if(geometry.g == "rect"){
                        drawPathRect(gCtx, geometry.path, geometry.size, geometry.points, geometry.color, geometry.type)
                    }else if(geometry.g == 'circle'){
                        drawPathCircle(gCtx, geometry.path, geometry.size, geometry.points, geometry.color, geometry.type)
                    }
                }
            }
        }

判断当前点击的是哪一个图形
使用isPointInPath 和 Path 2D来对图形进行绘制和判断

https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D

        // 监听左键点击图形，获取当前点击的图形
        gCanvas.addEventListener('click', function(e){
            $(".menu").css({"display": "none"})
            const canvasInfo = canvas.getBoundingClientRect();
            for (let i = 0; i < geometryArr.length; i++) {
                const geometry = geometryArr[i];
                if(geometry.path && gCtx.isPointInPath(geometry.path, e.clientX, e.clientY)){
                    // window.open(geometry.link);
                    selectGeometry = i;
                    return
                }
            }
        })

图形绘制到画布上之后对图形进行删除和修改位置的操作

        // 监听右键
        window.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })

        gCanvas.addEventListener('contextmenu',function(e){
            for (let i = 0; i < geometryArr.length; i++) {
                const geometry = geometryArr[i];
                if(geometry.path && gCtx.isPointInPath(geometry.path, e.clientX, e.clientY)){
                    selectGeometry = i;
                    geometryMenu(e.clientX + 3, e.clientY + 3);
                    // window.open(geometry.link);
                    return
                }
            }
        })

拖动图形四周改变元素的大小

        // 改变图形大小的操作
        function bindPoint(geometry){
            var points = {
                top: false,
                left: false,
                right: false,
                bottom: false
            }
            $(".point").mousedown(function(e){
                let that = this
                let pointAttr = $(that).attr("position");
                if(pointAttr.indexOf('left') > -1){
                    points.left = true;
                }
                if(pointAttr.indexOf('top') > -1){
                    points.top = true;
                }
                if(pointAttr.indexOf('right') > -1){
                    points.right = true;
                }
                if(pointAttr.indexOf('bottom') > -1){
                    points.bottom = true;
                }
                let eleSize = $(that).parent();
                var reg = new RegExp("px", "g")
                let eleMsg = {
                    w: eleSize.width(),
                    h: eleSize.height(),
                    left: eleSize.css("left").replace(reg, "")*1,
                    top: eleSize.css("top").replace(reg, "")*1
                }

                let mouseXY = {
                    x: e.clientX,
                    y: e.clientY
                }
                // 禁止拖拽
                // 因为拖拽的部分使用的是Tdrag.js，在此处进行拉伸元素的时候会将图形进行拖拽，在拉伸的时候需要先禁用拖拽
                $.disable_cloose();

                $(document).mousemove(function(e){
                    if(!(points.left || points.right || points.top || points.bottom)){
                        return
                    }
                    if(points.left){
                        if(eleMsg.w + mouseXY.x - e.clientX <= 30){
                            eleSize.width(30);
                            eleSize.css("left", eleMsg.left+'px');
                        }else{
                            eleSize.width(eleMsg.w + mouseXY.x - e.clientX);
                            eleSize.css("left", e.clientX+'px');
                        }
                    }
                    if(points.top){
                        if(eleMsg.h + mouseXY.y - e.clientY <= 30){
                            eleSize.height(30);
                            eleSize.css("top", eleMsg.top+'px');
                        }else{
                            eleSize.height(eleMsg.h + mouseXY.y - e.clientY);
                            eleSize.css("top", e.clientY+'px');
                        }
                    }
                    if(points.right){
                        if(eleMsg.w - mouseXY.x + e.clientX <= 30){
                            eleSize.width(30);
                        }else{
                            eleSize.width(eleMsg.w - mouseXY.x + e.clientX);
                        }
                    }
                    if(points.bottom){
                        if(eleMsg.h - mouseXY.y + e.clientY <= 30){
                            eleSize.height(30);
                        }else{
                            eleSize.height(eleMsg.h - mouseXY.y + e.clientY);
                        }
                    }
                    geometry.size.w = eleSize.width();
                    geometry.points.x = eleSize.css("left").replace(reg, "")*1;
                    geometry.size.h = eleSize.height();
                    geometry.points.y = eleSize.css("top").replace(reg, "")*1;
                })
            })
            $(document).mouseup(function(e){
                // 开启拖拽
                $.disable_open();
                points = {
                    'top': false,
                    'left': false,
                    'right': false,
                    'bottom': false
                }
            })
        }

以下是对图形进行操作的方法

        // 弹出操作图形的菜单
        function geometryMenu(x, y){
            $(".menu").css({"display": "block", "left": x + "px", "top": y + "px"})
        }

        // 删除图形
        function delGeometry(){
            let geometry = geometryArr[selectGeometry];
            gCtx.clearRect(geometry.points.x, geometry.points.y, geometry.size.w, geometry.size.h);
            geometryArr.splice(selectGeometry, 1);
            $(".menu").css({"display": "none"});
            selectGeometry = -1;
        }

        // 编辑图形位置图形
        function editGeometry(){
            $(".menu").css({"display": "none"});
            let geometry = geometryArr[selectGeometry];
            delGeometry();
            addGeometry(geometry.g, geometry);
            selectGeometry = -1;
        }

        // 添加图形
        function addGeometry(type, geometryObj){
            let id = type + (new Date()).getTime().toString(16).toLocaleUpperCase();
            let div;
            let sColor = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
            let geometry = geometryObj || {
                points: {
                    x: 100, 
                    y: 100
                },
                size: {
                    w: 30,
                    h: 30
                },
                g: type,
                color: sColor,
                type: "fill",
                link: "http://www.baidu.com",
                path: "",
                bgImage: "./homeImg/bj.jpg"
            }
            if(type == "rect"){
                div = '<div style="position: absolute;left: ' + geometry.points.x + 'px; top: ' + geometry.points.y + 'px;width: ' + geometry.size.w + 'px;height: ' + geometry.size.h + 'px;background: ' + geometry.color + ';" id= '+ id + '></div>'
            }else if(type == "circle"){
                div = '<div style="position: absolute;left: ' + geometry.points.x + 'px; top: ' + geometry.points.y + 'px;width: ' + geometry.size.w + 'px;height: ' + geometry.size.h + 'px;background: ' + geometry.color + ';border-radius: 50%;" id= '+ id + '></div>'
            }
            $("#move").append(div);
            // $("#" + id).css({
            //     "background": "url(" + geometry.bgImage + ") center no-repeat",
            //     "background-size": "100% 100%"
            // });
            $("#tmp>div").clone().appendTo("#" + id);
            bindPoint(geometry);
            $("#" + id).Tdrag({
                scope: "body",
                cbEnd:function(e){
                    geometry.points.x = $("#" + id).offset().left;
                    geometry.points.y = $("#" + id).offset().top;
                }
            });
            geometryArr.push(geometry);
        }

        // 绘制path2d的矩形
        function drawPathRect(ctx, path, size, points, color, type){
            path.rect(points.x, points.y, size.w, size.h);
            ctx[type + 'Style'] = color;
            ctx[type](path);
        }

        // 绘制path2d的圆
        function drawPathCircle(ctx, path, size, points, color, type){
            if (size.w != size.h) {
                let sw = size.w / 2;
                let sh = size.h / 2;
                path.ellipse(points.x + sw, points.y + sh, sw, sh, 0, 0, 2 * Math.PI);
            }else{
                let r = size.w / 2;
                path.arc(points.x + r, points.y + r, r, 0, 2 * Math.PI);
            }
            ctx[type + 'Style'] = color;
            ctx[type](path);
        }

        /*
         points: 绘制的点
         color: 颜色
         type: 类型    空心stroke，实心 fill
        */
        function drawRect(ctx, points, color, type){
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            for (let i = 1; i < points.length; i++) {
                const point = points[i];
                ctx.lineTo(point.x, point.y);
            }
            ctx[type + 'Style'] = color;
            ctx.closePath();
            ctx[type]();
        }
        function finsh() {
            window.location.reload();
            window.localStorage.setItem("geometryArr", JSON.stringify(geometryArr));
            // alert("保存本地成功！！！");
        }