前端canvas项目实战——在线图文编辑器:序

目录

  • 前言
  • [一、 博主是谁?](#一、 博主是谁?)
  • [二、 关于本专栏](#二、 关于本专栏)
    • [1. 本专栏涉及的技术栈](#1. 本专栏涉及的技术栈)
    • [2. 专栏适合谁来学习?](#2. 专栏适合谁来学习?)
    • [3. 你可以从专栏学到什么?](#3. 你可以从专栏学到什么?)
    • [4. 系列文章索引](#4. 系列文章索引)
  • [三、 付费信息](#三、 付费信息)
  • 后记

前言

很高兴,今天我又为自己设定了一个目标:带领大家从入门HTML5中的Canvas,到最终实现一个精美的在线图文编辑器 。我的初心没有变,就像几年以前,我在自己苦苦摸索实现之后,写下一篇篇博文,想要让初学者们 在学习 Java Web 的道路上少走一些弯路一样。


一、 博主是谁?

博主本/硕皆毕业于211工程大学软件工程专业,上学期间就已经开始实现实用的工具,来提升实验室的工作效率。博主毕业后入职了国内顶尖的互联网大厂,成为一名软件开发工程师。工作至今4年多,拥有丰富的全栈开发和交付能力。

另外,博主有一项个人特质值得一提:我有很强的代码洁癖 ,实现需求的同时会特别关注代码的 整洁性内存复杂度时间复杂度 ,期望自己的代码是简洁高效的。


二、 关于本专栏

很长时间以来,关于HTML5 的信息不绝于耳,Canvas 就是其中的一大特色。在这个专栏,我会撰写一系列的博文,带领大家从入门到最终实现一个精美的在线图文编辑器。在这个过程中,相信大家一定会受益良多。

1. 本专栏涉及的技术栈

前端

  • 框架选择我惯用的「React」;
  • 画布的底层依赖于「fabric.js」;
  • 当画布的基本功能趋于稳定时,我们会引入「TypeScript」,用弱类型让规范化;
  • 涉及到向后台服务器发送Ajax请求时,我将引入「Axios」;
  • 实现到协同编辑 的功能时,我还会引入「Socket」长连接...

后端

  • 语言选择我惯用的「Java 」,框架会使用「Spring Boot 」。上传图片导出可二次编辑的PDF长连接等章节,代码的重心就会落在后端。

2. 专栏适合谁来学习?

  • 1) 软件工程 / 计算机相关专业的同学:

    • 如果你需要一份代码精良、注释齐全、界面优美的毕业设计
    • 如果你的简历上缺少一份有价值、高品质的实战项目
    • ···

    这个专栏不仅「授人以鱼」,还「授人以渔」,就是为你量身打造的!

  • 2) 缺少HTML5 Canvas实践的前端开发者:

    如果你正在寻找一套内容连贯、代码简洁、有些挑战性的项目来入门和掌握canvas的实践方法,这个专栏就是你要找的!

  • 3) 想要做点什么,但苦于没有想法的小团队:

    如果有两个成员以上,就可以分工明确:一个前端、一个后端,合作起来一起完成这个实战项目。这样,团队里的每个人就不需要消耗精力去学习不感兴趣的部分。

总之,欢迎任何对这个项目产生兴趣的人!有人陪伴的学习之旅,必定胜于独自走在路上,苦苦追寻!

3. 你可以从专栏学到什么?

  • 企业级开发的实现逻辑:

    • 每个小节在动手实现之前,我都会先进行严谨的需求分析,将大的需求化整为零,确保每个子模块简洁可维护、子模块间可以高效协作。

    • 部分小节,我列举出了自己在实现过程中引入的bug ,深入浅出地讲解产生bug的原因,以及如何修复它。------这些都是学习过程中可以让人快速成长的精华部分!

  • 企业级开发的项目代码:

    每一篇博文中,都会对本节的核心代码 进行重点讲解。在博文的末尾,会附上本节实现的完整项目代码,代码托管于「CodeSandbox」网站,点击链接前往,可以立即预览到完整代码的效果,也可以一键下载项目压缩包。

  • HTML5 Canvas的扩展能力:

    • 在线图文编辑器: 随着我们功能的完善,可以上线这个网站提供服务。
    • 知识产权保护: 如某度文档,只可浏览文档内容,不可以框选复制粘贴。
    • 2D网页游戏 / 微信小游戏: canvas的用途十分广泛,可以用来制作网页游戏和微信小游戏。

4. 系列文章索引

01. 《前端canvas项目实战------在线图文编辑器:左侧工具栏》
02. 《前端canvas项目实战------在线图文编辑器:颜色》
03. 《前端canvas项目实战------在线图文编辑器:线条宽度&样式》
04. 《前端canvas项目实战------在线图文编辑器:线条端点样式》
05. 《前端canvas项目实战------在线图文编辑器:字体、字号、行间距》
06. 《前端canvas项目实战------在线图文编辑器:加粗、斜体、下划线、删除线(上)》
07. 《前端canvas项目实战------在线图文编辑器:加粗、斜体、下划线、删除线(下)》
08. 《前端canvas项目实战------在线图文编辑器:复制、删除、锁定、层叠顺序》
09. 《前端canvas项目实战------在线图文编辑器:逻辑画布》
10. 《前端canvas项目实战------在线图文编辑器:小地图MiniMap(上)》
11. 《前端canvas项目实战------在线图文编辑器:小地图MiniMap(下)》

以下博文撰写中,敬请期待!

  1. 《前端canvas项目实战------在线图文编辑器:画布快捷操作》
  2. 《前端canvas项目实战------在线图文编辑器:渐近线》
  3. 《前端canvas项目实战------在线图文编辑器:撤销 / 重做》
  4. 《前端canvas项目实战------在线图文编辑器:标尺与辅助线》
  5. 《前端canvas项目实战------在线图文编辑器:上传图片》
    ...

三、 付费信息

本专栏设定价格为**¥299,** 订阅之后,你可以获得:

  • 全部博文的完整阅读权限,永不过期。
  • 项目完整代码,可以点击每篇博文后的链接,在线上随意体验本节内容的实现效果。
  • 可以向博主私信自己亟待解决的canvas代码问题,我会在第一时间帮助你调试、定位和解决。
  • 如果有急于学习的canvas相关内容,可以评论博文或者私信博主,大家关注最多的内容,我会调整顺序,优先讲解。

后记

持续地用学习到的知识进行实践,再用实践过程中得到的成功或失败的经验强化学习的成果,这是一个令人喜悦的正向循环。

每个人的学习之路上都要经过一片"沼泽"。趟过那些泥泞之后,我在来时的路上铺上了木板,希望你经过的时候可以大步流星,一往无前。

------2024-05-19

今天一次性发布了两篇博文,由于篇幅原因,对小地图MiniMap的文章进行了拆分。小地图是一个需要严谨对待的,慢工出细活的功能。

参考了一下:

  • 在做类似事情的朋友,都没有花心思把小地图做出来。
  • 商用的图文编辑器 ,小地图也是用DOM元素拼的,没有我的实现方式整洁、易维护。
  • fabric.js仓库的作者,应issue中大家的强烈要求,断断续续做了近三年,也没有做出来。

我就不在这里吹自己了,这两篇博文里的代码逻辑简洁明了,非常值得学习。快去看看吧!

------2024-05-23

相关推荐
Kika写代码43 分钟前
【微信小程序】4|搜索框-历史搜索 | 我的咖啡店-综合实训
前端·微信小程序·小程序·notepad++
egekm_sefg2 小时前
一个基于Rust适用于 Web、桌面、移动设备等的全栈应用程序框架
开发语言·前端·rust
冴羽2 小时前
Solid.js 最新官方文档翻译(13)—— Context(上下文)
前端·javascript·react.js
ObjectX前端实验室2 小时前
交互式md文档渲染实现
前端·github·markdown
数巨小码人3 小时前
vim文本编辑器常用命令和快捷键
linux·编辑器·vim
励志成为大佬的小杨3 小时前
c语言中的枚举类型
java·c语言·前端
前端熊猫4 小时前
Element Plus 日期时间选择器大于当天时间置灰
前端·javascript·vue.js
傻小胖4 小时前
React 组件通信完整指南 以及 自定义事件发布订阅系统
前端·javascript·react.js
2301_815389374 小时前
【笔记】Linux中vim编辑器回忆录
笔记·编辑器·vim
JaxNext4 小时前
开发 AI 应用的无敌配方,半小时手搓学英语利器
前端·javascript·aigc