(10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版)

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
        less: {
            modifyVars: {
                hack: `true; @import (reference) "${path.resolve("src/base.less")}";`,
            },
            javascriptEnabled: true,
        },
    },
  },
})

section .card {
  position: relative;
  height: 480px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  background-image: radial-gradient(rgba(9, 89, 194, 0.3) 6%, transparent 0),
    radial-gradient(#faf9f8 6%, transparent 0);
  background-size: 10px 10px;
  background-position: 0 0, 2px 2px;
}

type IShapeTypes = 'rect' | 'circle' | 'line';
interface IShapeProps {
    id: string,
    type: IShapeTypes,
    style: {
        width: number,
        height: number,
        left: number,
        top: number,
        ...otherStyle
    },
    isEditable: boolean,
    ...otherSchema
}

// BaseBoard.tsx
<script setup lang="ts">
import { ref, onMounted, onUnmounted, toRefs } from "vue";
import { useMouse } from "../hooks/mouse";
import { getElPagePos } from "../utils/math";
const props = defineProps<{
  msg: string;
  onMouseChange: (x: number, y: number) => void;
}>();
const { onMouseChange } = toRefs(props);
const cardOffset = ref({ x: 0, y: 0 });
const boardDom = ref<any>(null);
const { x, y } = useMouse(window, (x, y) => {
  onMouseChange && onMouseChange.value(x - cardOffset.value.x, y - cardOffset.value.y);
});
onMounted(() => {
  const { x, y } = getElPagePos(boardDom.value);
  cardOffset.value.x = x;
  cardOffset.value.y = y;
});
onUnmounted(() => {});
defineExpose({ boardDom });
</script>
<template>
  <section>
    <h3>{{ msg }}</h3>
    <div class="card" ref="boardDom">
      <slot></slot>
      <div style="user-select: none">
        x: {{ x - cardOffset.x }} , y: {{ y - cardOffset.y }}
      </div>
    </div>
  </section>
</template>

const { x, y } = useMouse(window, (x, y) => { 
    onMouseChange && 
      onMouseChange.value(x - cardOffset.value.x, y - cardOffset.value.y); 
});

type shapeType = "rect" | "circle" | "line";
interface IBaseShapeProp {
  type: shapeType;
  key: string;
  style: any;
}
const canvasBox = ref<{ [key in shapeType]: IBaseShapeProp[] }>({
  rect: [],
  circle: [],
  line: [],
});

const handleMouseDown = () => {
  const { x, y } = mouseAbsPos.value;
  if (curShape.value) {
    templateDot = [x, y];
    templateDot[2] = Date.now() + "";
    canvasBox.value["rect"].push({
      type: "rect",
      key: templateDot[2],
      style: {},
    });
  }
};

const handleMouseChange = (x: number, y: number) => {
  mouseAbsPos.value = { x, y };
  // 1.如果有选中的元素, 则判断为移动当前选中元素
  if (curSelect.value && templateDot.length) {
    // something...
    return;
  }
  // 2.否则则生成元素
  const [a1, b1, key] = templateDot;
  if (curShape.value && templateDot.length) {
    let dx = x - a1;
    let dy = y - b1;
    let curIndex = canvasBox.value["rect"].findIndex((v) => v.key === key);
    if (curIndex > -1) {
      canvasBox.value["rect"][curIndex] = {
        ...canvasBox.value["rect"][curIndex],
        style: {
          left: (dx > 0 ? a1 : x) + "px",
          top: (dy > 0 ? b1 : y) + "px",
          width: Math.abs(dx) + "px",
          height: Math.abs(dy) + "px",
        },
      };
    }
  }
};

// 如果有选中的元素, 则判断为移动当前选中元素
  if (curSelect.value && templateDot.length) {
    const [x0, y0] = templateDot;
    canvasBox.value["rect"] = canvasBox.value["rect"].map((v) => {
      if (v.key === curSelect.value) {
        const { left, top } = v.style;
        templateDot = [x, y];
        return {
          ...v,
          style: {
            ...v.style,
            left: parseFloat(left) + (x - x0) + "px",
            top: parseFloat(top) + (y - y0) + "px",
          },
        };
      }
      return v;
    });
    return;
  }

const handleMouseUp = () => {
  const { x, y } = mouseAbsPos.value;
  if (curShape.value) {
    // 1. 如果开始点和结束点一样,则不创建
    if (templateDot[0] === x && templateDot[1] === y) {
      canvasBox.value["rect"] = canvasBox.value["rect"].filter(
        (v) => v.key !== templateDot[2]
      );
      templateDot = [];
      return;
    }
  }
  // 重置
  templateDot = [];
};

<div
  v-for="item in canvasBox.rect"
  :key="item.key"
  :class="['shape', 'rect', curSelect === item.key ? 'active' : '']"
  :style="{
    left: item.style.left,
    top: item.style.top,
    width: item.style.width,
    height: item.style.height,
  }"
  :data-key="item.key"
  @dblclick.stop="handleSelected(item.key)"
>
  <span v-if="curSelect === item.key" @click="handleDel(item.key)">x</span>
</div>

const handleDel = (key: string) => {
  canvasBox.value["rect"] = canvasBox.value["rect"].filter((v) => v.key !== key);
  curSelect.value = "";
  templateDot = [];
};