24/12/07

Former-commit-id: aaa80d8

Backup/Canvas图形编辑器-我的剪贴板里究竟有什么数据.md

@@ -200,3 +200,16 @@ private onPaste = (e: ClipboardEvent) => {
 ## 最后
 本文我们介绍总结了应该如何操作剪贴板，也就是我们在浏览器的复制粘贴行为，并且在此基础上聊到了在`Canvas`图形编辑器中的焦点问题以及如何实现复制粘贴行为，虽然暂时不涉及到`Canvas`本身，但是这都是作为编辑器本身的基础能力，也是通用的能力可以学习。针对于这个编辑器我们可以介绍的能力还有很多，整体来看会涉及到数据结构、`History`模块、复制粘贴模块、画布分层、事件管理、无限画布、按需绘制、性能优化、焦点控制、参考线、富文本、快捷键、层级控制、渲染顺序、事件模拟、`PDF`排版等等，整体来说还是比较有意思的，欢迎关注我并留意后续的文章。
 
+## 每日一题
+
+```
+https://github.com/WindRunnerMax/EveryDay
+```
+
+## 参考
+
+```
+https://github.com/WindRunnerMax/CanvasEditor
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas
+https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
+```

Backup/Canvas图形编辑器-数据结构与History.md

@@ -257,3 +257,17 @@ export class History {
 ## 最后
 本文我们介绍总结了我们的图形编辑器中数据结构的设计以及`History`模块的实现，虽然暂时不涉及到`Canvas`本身，但是这都是作为编辑器本身的基础能力，也是通用的能力可以学习。后边我们可以介绍的能力还有很多，例如复制粘贴模块、画布分层、事件管理、无限画布、按需绘制、性能优化、焦点控制、参考线、富文本、快捷键、层级控制、渲染顺序、事件模拟、`PDF`排版等等，整体来说还是比较有意思的，欢迎关注我并留意后续的文章。
 
+
+## 每日一题
+
+```
+https://github.com/WindRunnerMax/EveryDay
+```
+
+## 参考
+
+```
+https://github.com/WindRunnerMax/CanvasEditor
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas
+https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
+```

Backup/Canvas简历编辑器-Monorepo+Rspack工程实践.md

@@ -207,3 +207,16 @@ jobs:
 ## 最后
 在这里我们聊了为什么要用`Monorepo`以及简单聊了一下`pnpm workspace`的优势，然后解决了在子项目开发中会遇到的`TS`编译、项目编译的两个实际问题，分别在`Monorepo`、`Rspack`、`Webpack`项目中相关的部分实践了一下，最后还简单聊了一下利用`GitHub Action`直接在`Git Pages`部署在线`DEMO`。那么再往后边的文章中，我们就需要聊一聊如何实现 层级渲染与事件管理 的能力设计。
 
+## 每日一题
+
+```
+https://github.com/WindRunnerMax/EveryDay
+```
+
+## 参考
+
+```
+https://github.com/WindRunnerMax/CanvasEditor
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas
+https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
+```

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

@@ -380,3 +380,17 @@ class ElementNode extends Node {
 ## 最后
 在这里我们聊了聊如何抽象基本的图形绘制以及状态的管理，因为我们的需求在这里所以我们的图形绘制能力会设计的比较简单，而状态管理则是迭代了三个方案才确定通过轻量`DOM`的方式来实现，那么再往后，我们就需要聊一聊如何实现 层级渲染与事件管理 的能力设计。
 
+
+## 每日一题
+
+```
+https://github.com/WindRunnerMax/EveryDay
+```
+
+## 参考
+
+```
+https://github.com/WindRunnerMax/CanvasEditor
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas
+https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
+```

Backup/Canvas简历编辑器-层级渲染与事件管理能力设计.md

@@ -279,3 +279,18 @@ export class Root extends Node {
 ## 最后
 在这里我们依旧关注在`Canvas`相关的内容设计上，聊到了在我们先前实现的轻量级`DOM`基础上如何管理事件的调度顺序以及多层级渲染的能力设计，且对于整体渲染与事件的调度节点顺序实现了数据缓存，模拟了事件的捕获与冒泡的调度，并且简单聊到了如何按需渲染的问题。那么接下来，我们会聊到对于`Canvas`画布的焦点实现以及无限画布的相关内容，并且由于当前我们已经基于`DOM`模拟实现了事件与模拟系统，我们还可以继续聊一聊节点的拖拽、选中、框选、`Resize`、以及参考线相关的问题，在我们聊完整个系统的图形插件化设计之后，我们还可以研究一下如何在`Canvas`上绘制富文本能力。
 
+
+## 每日一题
+
+```
+https://github.com/WindRunnerMax/EveryDay
+```
+
+## 参考
+
+```
+https://github.com/WindRunnerMax/CanvasEditor
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas
+https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
+```
+

Backup/Canvas简历编辑器-选中绘制与拖拽多选交互方案.md

@@ -439,3 +439,17 @@ export class SelectNode extends Node {
 
 ## 最后
 在这里我们就依然在轻量级`DOM`的基础上，讨论了`Canvas`中描边与填充的绘制问题，以及`inside stroke`的实现方式，然后我们实现了基本的选中绘制以及拖拽多选的交互方案，并且实现了`Hover`的效果，以及拖拽节点的移动。那么在后边我们可以聊一下`fillRule`规则设计、按需绘制图形节点，也可以聊到更多的交互方案，例如`Resize`的交互方案、参考线能力的实现、富文本的绘制方案等等。
+
+## 每日一题
+
+```
+https://github.com/WindRunnerMax/EveryDay
+```
+
+## 参考
+
+```
+https://github.com/WindRunnerMax/CanvasEditor
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas
+https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
+```