canvans.js

let mixin = {
    methods: {
        drawInit(name, imgUrl) {
            let info = JSON.parse(this.detail.point)
            let imgList = JSON.parse(this.detail.picture)
            let imgObj = imgList[0] //获取图片对象
            // 测试将图片设置为canvas背景
            // let imagesUrl = this.imgUrlArr && this.imgUrlArr[0].imgUrl
            var canvas = document.getElementById(name ? name : 'canvas')
            var cxt = canvas.getContext('2d')
            canvas.width = imgObj.imgWidth //584
            canvas.height = imgObj.imgHeight //1446 //440

            let img = new Image()
            img.src = imgUrl
            const _this = this
            img.onload = function () {
                var canvasTemp = document.getElementById(name ? name : 'canvas')
                var contextTemp = canvasTemp.getContext('2d')
                canvasTemp.width = imgObj.imgWidth // 目标宽度
                canvasTemp.height = imgObj.imgHeight // 目标高度
                contextTemp.drawImage(this, 0, 0, canvasTemp.width, canvasTemp.height)
                var ptn = cxt.createPattern(canvasTemp, 'no-repeat')
                cxt.fillStyle = ptn
                cxt.fill()
                if (imgObj.objectRect) {
                    let rect = imgObj.objectRect[0]
                    let rule = [
                        [rect.objLeft, rect.objTop],
                        [rect.objRight, rect.objTop],
                        [rect.objRight, rect.objBottom],
                        [rect.objLeft, rect.objBottom],
                        [rect.objLeft, rect.objTop],
                    ]
                    _this.drawLine(cxt, rule, imgObj.imgWidth / 8192, imgObj.imgHeight / 8192, 12, '#46e832', 'rgba(0,0,0,0)')
                } else if (_this.detail.alarmType == '896') {
                    //896类型才有
                    //暴露垃圾
                    let rule = info.detectRegion
                    _this.drawLine(cxt, rule, imgObj.imgWidth / 8192, imgObj.imgHeight / 8192, 12, '#46e832', 'rgba(0,0,0,0)')
                } else if (_this.detail.alarmType == '302') {
                    //绊线入侵
                    let rule = info.line
                    _this.drawBanLine(cxt, rule, imgObj.imgWidth / 8192, imgObj.imgHeight / 8192, 12, '#46e832', 'rgba(0,0,0,0)', false)
                } else if (_this.detail.alarmType == '1') {
                    let rect = info.crowdAlarmList[0]
                    let rule = [
                        [rect.left, rect.top],
                        [rect.right, rect.top],
                        [rect.right, rect.bottom],
                        [rect.left, rect.bottom],
                        [rect.left, rect.top],
                    ]
                    _this.drawLine(cxt, rule, imgObj.imgWidth / 8192, imgObj.imgHeight / 8192, 12, '#46e832', 'rgba(0,0,0,0)')
                } else {
                    let rule = info.regionList[0].region
                    _this.drawLine(cxt, rule, imgObj.imgWidth / 8192, imgObj.imgHeight / 8192, 12, '#46e832', 'rgba(0,0,0,0)')
                }
                _this.detail.alarmTypeName && _this.drawText(cxt, 50, 80, '#46e832', (50 * imgObj.imgWidth) / 1920, _this.detail.alarmTypeName)
            }
        },
        drawLine(cxt, rule, k_width, k_height, borderWidth = 14, borderColor, fillColor, close = true) {
            /**
             * 划线
             * @param {Object} cxt canvas上下文
             * @param {Array} rule 点位规则
             * @param {number} k_width 宽度转化比率 eg:0.5
             * @param {number} k_height 高度转化比率 eg:0.5
             * @param {number} borderWidth 线条的宽度
             * @param {string} borderColor 线条的颜色
             * @param {string} fillColor 填充颜色
             * @param {Boolean} close 是否闭合
             * @author sun wen 2020.12.2
             */

            cxt.beginPath()
            for (let i = 0; i < rule.length; i++) {
                if (i == 0) {
                    cxt.moveTo(Math.floor(rule[i][0] * k_width), Math.floor(rule[i][1] * k_height))
                } else {
                    cxt.lineTo(Math.floor(rule[i][0] * k_width), Math.floor(rule[i][1] * k_height))
                }
            }
            close && cxt.closePath()
            cxt.lineCap = 'round'
            cxt.lineWidth = borderWidth
            cxt.strokeStyle = borderColor
            cxt.stroke()
        },
        drawBanLine(cxt, rule, k_width, k_height, borderWidth = 14, borderColor, fillColor, close = true) {
            /**
             * 划线
             * @param {Object} cxt canvas上下文
             * @param {Array} rule 点位规则
             * @param {number} k_width 宽度转化比率 eg:0.5
             * @param {number} k_height 高度转化比率 eg:0.5
             * @param {number} borderWidth 线条的宽度
             * @param {string} borderColor 线条的颜色
             * @param {string} fillColor 填充颜色
             * @param {Boolean} close 是否闭合
             * @author sun wen 2020.12.2
             */
            cxt.beginPath()
            cxt.lineCap = 'round'
            cxt.lineWidth = borderWidth
            cxt.strokeStyle = borderColor
            cxt.fillStyle = fillColor

            let x1 = Math.floor(rule[0][0] * k_width)
            let y1 = Math.floor(rule[0][1] * k_height)
            let x2 = Math.floor(rule[1][0] * k_width)
            let y2 = Math.floor(rule[1][1] * k_height)
            cxt.moveTo(x1, y1) //第一个点
            cxt.lineTo(x2, y2) //第二个点
            close && cxt.closePath()
            cxt.stroke()
            let k = (y2 - y1) / (x2 - x1)
            let b = y1 - k * x1
            console.log(`y1=${k} * x ${b > 0 ? '+' : ''} ${b}`)
            let O = [(x1 + x2) / 2, (y1 + y2) / 2]
            let k2 = -(1 / k)
            let b2 = O[1] - k2 * O[0]
            let derta = 60
            let res = Math.sqrt(derta / (k * k + 1))
            console.log('res', res)
            let F1 = [O[0] - res, k2 * (O[0] - res) + b2]
            let F2 = [O[0] + res, k2 * (O[0] + res) + b2]
            console.log(`y2=${k2} * x2 ${b2 > 0 ? '+' : ''} ${b2}`)
            console.log('[x1, y1]', [x1, y1])
            console.log('[x2, y2]', [x2, y2])
            console.log('O[x,y]', O)
            console.log('F1[x ,y]', F1)
            console.log('F2[x ,y]', F2)
            cxt.moveTo(F1[0], F1[1]) //第一个点
            cxt.lineTo(F2[0], F2[1]) //第二个点
            // cxt.moveTo(609.5, 610.5) //第一个点
            // cxt.lineTo(611.5, 450.5) //第二个点
            close && cxt.closePath()
            cxt.stroke()
        },
        drawText(cxt, x, y, textColor = 'red', zize, text) {
            /**
             * 字体描绘
             * @param {Object} cxt canvas上下文
             * @param {number} x 点位 x
             * @param {number} y 点位 y
             * @param {string} textColor 字体颜色
             * @param {number} zize 字体大小
             * @param {string} text 字体文字内容
             * @author sun wen 2020.12.2
             */

            // 设置字体
            cxt.font = `${zize}px bold 微软雅黑`
            // 设置颜色
            cxt.fillStyle = textColor
            // 设置水平对齐方式
            cxt.textAlign = 'left'
            // 设置垂直对齐方式
            cxt.textBaseline = 'middle'
            // 绘制文字（参数：要写的字，x坐标，y坐标）
            cxt.fillText(text, x, y)
        },
    },
}
export default mixin