canvas画点连线

最新推荐文章于 2024-08-15 10:23:35 发布

弯腰捡代码

最新推荐文章于 2024-08-15 10:23:35 发布

阅读量1.9k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_38655115/article/details/125871625

版权

这篇博客介绍了一个使用Vue封装的画点连线功能，包括初始化canvas、添加点击事件监听画点、连线以及清除画布的方法。通过监听canvas的点击事件，动态绘制并连接点，同时提供了清除画布的实现，确保了画布状态的可管理性。

摘要由CSDN通过智能技术生成

let c = '';
let ctx = '';
let prevX = 0,
    prevY = 0,
    cx = 0,
    cy = 0,
    size = 0;
   
   mothods:{
      init(newArr) {
            c = this.$refs.theCanvas;
            ctx = c.getContext('2d');
            //console.log(this.$refs.vedioCanvas.clientWidth,this.$refs.vedioCanvas.clientHeight,ctx)
            ctx.canvas.width = this.$refs.vedioCanvas.clientWidth;
            ctx.canvas.height = this.$refs.vedioCanvas.clientHeight;
            //存储canvas宽度高度
            sessionStorage.setItem('canvas', JSON.stringify({ width: ctx.canvas.width, height: ctx.canvas.height }));

            c.addEventListener('click', addDot);

            let that = this,
                oldsave = [];
            oldsave = newArr;
            function carames(e) {
                if (oldsave.length != 0) {
                    oldsave.forEach((item) => {
                        if (that.cameraId == item.cameraId) {
                            item.points.push({
                                x: e.offsetX,
                                y: e.offsetY
                            });
                        }
                    });
                }
            }

            function addDot(e) {
                ctx.fillStyle = 'red';
                ctx.strokeStyle = 'red';

                ctx.beginPath(); //起始路径
                carames(e);

                if (e.x && e.y) {
                    drawDot(e.offsetX, e.offsetY, size);
                } else {
                    drawDot(e.offsetX, e.offsetY, size);
                }
            }
            //<!------------------------   drawDot 画点填充    ------------------------------->
            function drawDot(x, y, s) {
                if (s !== 10) {
                    ctx.arc(x, y, 2, 0, 2 * Math.PI); //画圆
                    ctx.fill(); //填充
                    ctx.stroke(); //绘制已定义的路径
                    s++;
                    drawDot(x, y, s);
                } else {
                    if (prevX !== 0 && prevY !== 0) {
                        addLine(x, y, prevX, prevY);
                    } else {
                        prevX = x;
                        prevY = y;
                    }
                }
            }

            function addLine(x, y, px, py) {
                let goingForward = false,
                    goingUp = false;
                ctx.beginPath(); //起始坐标
                ctx.moveTo(px, py); //定义线条开始坐标
                cx = x;
                cy = y;

                if (cx < x) {
                    goingForward = true;
                }

                if (cy > y) {
                    goingUp = true;
                }

                drawLine(x, y, goingForward, goingUp);
            }

            function drawLine(x, y, gf, gu) {
                let metX = false,
                    metY = false;

                c.removeEventListener('click', addDot);
                ctx.lineTo(x, y); //添加一个新点，然后在画布中创建从该点到最后指定点的线条。
                ctx.stroke(); //绘制线条

                if (gf) {
                    if (cx >= x) {
                        metX = true;
                    }

                    if (cx < x && !metX) {
                        cx += 4;
                    }
                } else {
                    if (cx <= x) {
                        metX = true;
                    }

                    if (cx > x && !metX) {
                        cx -= 4;
                    }
                }

                if (gu) {
                    if (cy <= y) {
                        metY = true;
                    }

                    if (cy > y && !metY) {
                        cy -= 4;
                    }
                } else {
                    if (cy >= y) {
                        metY = true;
                    }

                    if (cy < y && !metY) {
                        cy += 4;
                    }
                }

                if (!metY || !metX) {
                    requestAnimationFrame(function () {
                        drawLine(x, y, gf, gu);
                    });
                } else {
                    prevX = x;
                    prevY = y;
                    c.addEventListener('click', addDot);
                }
            }
        },
   }

画点连线，调用该方法就可以，vue封装

如果想清除掉画的点


        clearcanvas() {
            let oneCream = [];
            oneCream = this.$store.state.savecreame;
            oneCream.forEach((item, index) => {
                if (item.points.length != 0) {
                    if (this.cameraId == item.cameraId) {
                        item.points = [];
                        prevX = 0;
                        prevY = 0;
                        cx = 0;
                        cy = 0;
                        size = 0;
                        ctx.canvas.width = this.$refs.vedioCanvas.clientWidth;
                        ctx.canvas.height = this.$refs.vedioCanvas.clientHeight;
                        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                    }
                }
            });
        },

这样就没有问题了