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


前言

很高兴,今天我又为自己设定了一个目标:带领大家从入门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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IMplementist

你的鼓励,是我继续写文章的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值