simulation-front/src/views/modelLibrary/components/canvasSensorModelA.vue

<template>
    <div class="canvasSensorModelAPanel">
        <canvas id="canvasSensorModelA" width="1000" height="500"></canvas>
        <canvas id="canvasSensorModelABg" width="1000" height="500"></canvas>
    </div>
</template>

<script>
//import  from '';

export default {
    name: "canvasSensorModelA", //
    components: {},
    data() {
        return {
            modelImgSrc: require("@/assets/common/image/others/carTopView.png"),
            ctx: null,
            ctxBg: null,
            imgBg: null,
            rate: 70, // 换算比例
        };
    },

    props: {
        coordinate: {
            type: Object,
            default: { r: 0, n: 0, hl: 60, hr: 60 },
        },
    },

    watch: {
        coordinate(val) {
            this.draw(val);
        },
    },

    methods: {
        draw(data) {
            if (
                data.r === "" ||
                data.n === "" ||
                data.hl === "" ||
                data.hr === ""
            )
                return;
            this.ctx.clearRect(-250, -220, 500, 1000);

            this.ctx.beginPath();

            let rate = this.rate;

            let hr1 = +data.hl;
            let hr2 = +data.hr;
            // if (hr1 > 180) hr1 = 180;
            // if (hr2 > 180) hr2 = 180;

            //定义起点
            this.ctx.moveTo(6, 0);
            this.ctx.arc(
                6,
                0,
                +data.r * rate,
                0.5 * Math.PI,
                (hr1 / 180 + 0.5) * Math.PI
            );
            this.ctx.closePath();
            this.ctx.fillStyle = "rgba(252,222,147,0.54)";
            this.ctx.fill();

            this.ctx.beginPath();

            //定义起点
            this.ctx.moveTo(6, 0);
            this.ctx.arc(
                6,
                0,
                +data.r * rate,
                0.5 * Math.PI,
                (0.5 - hr2 / 180) * Math.PI,
                true
            );
            this.ctx.closePath();
            this.ctx.fillStyle = "rgba(252,222,147,0.54)";
            this.ctx.fill();

            this.clearArcFun(6, 0, +data.n * rate, this.ctx);
        },
        clearArcFun(x, y, r, cxt) {
            //(x,y)为要清除的圆的圆心，r为半径，cxt为context
            var stepClear = 1; //别忘记这一步
            clearArc(x, y, r);
            function clearArc(x, y, radius) {
                var calcWidth = radius - stepClear;
                var calcHeight = Math.sqrt(
                    radius * radius - calcWidth * calcWidth
                );
                var posX = x - calcWidth;
                var posY = y - calcHeight;

                var widthX = 2 * calcWidth;
                var heightY = 2 * calcHeight;

                if (stepClear <= radius) {
                    cxt.clearRect(posX, posY, widthX, heightY);
                    stepClear += 1;
                    clearArc(x, y, radius);
                }
            }
        },
        clear() {
            this.ctx.clearRect(-250, -220, 500, 1000);
        },
    },

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

            this.ctx.translate(780, 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);
            };
        });
    },
};
</script>

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

    canvas {
        width: 100%;
    }

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

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