xjc-vue/src/views/xjc-integratedmachine/wakeup/rainbow/index.vue

<template>
    <div id="outerDiv" class="development_stage">
        <head-component :headinfo=headinfo></head-component>
        <div class="page-content">
            <canvas width="1700" height="900" style="border: 1px solid blue; background-color: #000000;"
                    id="can"></canvas>
        </div>
    </div>

</template>

<script setup>
    import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'

    const headinfo = ref({})

    import {onMounted} from 'vue'
    import * as echarts from "echarts";
    import html2canvas from 'html2canvas';
    import {ElMessage} from 'element-plus'

    const backgroundImage = new Image();
    // backgroundImage.src = 'http://192.168.3.100/screenshot.png'; // 替换为你的背景图片路径

    let CENTER_X = 910;
    let CENTER_Y = 900;
    let startMouse = {x: 0, y: 0};
    let moveMouse = {x: 0, y: 0};

    // 画笔橡皮擦状态，true画笔，false橡皮
    let paintStateFlag = true;
    let paintStateFlagText = ref('画笔');

    // 第一个职业
    let startAngle11 = 0;
    let startAngle12 = 0;
    let startAngle13 = 0;

    // 第二个职业
    let startAngle21 = 0;
    let startAngle22 = 0;
    let startAngle23 = 0;

    // 第三个职业
    let startAngle31 = 0;
    let startAngle32 = 0;
    let startAngle33 = 0;

    // 第四个职业
    let startAngle41 = 0;
    let startAngle42 = 0;
    let startAngle43 = 0;

    // 第五个职业
    let startAngle51 = 0;
    let startAngle52 = 0;
    let startAngle53 = 0;

    // 第六个职业
    let startAngle61 = 0;
    let startAngle62 = 0;
    let startAngle63 = 0;

    // 第七个职业
    let startAngle71 = 0;
    let startAngle72 = 0;
    let startAngle73 = 0;

    // 所有轨道绘画限制
    let paintFlagList = [
        false, false, false,
        false, false, false,
        false, false, false,
        false, false, false,
        false, false, false,
        false, false, false]

    let undoList = []; // 用于保存所有操作，用于撤销和重做
    let redoList = []; // 用于保存所有撤销的操作，用于重做

    function changes() {
        can.addEventListener('touchstart', function (el) {
            let rect = el.target.getBoundingClientRect();
            startMouse.x = el.touches[0].pageX - rect.left;
            startMouse.y = el.touches[0].pageY - rect.top;
            calcStartRadius();
            can.addEventListener('touchmove', function (e) {
                moveMouse.x = startMouse.x;
                moveMouse.y = startMouse.y;
                startMouse.x = e.targetTouches[0].pageX - this.offsetLeft;
                startMouse.y = e.targetTouches[0].pageY - this.offsetTop;
                if (startMouse.x !== moveMouse.x && startMouse.y !== moveMouse.y) {
                    return;
                }
                calcEndRadius();
            })
        })
        can.addEventListener('touchend', function () {
            can.onmousemove = null;
        })
    }

    /*计算起始点*/
    function calcStartRadius() {
        let sum = Math.pow(startMouse.x - CENTER_X, 2) + Math.pow(CENTER_Y - startMouse.y, 2);
        // 第一个职业
        if (sum < Math.pow(50, 2) && sum > Math.pow(10, 2)) {
            startAngle11 = calcAngle();
            calcPaintCircleFlag(0)
        } else if (sum < Math.pow(90, 2) && sum > Math.pow(50, 2)) {
            startAngle12 = calcAngle();
            calcPaintCircleFlag(1)
        } else if (sum < Math.pow(130, 2) && sum > Math.pow(90, 2)) {
            startAngle13 = calcAngle();
            calcPaintCircleFlag(2)
        }
        // 第二个职业
        else if (sum < Math.pow(185, 2) && sum > Math.pow(145, 2)) {
            startAngle21 = calcAngle();
            calcPaintCircleFlag(3)
        } else if (sum < Math.pow(225, 2) && sum > Math.pow(185, 2)) {
            startAngle22 = calcAngle();
            calcPaintCircleFlag(4)
        } else if (sum < Math.pow(265, 2) && sum > Math.pow(225, 2)) {
            startAngle23 = calcAngle();
            calcPaintCircleFlag(5)
        }
        // 第三个职业
        else if (sum < Math.pow(320, 2) && sum > Math.pow(280, 2)) {
            startAngle31 = calcAngle();
            calcPaintCircleFlag(6)
        } else if (sum < Math.pow(360, 2) && sum > Math.pow(320, 2)) {
            startAngle32 = calcAngle();
            calcPaintCircleFlag(7)
        } else if (sum < Math.pow(400, 2) && sum > Math.pow(360, 2)) {
            startAngle33 = calcAngle();
            calcPaintCircleFlag(8)
        }
        // 第四个职业
        else if (sum < Math.pow(455, 2) && sum > Math.pow(415, 2)) {
            startAngle41 = calcAngle();
            calcPaintCircleFlag(9)
        } else if (sum < Math.pow(495, 2) && sum > Math.pow(455, 2)) {
            startAngle42 = calcAngle();
            calcPaintCircleFlag(10)
        } else if (sum < Math.pow(535, 2) && sum > Math.pow(495, 2)) {
            startAngle43 = calcAngle();
            calcPaintCircleFlag(11)
        }
        // 第五个职业
        else if (sum < Math.pow(590, 2) && sum > Math.pow(550, 2)) {
            startAngle51 = calcAngle();
            calcPaintCircleFlag(12)
        } else if (sum < Math.pow(630, 2) && sum > Math.pow(590, 2)) {
            startAngle52 = calcAngle();
            calcPaintCircleFlag(13)
        } else if (sum < Math.pow(670, 2) && sum > Math.pow(630, 2)) {
            startAngle53 = calcAngle();
            calcPaintCircleFlag(14)
        }
        // 第六个职业
        else if (sum < Math.pow(725, 2) && sum > Math.pow(685, 2)) {
            startAngle61 = calcAngle();
            calcPaintCircleFlag(15)
        } else if (sum < Math.pow(765, 2) && sum > Math.pow(725, 2)) {
            startAngle62 = calcAngle();
            calcPaintCircleFlag(16)
        } else if (sum < Math.pow(805, 2) && sum > Math.pow(765, 2)) {
            startAngle63 = calcAngle();
            calcPaintCircleFlag(17)
        }
    }

    /**
     * 只有起始点所在轨道可以绘制
     **/
    function calcPaintCircleFlag(index) {
        paintFlagList = [
            false, false, false,
            false, false, false,
            false, false, false,
            false, false, false,
            false, false, false,
            false, false, false]
        paintFlagList[index] = true
        console.log(paintFlagList)
    }

    /*计算终点*/
    function calcEndRadius() {
        let sum = Math.pow(moveMouse.x - CENTER_X, 2) + Math.pow(CENTER_Y - moveMouse.y, 2);
        let ret = calcAngle();
        // 第一个职业
        if (sum < Math.pow(50, 2) && sum > Math.pow(10, 2)) {
            if (paintFlagList[0]) {
                if (paintStateFlag) {
                    paint("#ffc300", 30, startAngle11, ret);
                } else {
                    paint("#000000", 30, startAngle11, ret);
                    paint("#000000", 70, startAngle11, ret);
                    paint("#000000", 110, startAngle11, ret);
                }
            }
        } else if (sum < Math.pow(90, 2) && sum > Math.pow(50, 2)) {
            if (paintFlagList[1]) {
                if (paintStateFlag) {
                    paint("#ffc300", 30, startAngle12, ret);
                    paint("#ffc300", 70, startAngle12, ret);
                } else {
                    paint("#000000", 70, startAngle12, ret);
                    paint("#000000", 110, startAngle12, ret);
                }
            }
        } else if (sum < Math.pow(130, 2) && sum > Math.pow(90, 2)) {
            if (paintFlagList[2]) {
                if (paintStateFlag) {
                    paint("#ffc300", 30, startAngle13, ret);
                    paint("#ffc300", 70, startAngle13, ret);
                    paint("#ffc300", 110, startAngle13, ret);
                } else {
                    paint("#000000", 110, startAngle13, ret);
                }
            }
        }
        // 第二个职业
        else if (sum < Math.pow(185, 2) && sum > Math.pow(145, 2)) {
            if (paintFlagList[3]) {
                if (paintStateFlag) {
                    paint("#f72585", 165, startAngle21, ret);
                } else {
                    paint("#000000", 165, startAngle21, ret);
                    paint("#000000", 205, startAngle21, ret);
                    paint("#000000", 245, startAngle21, ret);
                }
            }
        } else if (sum < Math.pow(225, 2) && sum > Math.pow(185, 2)) {
            if (paintFlagList[4]) {
                if (paintStateFlag) {
                    paint("#f72585", 165, startAngle22, ret);
                    paint("#f72585", 205, startAngle22, ret);
                } else {
                    paint("#000000", 205, startAngle22, ret);
                    paint("#000000", 245, startAngle22, ret);
                }
            }
        } else if (sum < Math.pow(265, 2) && sum > Math.pow(225, 2)) {
            if (paintFlagList[5]) {
                if (paintStateFlag) {
                    paint("#f72585", 165, startAngle23, ret);
                    paint("#f72585", 205, startAngle23, ret);
                    paint("#f72585", 245, startAngle23, ret);
                } else {
                    paint("#000000", 245, startAngle23, ret);
                }
            }
        }
        //第三个职业
        else if (sum < Math.pow(320, 2) && sum > Math.pow(280, 2)) {
            if (paintFlagList[6]) {
                if (paintStateFlag) {
                    paint("#4cc9f0", 300, startAngle31, ret);
                } else {
                    paint("#000000", 300, startAngle31, ret);
                    paint("#000000", 340, startAngle31, ret);
                    paint("#000000", 380, startAngle31, ret);
                }
            }
        } else if (sum < Math.pow(360, 2) && sum > Math.pow(320, 2)) {
            if (paintFlagList[7]) {
                if (paintStateFlag) {
                    paint("#4cc9f0", 300, startAngle31, ret);
                    paint("#4cc9f0", 340, startAngle31, ret);
                } else {
                    paint("#000000", 340, startAngle32, ret);
                    paint("#000000", 380, startAngle32, ret);
                }
            }
        } else if (sum < Math.pow(400, 2) && sum > Math.pow(360, 2)) {
            if (paintFlagList[8]) {
                if (paintStateFlag) {
                    paint("#4cc9f0", 300, startAngle33, ret);
                    paint("#4cc9f0", 340, startAngle33, ret);
                    paint("#4cc9f0", 380, startAngle33, ret);
                } else {
                    paint("#000000", 380, startAngle33, ret);
                }
            }
        }
        //第四个职业
        else if (sum < Math.pow(455, 2) && sum > Math.pow(415, 2)) {
            if (paintFlagList[9]) {
                if (paintStateFlag) {
                    paint("#a000ff", 435, startAngle41, ret);
                } else {
                    paint("#000000", 435, startAngle41, ret);
                    paint("#000000", 475, startAngle41, ret);
                    paint("#000000", 515, startAngle41, ret);
                }
            }
        } else if (sum < Math.pow(495, 2) && sum > Math.pow(455, 2)) {
            if (paintFlagList[10]) {
                if (paintStateFlag) {
                    paint("#a000ff", 435, startAngle42, ret);
                    paint("#a000ff", 475, startAngle42, ret);
                } else {
                    paint("#000000", 475, startAngle42, ret);
                    paint("#000000", 515, startAngle42, ret);
                }
            }
        } else if (sum < Math.pow(535, 2) && sum > Math.pow(495, 2)) {
            if (paintFlagList[11]) {
                if (paintStateFlag) {
                    paint("#a000ff", 435, startAngle43, ret);
                    paint("#a000ff", 475, startAngle43, ret);
                    paint("#a000ff", 515, startAngle43, ret);
                } else {
                    paint("#000000", 515, startAngle43, ret);
                }
            }
        }

        //第五个职业
        else if (sum < Math.pow(590, 2) && sum > Math.pow(550, 2)) {
            if (paintFlagList[12]) {
                if (paintStateFlag) {
                    paint("#ffc9f6", 570, startAngle51, ret);
                } else {
                    paint("#000000", 570, startAngle51, ret);
                    paint("#000000", 610, startAngle51, ret);
                    paint("#000000", 650, startAngle51, ret);
                }
            }
        } else if (sum < Math.pow(630, 2) && sum > Math.pow(590, 2)) {
            if (paintFlagList[13]) {
                if (paintStateFlag) {
                    paint("#ffc9f6", 570, startAngle52, ret);
                    paint("#ffc9f6", 610, startAngle52, ret);
                } else {
                    paint("#000000", 610, startAngle52, ret);
                    paint("#000000", 650, startAngle52, ret);
                }
            }
        } else if (sum < Math.pow(670, 2) && sum > Math.pow(630, 2)) {
            if (paintFlagList[14]) {
                if (paintStateFlag) {
                    paint("#ffc9f6", 570, startAngle53, ret);
                    paint("#ffc9f6", 610, startAngle53, ret);
                    paint("#ffc9f6", 650, startAngle53, ret);
                } else {
                    paint("#000000", 650, startAngle53, ret);
                }
            }
        }

        //第六个职业
        else if (sum < Math.pow(725, 2) && sum > Math.pow(685, 2)) {
            if (paintFlagList[15]) {
                if (paintStateFlag) {
                    paint("#9de617", 705, startAngle61, ret);
                } else {
                    paint("#000000", 705, startAngle61, ret);
                    paint("#000000", 745, startAngle61, ret);
                    paint("#000000", 785, startAngle61, ret);
                }
            }
        } else if (sum < Math.pow(765, 2) && sum > Math.pow(725, 2)) {
            if (paintFlagList[16]) {
                if (paintStateFlag) {
                    paint("#9de617", 705, startAngle62, ret);
                    paint("#9de617", 745, startAngle62, ret);
                } else {
                    paint("#000000", 745, startAngle62, ret);
                    paint("#000000", 785, startAngle62, ret);
                }
            }
        } else if (sum < Math.pow(805, 2) && sum > Math.pow(765, 2)) {
            if (paintFlagList[17]) {
                if (paintStateFlag) {
                    paint("#9de617", 705, startAngle63, ret);
                    paint("#9de617", 745, startAngle63, ret);
                    paint("#9de617", 785, startAngle63, ret);
                } else {
                    paint("#000000", 785, startAngle63, ret);
                }
            }
        }

    }

    /*计算角度0-180度*/
    function calcAngle() {
        let number = Math.atan2(Math.abs(CENTER_Y - startMouse.y), CENTER_X - startMouse.x);
        let ret = number * 180 / Math.PI; //弧度转角度，方便调试
        if (ret > 360) {
            ret -= 360;
        }
        if (ret < 0) {
            ret += 450;
        }
        let num = ret * Math.PI / 180 + Math.PI;
        console.log('角度：' + num);
        return num;
    }

    let can = "";
    let context = "";

    function init() {
        can = document.getElementById('can');
        context = can.getContext('2d');
    }

    function arc(num) {
        context.lineWidth = 1;
        context.strokeStyle = '#ffffff'
        context.beginPath();
        context.arc(CENTER_X, CENTER_Y, num, Math.PI, 2 * Math.PI, false);
        context.stroke();
    }


    function paint(color, radius, startAngle, endAngle) {
        // 结束角度不能小于起始角度
        if (endAngle <= startAngle) {
            // ElMessage.error("只能顺时针画")
            return;
        }
        context.lineWidth = 37;
        context.strokeStyle = color;
        context.beginPath();
        context.arc(CENTER_X, CENTER_Y, radius, startAngle, endAngle, false);
        context.stroke();
    }

    function changePaintState() {
        if (paintStateFlag) {
            paintStateFlag = false;
            paintStateFlagText.value = '橡皮擦'
        } else {
            paintStateFlag = true;
            paintStateFlagText.value = '画笔'
        }
    }

    function eraserState() {
        paintStateFlag = false;
    }

    function clear() {
        context.clearRect(0, 0, can.width, can.height);
        drawBackground();
    }

    function drawBackground() {
        let radius = 10;
        arc(radius);
        for (let i = 1; i < 24; i++) {
            radius = drawBackgroundOne(radius, i);
            arc(radius);
        }
    }

    function drawBackgroundOne(innerRadius, i) {
        if (i % 4 == 0) {
            return innerRadius + 15;
        } else {
            return innerRadius + 40;
        }
    }

    function save() {
        html2canvas(can).then(canvas => {
            const link = document.createElement('a');
            link.download = 'screenshot.png';
            link.href = canvas.toDataURL();
            link.click();
            document.body.removeChild(link); // 清理创建的链接
        });
        // capturePage()
    }

    const content = ref(null);
    const canvas = ref(null);

    function capturePage() {
        const ctx = canvas.value.getContext('2d');
        const contentElement = content.value;
        html2canvas(contentElement).then(canvas => {
            // 将生成的 canvas 转换为图片并下载
            const imgData = canvas.toDataURL('image/png');
            const link = document.createElement('a');
            link.download = 'page-screenshot.png';
            link.href = imgData;
            link.click();
        });
    }

    onMounted(() => {
        init();
        changes();
        console.log("mmmmm")
        drawBackground();
    });


</script>

<style scoped lang="scss">
    //body,html{
    //  overflow: hidden;
    //}
    p {
        margin: 0;
        padding: 0;
    }

    .development_stage {
        background: url('@/assets/images/login/login-home-background.png') no-repeat;
        background-size: 1920px 1080px;
        z-index: 10;
        width: 100%;
        height: 1080px;
    }
        .page-content {
            display:flex;
            justify-content: center;
            padding-top: 113px;
        }



    .bg-color-style1 {
        background: #FFFFFF;
    }
</style>