1. 前提 前阵子读过一篇 Miro 前端工程师写得一篇文章 Fighting for bytes in the frontend。里面讲了他们采用了哪些方法来减少 Ipad 内存被耗尽的几率。 里面提到他们已经对用户的手绘点做了如下处理： 优化点的数量，有助于减少绘画。 生成控制点，用于绘制贝塞尔曲线。 手绘点数据类型： type Point = { x: numb...
如何在 Prosemirror 中实现块级节点的拖拽
最近由于工作需要研究了 Prosemirror 和基于 React 的 Prosemirror 编辑器 rich-markdown-editor ，并尝试在 rich-markdown-editor 的基础上实现能够拖拽块级节点的功能。 1. 总体思路 本文中涉及的概念参考了 Prosemirror 官网 和 xheldon 翻译的中文版 指南 和 API 文档 。 在 Prosemi...
矩阵和矩阵变换
1. Web 中的矩阵 在 Web 开发中经常见到矩阵的身影，比如： SVGGraphicsElement.getScreenCTM() 返回的 DOMMatrix 是一个 4 X 4 的矩阵，适用于 2D 和 3D 操作，包括旋转和平移。 CSS 函数 matrix(a, b, c, d, tx, ty) 指定了一个由 6 个值组成的 2D 变换矩阵...
如何把鼠标坐标转换成svg内部坐标
1. 概述 最近在工作中碰到了一个问题，当 svg 的父元素存在 transform 属性（旋转、缩放、平移或倾斜）时，如何把当前鼠标所在的坐标转换成 svg 内部坐标。这个问题在 stackoverflow 中得到了解答。 同时也发现了在 firefox 中存在 BUG ，因为 svg.getScreenCTM() 并没有计入 svg 父元素的 transform 。这个 BUG 于 ...