https://github.com/wbccb/visualization-study
canvas、richText、svg相关
https://github.com/wbccb/visualization-study
markwon
Last synced: 5 months ago
JSON representation
canvas、richText、svg相关
- Host: GitHub
- URL: https://github.com/wbccb/visualization-study
- Owner: wbccb
- Created: 2023-06-08T13:48:31.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-11-26T06:08:05.000Z (7 months ago)
- Last Synced: 2025-11-29T06:59:33.261Z (7 months ago)
- Topics: markwon
- Language: HTML
- Homepage:
- Size: 7.74 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 1.canvas
## 1.1 demo
[canvas基础示例](https://github.com/wbccb/visualization-study/tree/main/canvas/demo/1-base)
## 1.2 docs
- [canvas基础知识](https://github.com/wbccb/visualization-study/blob/main/canvas/docs/1-base/0-quick-start.md)
- [着色](https://github.com/wbccb/visualization-study/blob/main/canvas/docs/1-base/1-color.md)
- [文本](https://github.com/wbccb/visualization-study/blob/main/canvas/docs/1-base/2-text.md)
- [drawImage](https://github.com/wbccb/visualization-study/blob/main/canvas/docs/1-base/3-image.md)
## 1.3 mini-project
[Vue3 + Vite实现简单的白板](https://github.com/wbccb/visualization-study/tree/main/canvas/mini-project/mini-whiteboard)
- 画布背景网格显示
- 支持绘制矩形
- 无限画布
- 无限画布移动时能够正常重绘所有图形(scrollX和scrollY的修正)
- 支持绘制菱形
- 支持绘制自由画笔
- 支持绘制多行文字
- 支持绘制图片
- 支持整体画布放大缩小
- 支持转化为图片下载
- 性能优化总结
--------
[基于G2自定义Shape组件实现自定义的词云库](https://github.com/wbccb/visualization-study/tree/main/canvas/mini-project/g2-custom-word-cloud)
- 基于V4版本进行改造
- 先绘制出文本内容，再进行文本框的绘制
- 使用polygon绘制矩形（无法实现borderRadius)
- 使用path模式，根据svg规则，进行二次贝塞尔曲线的绘制
# 2.richText
## 2.1 ProseMirror
- [基础概念](https://github.com/wbccb/visualization-study/blob/main/richText/ProseMirror/%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5.md)
- [resolvePos](https://github.com/wbccb/visualization-study/blob/main/richText/ProseMirror/resolvePos.md)
- [小细节问题总结](https://github.com/wbccb/visualization-study/blob/main/richText/ProseMirror/%E5%B0%8F%E7%BB%86%E8%8A%82%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93.md)
- [其它源码文章学习总结](https://github.com/wbccb/visualization-study/blob/main/richText/ProseMirror/%E5%85%B6%E5%AE%83%E6%BA%90%E7%A0%81%E6%96%87%E7%AB%A0%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93.md)
## 2.2 Tiptap
- [创建一个extension](https://github.com/wbccb/visualization-study/blob/main/richText/Tiptap/1.%20%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAextension.md)
## 2.3 BlockNote-v0.20.0
- [初始化流程源码分析](https://github.com/wbccb/visualization-study/blob/main/richText/BlockNote-v0.20.0/1.%E5%88%9D%E5%A7%8B%E5%8C%96.md)
- [xl-multi-column源码分析](https://github.com/wbccb/visualization-study/blob/main/richText/BlockNote-v0.20.0/2.xl-multi-column%E7%B1%BB%E5%9E%8B.md)
- [block类型总结](https://github.com/wbccb/visualization-study/blob/main/richText/BlockNote-v0.20.0/3.block类型总结.md)
- [TableBlockContent](https://github.com/wbccb/visualization-study/blob/main/richText/BlockNote-v0.20.0/4.TableBlockContent.md)
- [构建新的数据类型-图片内联](https://github.com/wbccb/visualization-study/blob/main/richText/BlockNote-v0.20.0/5.构建新的数据类型-图片内联.md)
- [复制黏贴](https://github.com/wbccb/visualization-study/blob/main/richText/BlockNote-v0.20.0/6.复制黏贴.md)
# 3.svg
## 3.1 demo
- [使用viewBox进行缩放](https://github.com/wbccb/visualization-study/blob/main/svg/demo/1-viewbox.html)