前端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

相关推荐
托尼沙滩裤1 小时前
【js面试题】js的数据结构
前端·javascript·数据结构
不熬夜的臭宝1 小时前
每天10个vue面试题(一)
前端·vue.js·面试
不如喫茶去1 小时前
VUE自定义新增、复制、删除dom元素
前端·javascript·vue.js
长而不宰1 小时前
vue3+electron项目搭建,遇到的坑
前端·vue.js·electron
阿垚啊2 小时前
vue事件参数
前端·javascript·vue.js
过去式的美好3 小时前
vue前端通过sessionStorage缓存字典
前端·vue.js·缓存
Simaoya3 小时前
vue判断元素滚动到底部后加载更多
前端·javascript·vue.js
头顶一只喵喵3 小时前
Vue基础知识:Vue3.3出现的defineOptions,如何使用,解决了什么问题?
前端·javascript·vue.js·vue3
掘金安东尼3 小时前
上周前端发生哪些新鲜事儿?#370
前端·javascript·面试
渔舟小调4 小时前
MAC下的PDM工具
经验分享·macos·编辑器