<template>
    <div ref="rectangleCanvas" style="position:relative ;z-index: 999;color: #fff;">
        <img ref="imgs" :src="AngleUrl" alt=""
            style="position:absolute;top: 0px;left: 0;display:block;width:1096px;height: 450px;">
        <canvas ref="myCanvas" @mousedown="mouseDown($event)" class="myCanvas" :width="1096" :height="450">
        </canvas>
        <canvas id="canvasSave" ref="canvasSave" :width="1096" :height="450"></canvas>
    </div>
</template>

<script>
export default {
    props: ['AngleUrl', 'droPoint', 'imgWidth', 'imgHeight'],
    name: 'rectangleCanvas',
    data() {
        return {
            imgW: '',
            imgH: '',
            isRectangle: false,
            min_temp: '',
            max_temp: '',
            min_angle: '',
            max_angle: '',

            // 矩形
            can: '',
            ctx: '',
            ctxSave: '',
            canSave: '',
            tagObj: {
                newrecsObj: {},
                recs: [],  //两个矩形的宽高与坐标
                x: 0,
                y: 0,
                url: '',
                radious: 5,
                recSize: 5,
                drag: false,
                resize: false,
                draw: false,
                showLitRecs: true,
                index: -1,
                side: 0,
                startX: 0,
                startY: 0,
                isRightClick: false
            },
            //点
            drop: { x: '0', y: '0' },
            // 多边形
            pointX: '',
            pointY: '',
            point: [],
            num: null,
            pointArr: [], // 存放坐标的数组
            //点

            oIndex: -1, //判断鼠标是否移动到起始点处，-1为否，1为是
            // 拖动
            offset: { x: 0, y: 0 }, // 拖动偏移
            curOffset: { x: 0, y: 0 }, // 记录上一次的偏移量
            x: 0, // 记录鼠标点击Canvas时的横坐标
            y: 0, // 记录鼠标点击Canvas时的纵坐标
        }
    },
    methods: {
        drawOldRecs(recs, ctx, index) { //鼠标画图后
            if (recs.length == 0) {
                return 0
            }
            for (var i = 0; i < recs.length; i++) {
                this.ctx.beginPath()
                ctx.lineWidth = 4
                if (index == i) {
                    ctx.strokeStyle = '#409eff'
                } else {
                    ctx.strokeStyle = '#409eff'
                }
                ctx.strokeRect(recs[i].x, recs[i].y, recs[i].w, recs[i].h)
            }
        },
        drawPoint(point) {
            // 获取画笔
            // 设置绘制颜色
            this.ctx.clearRect(0, 0, this.can.width, this.can.height)
            this.ctx.fillStyle = '#409eff';
            // canvas.width = '14px'
            // 绘制成矩形
            // this.ctx.fillRect(point.x - 2, point.y - 2, 10, 10);
            this.ctx.fillRect(point.x - 12, point.y - 2, 10, 3);
            this.ctx.fillRect(point.x - 2, point.y - 12, 3, 10);
            this.ctx.fillRect(point.x - 2, point.y - 2, 14, 3);
            this.ctx.fillRect(point.x - 2, point.y - 2, 3, 14);
            // this.ctx.fillText("", point.x, point.y);
        },
        getImg() {
            let that = this
            var img = this.$refs.imgs
            this.$refs.imgs.onload = function () {
                that.imgW = img.naturalWidth
                that.imgH = img.naturalHeight
                // that.$refs.rectangleCanvas.style.height = Math.ceil(img.naturalHeight / img.naturalWidth * 1280) + 40 + 'px'
                // that.$refs.myCanvas.height = Math.ceil(img.naturalHeight / img.naturalWidth * 1280)
                // that.$refs.canvasSave.height = Math.ceil(img.naturalHeight / img.naturalWidth * 1280)
                that.ctx.strokeStyle = '#409eff' // 线条颜色
                that.ctx.lineWidth = 4 // 线条粗细
                that.ctxSave.strokeStyle = '#409eff' // 线条颜色
                that.ctxSave.lineWidth = 4 // 线条粗细
                if (that.droPoint) {
                    if (that.droPoint.type == 'point') {
                        that.isRectangle = false
                        that.drop.x = Math.round(that.droPoint.pos[0].x / that.imgWidth * 1096)
                        that.drop.y = Math.round(that.droPoint.pos[0].y / that.imgHeight * 450)
                        that.drawPoint(that.drop)
                    } else if (that.droPoint.type == 'rectangle') {
                        that.isRectangle = true
                        let arr = []
                        arr.push({
                            x: Math.round(that.droPoint.pos[0].x / that.imgWidth * 1096),
                            y: Math.round(that.droPoint.pos[0].y / that.imgHeight * 450),
                            w: Math.round((that.droPoint.pos[1].x / that.imgWidth * 1096)) - (Math.round(that.droPoint.pos[0].x / that.imgWidth * 1096)),
                            h: Math.round((that.droPoint.pos[2].y / that.imgHeight * 450)) - (Math.round(that.droPoint.pos[0].y / that.imgHeight * 450)),
                        })
                        that.tagObj.recs = arr
                        that.drawOldRecs(that.tagObj.recs, that.ctx) //必须放在moveRec之下
                    }
                }
            }
        },
    },

    mounted: function () {
        this.can = this.$refs.myCanvas
        this.ctx = this.$refs.myCanvas.getContext('2d')
        this.canSave = this.$refs.canvasSave
        this.ctxSave = this.$refs.canvasSave.getContext('2d')
        this.ctx.strokeStyle = '#409eff' // 线条颜色
        this.ctx.lineWidth = 4 // 线条粗细
        this.ctxSave.strokeStyle = '#409eff' // 线条颜色
        this.ctxSave.lineWidth = 4 // 线条粗细
        this.getImg()

    },

}
</script>
<style lang="scss" scoped>
.myCanvas {
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: crosshair;
    user-select: none;
}

#canvasSave {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    user-select: none;
}
</style>
