经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
来源：cnblogs　　作者：WindrunnerMax　　时间：2024/8/7 10:20:51　　对本文有异议

Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)

在前边我们聊了数据结构的设计和剪贴板的数据操作，那么这些操作都还是比较倾向于数据相关的操作，那么我们现在就来聊聊基本的图形绘制以及图形状态管理。

关于Canvas简历编辑器项目的相关文章:

图形绘制

我们做项目还是需要从需求出发，首先我们需要明确我们要做的是简历编辑器，那么简历编辑器要求的图形类型并不需要很多，只需要 矩形、图片、富文本 图形即可，那么我们就可以简单将其抽象一下，我们只需要认为任何元素都是矩形就可以完成这件事了。

因为绘制矩阵是比较简单的，我们可以直接从数据结构来抽象这部分图形，图形元素基类的x, y, width, height属性是确定的，再加上还有层级结构，那么就再加一个z，此外由于需要标识图形，所以还需要给其设置一个id。

  1. class Delta {
  2.   public readonly id: string;
  3.   protected x: number;
  4.   protected y: number;
  5.   protected z: number;
  6.   protected width: number;
  7.   protected height: number;
  8. }

那么我们的图形肯定是有很多属性的，例如矩形是会存在背景、边框的大小和颜色，富文本也需要属性来绘制具体的内容，所以我们还需要一个对象来存储内容，而且我们是插件化的实现，具体的图形绘制应该是由插件本身来实现的，这部分内容需要子类来具体实现。

  1. abstract class Delta {
  2.   // ...
  3.   public attrs: DeltaAttributes;
  4.   public abstract drawing: (ctx: CanvasRenderingContext2D) => void;
  5. }

那么绘制的时候，我们考虑分为两层绘制的方式，内层的Canvas是用来绘制具体图形的，这里预计需要实现增量更新，而外层的Canvas是用来绘制中间状态的，例如选中图形、多选、调整图形位置/大小等，在这里是会全量刷新的，并且后边可能会在这里绘制标尺。

image.png

在这里要注意一个很重要的问题，因为我们的Canvas并不是再是矢量图形，如果我们是在1080P的显示器上直接将编辑器的width x height设置到元素上，那是不会出什么问题的，但是如果此时是2K或者是4K的显示器的话，就会出现模糊的问题，所以我们需要取得devicePixelRatio即物理像素/设备独立像素，所以我们可以通过在window上取得这个值来控制Canvas元素的size属性。

  1. this.canvas.width = width * ratio;
  2. this.canvas.height = height * ratio;
  3. this.canvas.style.width = width + "px";
  4. this.canvas.style.height = height + "px";

此时我们还需要处理resize的问题，我们可以使用resize-observer-polyfill来实现这部分功能，但是需要注意的是我们的width和height必须要是整数，否则会导致编辑器的图形模糊。

  1. private onResizeBasic = (entries: ResizeObserverEntry[]) => {
  2.   // COMPAT: `onResize`会触发首次`render`
  3.   const [entry] = entries;
  4.   if (!entry) return void 0;
  5.   // 置宏任务队列
  6.   setTimeout(() => {
  7.     const { width, height } = entry.contentRect;
  8.     this.width = width;
  9.     this.height = height;
  10.     this.reset();
  11.     this.editor.event.trigger(EDITOR_EVENT.RESIZE, { width, height });
  12.   }, 0);
  13. };

实际上我们在实现完整的图形编辑器的时候，可能并不是完整的矩形节点，例如绘制云形状的不规则图形，我们需要将相关节点坐标放置于attrs中，并且在实际绘制的过程中完成Bezier曲线的计算即可。但是实际上我们还需要注意到一个问题，当我们点击的时候如何判断这个点是在图形内还是图形外，如果是图形内则点击时需要选中节点，如果在图形外不会选中节点，那么因为我们是闭合图形，所以我们可以用射线法实现这个能力，我们将点向一个方向做射线，如果穿越的节点数量是奇数，说明点在内部图形，如果穿越的节点数量是偶数，则说明点在图形外部。

image.png

我们仅仅实现图形的绘制肯定是不行的，我们还需要实现图形的相关交互能力。在实现交互的过程中我遇到了一个比较棘手的问题，因为不存在DOM，所有的操作都是需要根据位置信息来计算的，比如选中图形后调整大小的点就需要在选中状态下并且点击的位置恰好是那几个点外加一定的偏移量，然后再根据MouseMove事件来调整图形大小，而实际上在这里的交互会非常多，包括多选、拖拽框选、Hover效果，都是根据MouseDown、MouseMove、MouseUp三个事件完成的，所以如何管理状态以及绘制UI交互就是个比较麻烦的问题，在这里我只能想到根据不同的状态来携带不同的Payload，进而绘制交互。

  1. export enum CANVAS_OP {
  2.   HOVER,
  3.   RESIZE,
  4.   TRANSLATE,
  5.   FRAME_SELECT,
  6. }
  7. export enum CANVAS_STATE {
  8.   OP = 10,
  9.   HOVER = 11,
  10.   RESIZE = 12,
  11.   LANDING_POINT = 13,
  12.   OP_RECT = 14,
  13. }
  14. export type SelectionState = {
  15.   [CANVAS_STATE.OP]?:
  16.     | CANVAS_OP.HOVER
  17.     | CANVAS_OP.RESIZE
  18.     | CANVAS_OP.TRANSLATE
  19.     | CANVAS_OP.FRAME_SELECT
  20.     | null;
  21.   [CANVAS_STATE.HOVER]?: string | null;
  22.   [CANVAS_STATE.RESIZE]?: RESIZE_TYPE | null;
  23.   [CANVAS_STATE.LANDING_POINT]?: Point | null;
  24.   [CANVAS_STATE.OP_RECT]?: Range | null;
  25. };

状态管理

在实现交互的时候，我思考了很久应该如何比较好的实现这个能力，因为上边也说了这里是没有DOM的，所以最开始的时候我通过MouseDown、MouseMove、MouseUp实现了一个非常混乱的状态管理，完全是基于事件的触发然后执行相关副作用从而调用Mask Canvas图层的方法进行重新绘制。

  1. const point = this.editor.canvas.getState(CANVAS_STATE.LANDING_POINT);
  2. const opType = this.editor.canvas.getState(CANVAS_STATE.OP);
  3. // ...
  4. this.editor.canvas.setState(CANVAS_STATE.HOVER, delta.id);
  5. this.editor.canvas.setState(CANVAS_STATE.RESIZE, state);
  6. this.editor.canvas.setState(CANVAS_STATE.OP, CANVAS_OP.RESIZE);
  7. this.editor.canvas.setState(CANVAS_STATE.OP, CANVAS_OP.TRANSLATE);
  8. this.editor.canvas.setState(CANVAS_STATE.OP, CANVAS_OP.FRAME_SELECT);
  9. // ...
  10. this.editor.canvas.setState(CANVAS_STATE.LANDING_POINT, new Point(e.offsetX, e.offsetY));
  11. this.editor.canvas.setState(CANVAS_STATE.LANDING_POINT, null);
  12. this.editor.canvas.setState(CANVAS_STATE.OP_RECT, null);
  13. this.editor.canvas.setState(CANVAS_STATE.OP, null);
  14. // ...

再后来我觉得这样的代码根本没有办法维护，所以改动了一下，将我所需要的状态全部都存储到一个Store中，通过我自定义的事件管理来通知状态的改变，最终通过状态改变的类型来严格控制将要绘制的内容，也算是将相关的逻辑抽象了一层，只不过在这里相当于是我维护了大量的状态，而且这些状态是相互关联的，所以会有很多的if/else去处理不同类型的状态改变，而且因为很多方法会比较复杂，传递了多层，导致状态管理虽然比之前好了一些可以明确知道状态是因为哪里导致变化的，但是实际上依旧不容易维护。

  1. export const CANVAS_STATE = {
  2.   OP: "OP",
  3.   RECT: "RECT",
  4.   HOVER: "HOVER",
  5.   RESIZE: "RESIZE",
  6.   LANDING: "LANDING",
  7. } as const;
  9. export type CanvasOp = keyof typeof CANVAS_OP;
  10. export type ResizeType = keyof typeof RESIZE_TYPE;
  11. export type CanvasStore = {
  12.   [RESIZE_TYPE.L]?: Range | null;
  13.   [RESIZE_TYPE.R]?: Range | null;
  14.   [RESIZE_TYPE.T]?: Range | null;
  15.   [RESIZE_TYPE.B]?: Range | null;
  16.   [RESIZE_TYPE.LT]?: Range | null;
  17.   [RESIZE_TYPE.RT]?: Range | null;
  18.   [RESIZE_TYPE.LB]?: Range | null;
  19.   [RESIZE_TYPE.RB]?: Range | null;
  20.   [CANVAS_STATE.RECT]?: Range | null;
  21.   [CANVAS_STATE.OP]?: CanvasOp | null;
  22.   [CANVAS_STATE.HOVER]?: string | null;
  23.   [CANVAS_STATE.LANDING]?: Point | null;
  24.   [CANVAS_STATE.RESIZE]?: ResizeType | null;
  25. };

最终我又思考了一下，我们在浏览器中进行DOM操作的时候，这个DOM是真正存在的吗，或者说我们在PC上实现窗口管理的时候，这个窗口是真的存在的吗，答案肯定是否定的，虽然我们可以通过系统或者浏览器提供的API来非常简单地实现各种操作，但是实际上些内容是系统帮我们绘制出来的，本质上还是图形，事件、状态、碰撞检测等等都是系统模拟出来的，而我们的Canvas也拥有类似的图形编程能力。

那么我们当然可以在这里实现类似于DOM的能力，因为我想实现的能力似乎本质上就是DOM与事件的关联，而DOM结构是一种非常成熟的设计了，这其中有一些很棒的能力设计，例如DOM的事件流，我们就不需要扁平化地调整每个Node的事件，而是只需要保证事件是从ROOT节点起始，最终又在ROOT上结束即可。并且整个树形结构以及状态是靠用户利用DOM的API来实现的，我们管理只需要处理ROOT就好了，这样就会很方便，下个阶段的状态管理是准备用这种方式来实现的，那么我们就先实现Node基类。

  1. class Node {
  2.   private _range: Range;
  3.   private _parent: Node | null;
  4.   public readonly children: Node[];
  6.   // 尽可能简单地实现事件流
  7.   // 直接通过`bubble`来决定捕获/冒泡
  8.   protected onMouseDown?: (event: MouseEvent) => void;
  9.   protected onMouseUp?: (event: MouseEvent) => void;
  10.   protected onMouseEnter?: (event: MouseEvent) => void;
  11.   protected onMouseLeave?: (event: MouseEvent) => void;
  13.   // `Canvas`绘制节点
  14.   public drawingMask?: (ctx: CanvasRenderingContext2D) => void;
  16.   constructor(range: Range) {
  17.     this.children = [];
  18.     this._range = range;
  19.     this._parent = null;
  20.   }
  22.   // ====== Parent ======
  23.   public get parent() {
  24.     return this._parent;
  25.   }
  26.   public setParent(parent: Node | null) {
  27.     this._parent = parent;
  28.   }
  30.   // ====== Range ======
  31.   public get range() {
  32.     return this._range;
  33.   }
  34.   public setRange(range: Range) {
  35.     this._range = range;
  36.   }
  38.   // ====== DOM OP ======
  39.   public append<T extends Node>(node: T | Empty) {
  40.     // ...
  41.   }
  42.   public removeChild<T extends Node>(node: T | Empty) {
  43.     // ...
  44.   }
  45.   public remove() {
  46.     // ...
  47.   }
  48.   public clearNodes() {
  49.     // ...
  50.   }
  51. }

那么接下来我们只需要定义好类似于HTML的Body元素，在这里我们将其设置为Root节点，该元素继承了Node节点。在这里我们接管了整个编辑器的事件分发，继承于此的事件都可以分发到子节点，例如我们的点选事件，就可以在子节点上设置MouseDown事件处理即可。并且在这里我们还需要设计事件分发的能力，我们同样可以实现事件的捕获和冒泡机制，通过栈可以很方便的将事件的触发处理出来。

  1. export class Root extends Node {
  2.   constructor(private editor: Editor, private engine: Canvas) {
  3.     super(Range.from(0, 0));
  4.   }
  6.   public getFlatNode(isEventCall = true): Node[] {
  7.     // 非默认状态下不需要匹配
  8.     if (!this.engine.isDefaultMode()) return [];
  9.     // 事件调用实际顺序 // 渲染顺序则相反
  10.     const flatNodes: Node[] = [...super.getFlatNode(), this];
  11.     return isEventCall ? flatNodes.filter(node => !node.ignoreEvent) : flatNodes;
  12.   }
  14.   public onMouseDown = (e: MouseEvent) => {
  15.     this.editor.canvas.mask.setCursorState(null);
  16.     !e.shiftKey && this.editor.selection.clearActiveDeltas();
  17.   };
  19.   private emit<T extends keyof NodeEvent>(target: Node, type: T, event: NodeEvent[T]) {
  20.     const stack: Node[] = [];
  21.     let node: Node | null = target.parent;
  22.     while (node) {
  23.       stack.push(node);
  24.       node = node.parent;
  25.     }
  26.     // 捕获阶段执行的事件
  27.     for (const node of stack.reverse()) {
  28.       if (!event.capture) break;
  29.       const eventFn = node[type as keyof NodeEvent];
  30.       eventFn && eventFn(event);
  31.     }
  32.     // 节点本身 执行即可
  33.     const eventFn = target[type as keyof NodeEvent];
  34.     eventFn && eventFn(event);
  35.     // 冒泡阶段执行的事件
  36.     for (const node of stack) {
  37.       if (!event.bubble) break;
  38.       const eventFn = node[type as keyof NodeEvent];
  39.       eventFn && eventFn(event);
  40.     }
  41.   }
  43.   private onMouseDownController = (e: globalThis.MouseEvent) => {
  44.     this.cursor = Point.from(e, this.editor);
  45.     // 非默认状态下不执行事件
  46.     if (!this.engine.isDefaultMode()) return void 0;
  47.     // 按事件顺序获取节点
  48.     const flatNode = this.getFlatNode();
  49.     let hit: Node | null = null;
  50.     const point = Point.from(e, this.editor);
  51.     for (const node of flatNode) {
  52.       if (node.range.include(point)) {
  53.         hit = node;
  54.         break;
  55.       }
  56.     }
  57.     hit && this.emit(hit, NODE_EVENT.MOUSE_DOWN, MouseEvent.from(e, this.editor));
  58.   };
  60.   private onMouseMoveBasic = (e: globalThis.MouseEvent) => {
  61.     this.cursor = Point.from(e, this.editor);
  62.     // 非默认状态下不执行事件
  63.     if (!this.engine.isDefaultMode()) return void 0;
  64.     // 按事件顺序获取节点
  65.     const flatNode = this.getFlatNode();
  66.     let next: ElementNode | ResizeNode | null = null;
  67.     const point = Point.from(e, this.editor);
  68.     for (const node of flatNode) {
  69.       // 当前只有`ElementNode`和`ResizeNode`需要触发`Mouse Enter/Leave`事件
  70.       const authorize = node instanceof ElementNode || node instanceof ResizeNode;
  71.       if (authorize && node.range.include(point)) {
  72.         next = node;
  73.         break;
  74.       }
  75.     }
  76.   };
  77.   private onMouseMoveController = throttle(this.onMouseMoveBasic, ...THE_CONFIG);
  79.   private onMouseUpController = (e: globalThis.MouseEvent) => {
  80.     // 非默认状态下不执行事件
  81.     if (!this.engine.isDefaultMode()) return void 0;
  82.     // 按事件顺序获取节点
  83.     const flatNode = this.getFlatNode();
  84.     let hit: Node | null = null;
  85.     const point = Point.from(e, this.editor);
  86.     for (const node of flatNode) {
  87.       if (node.range.include(point)) {
  88.         hit = node;
  89.         break;
  90.       }
  91.     }
  92.     hit && this.emit(hit, NODE_EVENT.MOUSE_UP, MouseEvent.from(e, this.editor));
  93.   };
  94. }

那么接下来，我们只需要定义相关节点类型就可以了，并且通过区分不同类型就可以来实现不同的功能，例如图形绘制使用ElementNode节点，调整节点大小使用ResizeNode节点，框选内容使用FrameNode节点即可，那么在这里我们就先看一下ElementNode节点，用来表示实际节点。

  1. class ElementNode extends Node {
  2.   private readonly id: string;
  3.   private isHovering: boolean;
  5.   constructor(private editor: Editor, state: DeltaState) {
  6.     const range = state.toRange();
  7.     super(range);
  8.     this.id = state.id;
  9.     const delta = state.toDelta();
  10.     const rect = delta.getRect();
  11.     this.setZ(rect.z);
  12.     this.isHovering = false;
  13.   }
  15.   protected onMouseDown = (e: MouseEvent) => {
  16.     if (e.shiftKey) {
  17.       this.editor.selection.addActiveDelta(this.id);
  18.     } else {
  19.       this.editor.selection.setActiveDelta(this.id);
  20.     }
  21.   };
  23.   protected onMouseEnter = () => {
  24.     this.isHovering = true;
  25.     if (this.editor.selection.has(this.id)) {
  26.       return void 0;
  27.     }
  28.     this.editor.canvas.mask.drawingEffect(this.range);
  29.   };
  31.   protected onMouseLeave = () => {
  32.     this.isHovering = false;
  33.     if (!this.editor.selection.has(this.id)) {
  34.       this.editor.canvas.mask.drawingEffect(this.range);
  35.     }
  36.   };
  38.   public drawingMask = (ctx: CanvasRenderingContext2D) => {
  39.     if (
  40.       this.isHovering &&
  41.       !this.editor.selection.has(this.id) &&
  42.       !this.editor.state.get(EDITOR_STATE.MOUSE_DOWN)
  43.     ) {
  44.       const { x, y, width, height } = this.range.rect();
  45.       Shape.rect(ctx, {
  46.         x: x,
  47.         y: y,
  48.         width: width,
  49.         height: height,
  50.         borderColor: BLUE_3,
  51.         borderWidth: 1,
  52.       });
  53.     }
  54.   };
  55. }

最后

在这里我们聊了聊如何抽象基本的图形绘制以及状态的管理，因为我们的需求在这里所以我们的图形绘制能力会设计的比较简单，而状态管理则是迭代了三个方案才确定通过轻量DOM的方式来实现，那么再往后，我们就需要聊一聊如何实现 层级渲染与事件管理 的能力设计。

原文链接：https://www.cnblogs.com/WindrunnerMax/p/18346501

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号