🗒️svg版本轻量手写板
2024-11-18
| 2024-11-18
0  |  阅读时长 0 分钟
date
Nov 18, 2024 02:07 AM
type
status
slug
summary
tags
category
updated
Nov 18, 2024 02:51 AM
icon
password
日常开发中,经常会遇到手写板的需求。对于大部分人来说使用canvas画布是最为方便的,而且也能很好的节省性能。这里在可汗学院学习的时候发现他们的答题手写用了svg的实现方法。这十分巧妙。不用考虑题目如何在cavnas画布上渲染了。
 

实现大致逻辑

通过鼠标的坐标绘制svg标签中的path,然后加入到svg标签内。然后在擦除的时候根据(x,y) 以及宽高来计算出起点和终点坐标。判断是否2个数组的数据是否包含(leet code上有一题合并数组与之类似),然后再选择是否删除对应的path。
 

详细代码

这里采用类的方式,来完成代码的模块化。这十分有效的完成代码的解耦,使得代码层次更为清晰。
 
 
 

小结

上面的也说过这是个轻量的解决方案,所以他只适合一些简单的手写,书写的文字不多。如果书写内容过多的话,必定要生成大量的path,过多的dom一方面会对网页照常卡顿,第二是每次添加dom会触发回流,也就是dom文档要重新排序。所以谨记这是一个轻量的解决方案。
  • Html
  • Javascript
  • Css
  • 从零搭建一个npm插件和官网TypeScript的一些写法记录
    Loading...