simulation-front/src/views/workManagement/components/canvasProjectInfo.vue

<template>
    <div class="canvasProjectInfoPanel">
        <canvas id="canvasProjectInfo" width="1000" height="500"></canvas>
        <canvas id="canvasProjectInfoA" width="1000" height="500"></canvas>
    </div>
</template>

<script>
//import  from '';

export default {
    name: "canvasProjectInfo", // 任务详情中的canvas
    components: {},
    data() {
        return {
            // modelImgSrc: require("@/assets/common/image/others/carTopView.png"),
            sensorSrc1: require("@/assets/common/image/sensor/l1.png"),
            sensorSrc2: require("@/assets/common/image/sensor/l2.png"),
            sensorSrc3: require("@/assets/common/image/sensor/l3.png"),
            sensorSrc5: require("@/assets/common/image/sensor/l5.png"),
            ctx: null,
            ctxBg: null,
            imgBg: null,
            imgIcon1: null,
            imgIcon2: null,
            imgIcon3: null,
            imgIcon5: null,
            rate: 70, // 换算比例
        };
    },

    props: {
        configList: {
            type: Object,
            default: {
                camera: [],
                ogt: [],
                lidar: [],
                gps: [],
            },
        },
        modelImgSrc: {
            type: String,
            default: require("@/assets/common/image/others/carTopView.png"),
        },
    },

    watch: {
        modelImgSrc() {
            this.drawBg();
        },
    },

    methods: {
        draw(data, type) {
            let rate = this.rate;

            data.x = data.sensorX;
            data.y = data.sensorY;
            data.h = data.sensorH;
            if (data.x === "" || data.y === "" || data.h === "") return;

            // this.imgIcon.src = src;

            let x = +data.y * rate;
            let y = +data.x * rate;
            let h1 = 90 - +data.h / 2;
            let h2 = 90 + +data.h / 2;

            // this.ctx.drawImage(this.imgIcon, x - 6, y - 6, 20.5, 14.5);
            let icon = null;
            if (type === 1) {
                icon = this.imgIcon1;
            } else if (type === 2) {
                icon = this.imgIcon2;
            } else if (type === 3) {
                icon = this.imgIcon3;
            } else if (type === 5) {
                icon = this.imgIcon5;
            }

            this.ctx.drawImage(icon, x - 6, y - 6, 20, 20);
            this.ctx.beginPath();

            //定义起点
            this.ctx.moveTo(x, y);
            //以起点为圆心，画一个半径为100的圆弧
            this.ctx.arc(x, y, 200, (h1 * Math.PI) / 180, (h2 * Math.PI) / 180);
            this.ctx.closePath();
            this.ctx.fillStyle = "rgba(252,222,147,0.54)";
            this.ctx.fill();
        },
        drawBg() {
            this.ctxBg.clearRect(0, 0, 1000, 500);
            this.imgBg.src = this.modelImgSrc;
            this.ctxBg.drawImage(this.imgBg, 0, 0, 1000, 500);
        },
    },

    mounted() {
        $(document).ready(() => {
            this.ctx = document
                .getElementById("canvasProjectInfo")
                .getContext("2d");
            this.ctxBg = document
                .getElementById("canvasProjectInfoA")
                .getContext("2d");

            this.ctx.translate(960, 250);
            this.ctx.rotate(Math.PI / 2);

            this.imgBg = new Image();
            this.imgBg.src = this.modelImgSrc;
            this.imgBg.onload = () => {
                this.ctxBg.drawImage(this.imgBg, 0, 0, 1000, 500);

                this.imgIcon1 = new Image();
                this.imgIcon1.src = this.sensorSrc1;
                this.imgIcon1.onload = () => {
                    this.configList.camera.forEach((i) => {
                        this.draw(i, 1);
                    });
                };

                this.imgIcon2 = new Image();
                this.imgIcon2.src = this.sensorSrc2;
                this.imgIcon2.onload = () => {
                    this.configList.ogt.forEach((i) => {
                        this.draw(i, 2);
                    });
                };

                this.imgIcon3 = new Image();
                this.imgIcon3.src = this.sensorSrc3;
                this.imgIcon3.onload = () => {
                    this.configList.lidar.forEach((i) => {
                        this.draw(i, 3);
                    });
                };

                this.imgIcon5 = new Image();
                this.imgIcon5.src = this.sensorSrc5;
                this.imgIcon5.onload = () => {
                    this.configList.gps.forEach((i) => {
                        this.draw(i, 5);
                    });
                };
            };
        });
    },
};
</script>

<style lang="less" scoped>
.canvasProjectInfoPanel {
    position: relative;

    canvas {
        width: 100%;
    }

    #canvasProjectInfo {
        position: relative;
        z-index: 1;
    }

    #canvasProjectInfoA {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
}
</style>