VUE使用canvas绘制管线管廊实现思路

<template>
    <div class="canvas-container">
        <div class="canvas-icon-content">左侧选项列表</div>
        <div class="canvas-content">
            <div class="canvas" id="canvas">
                <canvas id="myCanvas" ref="myCanvas"></canvas>
            </div>
            <div class="canvas-options">下方操作按钮</div>
        </div>
    </div>
</template>
<script>
import canvas from '../utils/canvas'
let myCanvas = {}
export default {
    name: 'index',
    data() {
        return {}
    },
    mounted() {
        myCanvas = canvas.init('myCanvas')
    },
}
</script>

const canvasDraw = {
    init(element) {
        canvas = document.getElementById(element)
        ctx = canvas.getContext('2d')
        const w = 1200, h = 800;
        canvas.width = w * devicePixelRatio;
        canvas.height = h * devicePixelRatio;
        canvas.style.width = w + 'px';
        canvas.style.height = h + 'px';
        return canvas
    },
    // 回传鼠标抬起事件
    canvasMouseUp: (e) => {},
    // 绘制类型切换
    drawTypeChange: (ele) => {},
    // 修改管线类型（冷热水）
    changePipelineType: (type) => {},
    // 设备参数修改
    canvasModifyInfo: (info) => {},
    // 显示设备可拖动的区域范围
    showEquipmentIconArea: ()  => {},
    commit: () => {
        // todo
        // 提交事件
    },
    // 清除整个画布
   clearAll: (info) => {},
    // 数据回显
    echoData: (data) => {}
}
export default canvasDraw

class ElementFactory {
    constructor(startX, startY, endX, endY) {
        this.startX = startX;  // 鼠标 按下 X点
        this.startY = startY;  // 鼠标 按下 Y点
        this.endX = endX;      // 鼠标 抬起 X点
        this.endY = endY;      // 鼠标 抬起 Y点
        this.type = 0;       // 绘制类型：图形、文字、图片
        this.pipelineInfo = {};  // 图形（管线）私有信息
        this.equipmentInfo = {};  // 图片（设备）私有信息
        this.textInfo = {};      // 文字（文字）私有信息
    }
    get minX() {
        return Math.min(this.startX, this.endX);
    }
    get maxX() {
        return Math.max(this.startX, this.endX);
    }
    get minY() {
        return Math.min(this.startY, this.endY);
    }
    get maxY() {
        return Math.max(this.startY, this.endY);
    }
    get middleX() {
        return this.endX - (this.endX - this.startX) / 2
    }
    get middleY() {
        return this.endY - (this.endY - this.startY) / 2
    }
    // 判断点击的是否存在元素绘制的范围之内
    isInside(x, y) {
        return x >= this.minX && x <= this.maxX && y >= this.minY && y <= this.maxY
    }
    // 绘制管线
    drawPipeline() {}
    // 绘制设备
    drawEquipment() {}
    // 绘制设备上方文字
    drawEquipmentText() {}
    // 绘制纯文本
    drawText() {}
    // 根据条件来调用不同的绘制方法
    drawAllElement() {
        parseInt(this.type) === 0 ? this.drawPipeline() : (parseInt(this.type) === 1 ? this.drawEquipment() : this.drawText())
    }
}

const canvasMousedown = (e) => {
    const rect = canvas.getBoundinGClientRect();
    const clickX = e.clientX - rect.left;
    const clickY = e.clientY - rect.top;
    // 查询所点击元素是否存在
    const shape = getElement(clickX, clickY);
    if (shape) {
        moveAllElement(e, clickX, clickY, rect, shape);
        canvas.style.cursor= "move";
    } else {
        if (e.buttons === 1) {
            draw_element_type === 0 ? drawRealTimePipeline(e, clickX, clickY, rect) : (draw_element_type === 1 ? drawRealTimeEquipment(e, clickX, clickY, rect) : drawRealTimeText(e, clickX, clickY, rect))
        }
    }
};

// 鼠标点击canvas查看是否点击到了已经绘制的路线，若是，则返回相关线的对象，若否，返回null
const getElement = (x, y) => {
    for (let i = allElementCollection.length - 1; i >= 0; i--) {
        if (element.isInside(x, y)) return element;
    }
    return null
};