内侧图形学实战：从零开发几何画板(vue3 + vite版)

宽高装饰物等一般来说)1.度量图例象的schema内部结构

像任何建模低文档产品一样, 我们都能够一个统一且可扩展的元件schema内部结构, 目的是为了更高的识别元件和派发一般来说。画板应用于底下的图例象, 我们可以新设计如下 schhema 内部结构:

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

具体系统设计只要不具通用性, 我们就可以转化自己的业务范围来系统设计。

度量好了 schema, 我们只能够解决疑问完全一致的图例象才可, 这底下以三角形为例和大家分享一下解决疑问或许。

2. 根据打印机左下角的一段距离数值图例象始创的元反馈

我们都知道, 要就让通过打印机启动时来始创随意一个三角形, 我们能够知道几个条件:

打印机按下的初始点的经度打印机启动时操作过程中的的可视一段距离

这两个疑问或许都可以在全局解决疑问, 基于元件新设计的原次子化原则, 我们可以在画笔元件底下释放成来并数值成打印机的可视一段距离, 然后派发给其他元件购物, 这样我们也可以是解决疑问记录打印机旋转经度的文本提醒 这一机制了。

在上一篇撰文中的已经简述了如何用 vue3 的重新各种类型数组来解决疑问通用 hooks, 我们月底下要就让到的就是把 useMouse 赚取到的结果加工后让其他元件能使用, 这底下我用 vue3 的toRefs 来解决疑问。先以来看一下文档:

// BaseBoard.tsxscript 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(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 }); {{ msg }} x: {{ x - cardOffset.x }} , y: {{ y - cardOffset.y }}

BaseBoard 就是我们的画笔元件, 我们使用这个元件可以在主页上始创随意数量的画笔, 同时由于vue3 的重新组合数组赞同使用defineProps 来度量元件的props, 所以我们可以通过它度量元件的一般来说, 这底下对外暴露成了两个一般来说:

msg 用来在举例来说支配画笔的名称onMouseChange 用来将在表面上打印机通话的重大事件传遍举例来说, 让举例来说可以获得在表面上是重大事件直通时

我们使用 useMouse 的时候就可以可视获得打印机的x, y的理论上经度, 再减去画笔在主页的实际偏移cardOffset.x, cardOffset.y, 就可以得成打印机在画笔中的正确的经度:

image.png

这样我们就可以通过onMouseChange回调把打印机比较画笔的经度可视传给堂叔元件了:

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

同时我们在文档中的注意到了 defineExpose, 这个 api 作用就是把能够暴露成的图表假设，供堂叔元件使用，大约次子传堂叔, 我们可以在堂叔元件底下获得暴露成的取值, 在这底下我们把画笔的 dom 暴露成成来, 让堂叔元件可以获得次子元件的dom。

有了以上的也就是说, 我们就可以来始创三角形成份了, 为了更高的行政画笔中的的成份, 我们度量一个成份论域canvasBox:

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

当Gmail并不需要一个图例象, 在画笔中的按下打印机的那一刻, 我们始创一个大体的系统设计文件:

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: {}, }); }};

由上面的文档应为, 我们可能会始创一个三角形的系统设计文件, 都有了三角形的:

成份种类三角形的唯一key(有效率紧接著较慢查找该图例象)三角形的初始化装饰物

同时我们在 templateDot codice_中的线程了打印机的初始一段距离, 有效率紧接著转化三角形完整的系统设计文件。

2022-10-15 11.33.07.gif

我们在图例中的可以显现成当启动时打印机时三角形是可视曾随打印机始创的, 要就让解决疑问这个真实感, 我们能够对打印机的mousemove 展开通话, 并一个系统更换三角形的系统设计文件, 如下:

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", }, }; } }};

由文档应为我是通过可视扭曲三角形成份的 left 和 top 来解决疑问三角形曾随打印机可视更换的, 我们使用 transform 也可以解决疑问同样的真实感, 有用的朋友可以尝试一下。

这底下顺便扩展一下, 我们平时看到的在在框架, 对元件展开多选加载时也用了同样的方式也, 通过打印机在在滑动来产生多选区域:

2022-10-15 20.20.10.gif

有用的朋友可以把这个建议展开扩展, 解决疑问更值得一提的应用于过场。

3. 旋转, 撰稿人几何学图例象

有了上面始创成份的基础性, 我们继续来解决疑问旋转和撰稿人成份的机制。

3.1 旋转成份

首先以我们能够看到理论上要旋转的成份, 然后一个系统扭曲它的一段距离, 因为每个成份我都设唯一的key, 所以当成份被看中的的时候我们就可以根据key看到此成份, 并只对该成份展开加载:

// 如果有看中的的成份, 则推论为旋转理论上看中的成份 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; }

以上文档中的主要是通过数值打印机旋转的一段距离差(通过线程打印机上一步的经度)来扭曲成份的 left 和top 取值, 在 mouseup 时重设线程codice_才可完成一次旋转操作过程。

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 = [];};

这底下有一个或许能够注意, 就是如果在打印机按下后来没有启动时(也就是好点击画笔的加载), 或许能够把mousedown始创的成份清空删掉, 所以才有了上述文档的第一步推论。

3.2 撰稿人成份

撰稿人成份或许和旋转成份的模式差不多, 扭曲的是成份的线性一般来说, 比如我们可以撰稿人成份的背景颜色, 边框装饰物等, 这底下我以删掉成份为例给大家简述一下解决疑问操作过程。

2022-10-15 20.46.21.gif

首先以我们展示一下成份的 dom 内部结构: