首页 > 其他分享 >Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)

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

时间：2024-08-07 10:32:35浏览次数：17  
标签：Canvas const DOM CANVAS STATE editor 图形 null 轻量级

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

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

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

图形绘制

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

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

class Delta {
  public readonly id: string;
  protected x: number;
  protected y: number;
  protected z: number;
  protected width: number;
  protected height: number;
}

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

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

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

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

this.canvas.width = width * ratio;
this.canvas.height = height * ratio;
this.canvas.style.width = width + "px";
this.canvas.style.height = height + "px";

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

private onResizeBasic = (entries: ResizeObserverEntry[]) => {
  // COMPAT: `onResize`会触发首次`render`
  const [entry] = entries;
  if (!entry) return void 0;
  // 置宏任务队列
  setTimeout(() => {
    const { width, height } = entry.contentRect;
    this.width = width;
    this.height = height;
    this.reset();
    this.editor.event.trigger(EDITOR_EVENT.RESIZE, { width, height });
  }, 0);
};

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

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

export enum CANVAS_OP {
  HOVER,
  RESIZE,
  TRANSLATE,
  FRAME_SELECT,
}
export enum CANVAS_STATE {
  OP = 10,
  HOVER = 11,
  RESIZE = 12,
  LANDING_POINT = 13,
  OP_RECT = 14,
}
export type SelectionState = {
  [CANVAS_STATE.OP]?:
    | CANVAS_OP.HOVER
    | CANVAS_OP.RESIZE
    | CANVAS_OP.TRANSLATE
    | CANVAS_OP.FRAME_SELECT
    | null;
  [CANVAS_STATE.HOVER]?: string | null;
  [CANVAS_STATE.RESIZE]?: RESIZE_TYPE | null;
  [CANVAS_STATE.LANDING_POINT]?: Point | null;
  [CANVAS_STATE.OP_RECT]?: Range | null;
};

状态管理

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

const point = this.editor.canvas.getState(CANVAS_STATE.LANDING_POINT);
const opType = this.editor.canvas.getState(CANVAS_STATE.OP);
// ...
this.editor.canvas.setState(CANVAS_STATE.HOVER, delta.id);
this.editor.canvas.setState(CANVAS_STATE.RESIZE, state);
this.editor.canvas.setState(CANVAS_STATE.OP, CANVAS_OP.RESIZE);
this.editor.canvas.setState(CANVAS_STATE.OP, CANVAS_OP.TRANSLATE);
this.editor.canvas.setState(CANVAS_STATE.OP, CANVAS_OP.FRAME_SELECT);
// ...
this.editor.canvas.setState(CANVAS_STATE.LANDING_POINT, new Point(e.offsetX, e.offsetY));
this.editor.canvas.setState(CANVAS_STATE.LANDING_POINT, null);
this.editor.canvas.setState(CANVAS_STATE.OP_RECT, null);
this.editor.canvas.setState(CANVAS_STATE.OP, null);
// ...

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

export const CANVAS_STATE = {
  OP: "OP",
  RECT: "RECT",
  HOVER: "HOVER",
  RESIZE: "RESIZE",
  LANDING: "LANDING",
} as const;

export type CanvasOp = keyof typeof CANVAS_OP;
export type ResizeType = keyof typeof RESIZE_TYPE;
export type CanvasStore = {
  [RESIZE_TYPE.L]?: Range | null;
  [RESIZE_TYPE.R]?: Range | null;
  [RESIZE_TYPE.T]?: Range | null;
  [RESIZE_TYPE.B]?: Range | null;
  [RESIZE_TYPE.LT]?: Range | null;
  [RESIZE_TYPE.RT]?: Range | null;
  [RESIZE_TYPE.LB]?: Range | null;
  [RESIZE_TYPE.RB]?: Range | null;
  [CANVAS_STATE.RECT]?: Range | null;
  [CANVAS_STATE.OP]?: CanvasOp | null;
  [CANVAS_STATE.HOVER]?: string | null;
  [CANVAS_STATE.LANDING]?: Point | null;
  [CANVAS_STATE.RESIZE]?: ResizeType | null;
};

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

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

class Node {
  private _range: Range;
  private _parent: Node | null;
  public readonly children: Node[];

  // 尽可能简单地实现事件流
  // 直接通过`bubble`来决定捕获/冒泡
  protected onm ouseDown?: (event: MouseEvent) => void;
  protected onm ouseUp?: (event: MouseEvent) => void;
  protected onm ouseEnter?: (event: MouseEvent) => void;
  protected onm ouseLeave?: (event: MouseEvent) => void;

  // `Canvas`绘制节点
  public drawingMask?: (ctx: CanvasRenderingContext2D) => void;

  constructor(range: Range) {
    this.children = [];
    this._range = range;
    this._parent = null;
  }

  // ====== Parent ======
  public get parent() {
    return this._parent;
  }
  public setParent(parent: Node | null) {
    this._parent = parent;
  }

  // ====== Range ======
  public get range() {
    return this._range;
  }
  public setRange(range: Range) {
    this._range = range;
  }

  // ====== DOM OP ======
  public append<T extends Node>(node: T | Empty) {
    // ...
  }
  public removeChild<T extends Node>(node: T | Empty) {
    // ...
  }
  public remove() {
    // ...
  }
  public clearNodes() {
    // ...
  }
}

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

export class Root extends Node {
  constructor(private editor: Editor, private engine: Canvas) {
    super(Range.from(0, 0));
  }

  public getFlatNode(isEventCall = true): Node[] {
    // 非默认状态下不需要匹配
    if (!this.engine.isDefaultMode()) return [];
    // 事件调用实际顺序 // 渲染顺序则相反
    const flatNodes: Node[] = [...super.getFlatNode(), this];
    return isEventCall ? flatNodes.filter(node => !node.ignoreEvent) : flatNodes;
  }

  public onm ouseDown = (e: MouseEvent) => {
    this.editor.canvas.mask.setCursorState(null);
    !e.shiftKey && this.editor.selection.clearActiveDeltas();
  };

  private emit<T extends keyof NodeEvent>(target: Node, type: T, event: NodeEvent[T]) {
    const stack: Node[] = [];
    let node: Node | null = target.parent;
    while (node) {
      stack.push(node);
      node = node.parent;
    }
    // 捕获阶段执行的事件
    for (const node of stack.reverse()) {
      if (!event.capture) break;
      const eventFn = node[type as keyof NodeEvent];
      eventFn && eventFn(event);
    }
    // 节点本身 执行即可
    const eventFn = target[type as keyof NodeEvent];
    eventFn && eventFn(event);
    // 冒泡阶段执行的事件
    for (const node of stack) {
      if (!event.bubble) break;
      const eventFn = node[type as keyof NodeEvent];
      eventFn && eventFn(event);
    }
  }

  private onm ouseDownController = (e: globalThis.MouseEvent) => {
    this.cursor = Point.from(e, this.editor);
    // 非默认状态下不执行事件
    if (!this.engine.isDefaultMode()) return void 0;
    // 按事件顺序获取节点
    const flatNode = this.getFlatNode();
    let hit: Node | null = null;
    const point = Point.from(e, this.editor);
    for (const node of flatNode) {
      if (node.range.include(point)) {
        hit = node;
        break;
      }
    }
    hit && this.emit(hit, NODE_EVENT.MOUSE_DOWN, MouseEvent.from(e, this.editor));
  };

  private onm ouseMoveBasic = (e: globalThis.MouseEvent) => {
    this.cursor = Point.from(e, this.editor);
    // 非默认状态下不执行事件
    if (!this.engine.isDefaultMode()) return void 0;
    // 按事件顺序获取节点
    const flatNode = this.getFlatNode();
    let next: ElementNode | ResizeNode | null = null;
    const point = Point.from(e, this.editor);
    for (const node of flatNode) {
      // 当前只有`ElementNode`和`ResizeNode`需要触发`Mouse Enter/Leave`事件
      const authorize = node instanceof ElementNode || node instanceof ResizeNode;
      if (authorize && node.range.include(point)) {
        next = node;
        break;
      }
    }
  };
  private onm ouseMoveController = throttle(this.onMouseMoveBasic, ...THE_CONFIG);

  private onm ouseUpController = (e: globalThis.MouseEvent) => {
    // 非默认状态下不执行事件
    if (!this.engine.isDefaultMode()) return void 0;
    // 按事件顺序获取节点
    const flatNode = this.getFlatNode();
    let hit: Node | null = null;
    const point = Point.from(e, this.editor);
    for (const node of flatNode) {
      if (node.range.include(point)) {
        hit = node;
        break;
      }
    }
    hit && this.emit(hit, NODE_EVENT.MOUSE_UP, MouseEvent.from(e, this.editor));
  };
}

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

class ElementNode extends Node {
  private readonly id: string;
  private isHovering: boolean;

  constructor(private editor: Editor, state: DeltaState) {
    const range = state.toRange();
    super(range);
    this.id = state.id;
    const delta = state.toDelta();
    const rect = delta.getRect();
    this.setZ(rect.z);
    this.isHovering = false;
  }

  protected onm ouseDown = (e: MouseEvent) => {
    if (e.shiftKey) {
      this.editor.selection.addActiveDelta(this.id);
    } else {
      this.editor.selection.setActiveDelta(this.id);
    }
  };

  protected onm ouseEnter = () => {
    this.isHovering = true;
    if (this.editor.selection.has(this.id)) {
      return void 0;
    }
    this.editor.canvas.mask.drawingEffect(this.range);
  };

  protected onm ouseLeave = () => {
    this.isHovering = false;
    if (!this.editor.selection.has(this.id)) {
      this.editor.canvas.mask.drawingEffect(this.range);
    }
  };

  public drawingMask = (ctx: CanvasRenderingContext2D) => {
    if (
      this.isHovering &&
      !this.editor.selection.has(this.id) &&
      !this.editor.state.get(EDITOR_STATE.MOUSE_DOWN)
    ) {
      const { x, y, width, height } = this.range.rect();
      Shape.rect(ctx, {
        x: x,
        y: y,
        width: width,
        height: height,
        borderColor: BLUE_3,
        borderWidth: 1,
      });
    }
  };
}

最后

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

标签：Canvas,const,DOM,CANVAS,STATE,editor,图形,null,轻量级
From： https://www.cnblogs.com/WindrunnerMax/p/18346501

相关文章

  • 推荐一款非常轻量级的开源媒体播放器：MPC-HC
    MediaPlayerClassicHomeCinema，简称MPC-HC，是一款简洁的媒体播放器，MediaPlayerClassic的延续版本，有32位和64位版本。MediaPlayerClassic是由名为"Gabest"的程序员建立，现在他仍然有维护这个程序。Gabest原先是以不公开源代码的方式开发MediaPlayerClassic，但后来......
  • jQuery入门 (三) jQuery DOM操作
    jQueryDOM操作一、JQuery的DOM操作1、操作文本操作文本-常用方法:1.方法:html()作用:获取标签的文本内容2.方法:html(value)作用:设置标签的文本内容，解析标签示例代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-......
  • 【论文笔记】Cross-Domain WiFi Sensing with Channel State Information: A Survey
    Cross-DomainWiFiSensingwithChannelStateInformation:ASurveyIntroduction检测领域：检测领域里，大部分用的阈值检测或者简单的学习算法，例如SVM。fallsRT-Fall:Areal-timeandcontactlessfalldetectionsystemwithcommodityWiFidevicesWiFall:Device-fr......
  • 鸿蒙UI系统组件15——画布(Canvas)
    如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！扫描下方名片，关注公众号，公众号更新更快，同时也有更多学习资料和技术讨论群。⭐️ 概 述      前一章我们学习了Shape绘制来绘制自定义形状，在实际的业务开发中，有可能我们需要绘制更复杂的图形，例如统计图中的饼图、......
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-64 - Canvas和SVG元素推拽
    1.简介今天宏哥分享的在实际测试工作中很少遇到，比较生僻，如果突然遇到我们可能会脑大、懵逼，一时之间不知道怎么办？所以宏哥这里提供一种思路供大家学习和参考。2.SVG简介svg也是html5新增的一个标签，它跟canvas很相似。都可以实现绘图、动画。但是svg绘制出来的都是矢量图，不像canv......
  • 数组中生成随机数（Random）
    数组中生成随机数（Random）要通过随机数索引来访问数组中的某一个元素，可以使用Java中的Random类来生成一个随机数，然后用这个随机数作为索引来访问数组。以下是一个示例代码，展示了如何实现这一点：importjava.util.Random;publicclassRandomArrayAccess{publicstaticvoidmai......
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-63 - Canvas和SVG元素定位
    1.简介今天宏哥分享的在实际测试工作中很少遇到，比较生僻，如果突然遇到我们可能会脑大、懵逼，一时之间不知道怎么办？所以宏哥这里提供一种思路供大家学习和参考。2.SVG简介svg也是html5新增的一个标签，它跟canvas很相似。都可以实现绘图、动画。但是svg绘制出来的都是矢量图，不像canv......
  • canvas调整基点（中心点：x、y坐标所针对的点位）
    在canvas中，可以使用textAlign和textBaseline属性来调整文字的基准点 textAlign属性：用于设置文字的水平对齐方式。start（默认，基准点在文字左端） end（基准点在文字右端） center（基准点在文字中心） left（基准点在文字左端） right（基准点在文字右端）  textBaseline属性：用......
  • 前端必知必会-HTMLCanvas图形
    文章目录HTMLCanvas图形添加JavaScript绘制一条线绘制一个圆圈绘制一个文本描边文本绘制线性渐变绘制圆形渐变绘制图像总结HTMLCanvas图形HTML<canvas>元素用于在网页上绘制图形。什么是HTMLCanvas？HTML<canvas>元素用于通过JavaScript动态绘制图形......
  • 16 模块time、datetime、random、hashlib、logging
    1.时间模块time、datetime在python中，表示时间有三种方式：时间戳格式化的时间字符串(FormatString):'2022-03-01'时间元组(struct_time)1.1time模块1.1.1时间戳（time）（1）生成时间戳 时间戳是指格林威治时间1970年01月01日00时00分00秒（北京时间1970年01月01日08时00分00秒）起......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99