无需登录 数据私有 本地保存

画布笔记本 - 手绘涂鸦与Markdown混合记录

72
0
0
0

Canvas(画布)

Canvas是HTML5标准中引入的一种网页绘图技术,它提供了一个可以通过JavaScript进行2D或3D图形绘制的区域。在画布笔记本中,Canvas技术被用于实现左侧的绘图区域,用户可以在上面自由绘制各种图形、添加文字标注。与传统的位图图像不同,Canvas绘制的内容是以矢量指令的形式存储的,这使得绘图操作具有很高的灵活性和效率。Canvas技术的优势在于它能够在浏览器中直接进行高性能的图形渲染,无需安装任何插件,同时支持像素级别的精确控制,为用户提供流畅的绘图体验。画布笔记本基于Canvas技术构建了完整的绘图系统,包括画笔、橡皮擦、文字等工具,所有这些工具的绘制操作都是在Canvas元素上实时渲染的。

Markdown

Markdown是一种轻量级的标记语言,由John Gruber于2004年创建,旨在让人们能够使用易读易写的纯文本格式编写文档,然后转换成有效的HTML文档。Markdown的语法简洁直观,使用常见的标点符号来表示文本格式,如使用星号表示强调、使用井号表示标题、使用反引号表示代码等。由于其简单易学的特点,Markdown迅速成为了技术文档、博客文章、README文件等场景的首选编写格式。在画布笔记本中,Markdown编辑器支持完整的Markdown语法,用户可以在编辑模式下编写带有格式标记的文本,然后在预览模式下查看渲染后的效果。Markdown的优势在于它既保持了纯文本的简洁性,又能够表达丰富的文档结构和格式,非常适合需要快速编写结构化内容的场景。

DPR(设备像素比)

DPR全称Device Pixel Ratio,即设备像素比,是指设备物理像素与逻辑像素之间的比例关系。在高分辨率的Retina屏幕上,一个逻辑像素可能对应多个物理像素,这就是DPR大于1的情况。例如,DPR为2的设备意味着每个逻辑像素由2x2=4个物理像素来显示,DPR为3则意味着每个逻辑像素由3x3=9个物理像素来显示。画布笔记本在导出PNG图片时会自动检测用户的设备DPR,并据此调整输出图片的分辨率,确保导出的图片在高分辨率屏幕上也能保持清晰锐利的显示效果。如果不考虑DPR因素,导出的图片在高分辨率屏幕上可能会显得模糊或像素化。通过DPR感知的导出机制,画布笔记本确保用户获得的图片质量与他们在屏幕上看到的效果一致。

撤销/重做(Undo/Redo)

撤销和重做是数字创作工具中必不可少的基础功能,它们允许用户回退到之前的操作状态或恢复被撤销的操作。撤销操作会取消用户最近执行的上一步操作,将编辑状态恢复到该操作之前的样子;重做操作则会重新执行最近被撤销的操作。画布笔记本的撤销重做系统支持最多50步的操作历史,这意味着系统会保存用户最近50次操作的完整状态信息。用户可以通过键盘快捷键Ctrl+Z执行撤销操作,通过Ctrl+Y执行重做操作,也可以通过工具栏上的相应按钮进行操作。这种操作历史机制为用户提供了强大的容错能力,让创作过程更加安全和自由。需要注意的是,操作历史是在当前会话中维护的,刷新页面后历史记录会被清空。

响应式设计(Responsive Design)

响应式设计是一种网页设计方法论,其核心理念是让网页能够自动适应不同尺寸和分辨率的设备屏幕,提供最佳的浏览和使用体验。响应式设计通常通过CSS媒体查询、弹性布局、相对单位等技术手段来实现,使得网页的布局、字体大小、图片尺寸等元素能够根据屏幕条件动态调整。画布笔记本采用了响应式设计理念,确保工具在从大屏桌面显示器到小屏智能手机的各种设备上都能正常显示和使用。在桌面端,画布和编辑器以较大的双栏布局展示,提供充裕的操作空间;在平板设备上,布局会适当调整以适应中等尺寸的屏幕;在智能手机上,则会进一步优化布局,确保核心功能仍然可用且操作便利。

画笔粗细(Brush Size)

画笔粗细是指画笔工具绘制出的线条的宽度,在画布笔记本中以像素(px)为单位进行度量。画笔粗细的可调范围为1像素到40像素,用户可以通过工具栏上的滑块控件或输入框来精确设置所需的画笔大小。较小的画笔粗细适合绘制精细的线条和细节,如轮廓线、文字标注的下划线等;中等粗细适合一般性的绘图操作,如绘制简单的图形和示意图;较大的画笔粗细则适合大面积的色块填充和粗线条的绘制。画笔粗细的灵活调节是绘图工具的基础能力之一,它直接影响到绘制效果的视觉表现。在实际创作中,用户经常需要根据不同绘图阶段和不同元素的需求频繁调整画笔粗细,因此画布笔记本提供了便捷的调节方式,让用户能够快速切换到合适的画笔大小。

PNG格式

PNG全称Portable Network Graphics(便携式网络图形),是一种广泛使用的无损压缩位图图像格式。PNG格式支持透明度(Alpha通道),能够在保持图像质量的同时实现较小的文件体积,非常适合用于网页图像、截图、绘图作品等场景。与JPEG格式不同,PNG采用无损压缩算法,不会因为压缩而损失图像质量,因此特别适合保存包含文字、线条、图标等元素的图形内容。画布笔记本选择PNG作为默认的导出格式,正是因为PNG能够完美保留画布上的绘图细节和文字清晰度,确保导出的图片与屏幕上看到的效果一致。导出的PNG文件可以直接在各种操作系统和应用程序中打开和使用,具有极佳的兼容性和通用性。

预设颜色(Preset Colors)

预设颜色是画布笔记本中预先定义好的一组常用颜色,用户可以直接从颜色面板中选择使用,无需手动调整颜色参数。这些预设颜色通常包括红色、橙色、黄色、绿色、蓝色、紫色等基本色相,以及黑色、白色、灰色等中性色,涵盖了日常绘图中最常用的颜色需求。预设颜色的存在大大简化了颜色选择的过程,让用户能够快速切换到所需的绘图颜色,提高创作效率。对于需要使用特定品牌色彩或个性化颜色的场景,画布笔记本同时提供了自定义颜色功能,用户可以通过颜色选择器或直接输入颜色值来定义自己需要的颜色。预设颜色与自定义颜色的结合使用,既满足了快速选择的便利性需求,又保证了颜色表达的灵活性和精确性。

文字块(Text Block)

文字块是画布笔记本中画布上的一个可编辑文本元素,它是通过文字工具或Markdown插入功能创建的。文字块包含了文字内容及其相关的格式属性,如字号大小、字体样式(常规、粗体、斜体)等。每个文字块在画布上占据独立的空间,可以被选中、移动和编辑。通过文字工具创建的文字块直接在画布上进行编辑,适合简短的标注和说明文字;通过Markdown编辑器插入的文字块则支持更丰富的格式化效果,适合较长的结构化文本内容。文字块的概念使得文本在画布上成为了独立的可操作元素,与手绘图形具有同等的地位,用户可以自由地安排它们在画布上的位置和层次关系,实现文字与图形的有机结合。

快捷键(Keyboard Shortcut)

快捷键是通过键盘上的特定按键组合来快速执行软件操作的方式,它能够显著提升用户的操作效率。画布笔记本支持多种快捷键操作,最常用的是Ctrl+Z用于撤销操作和Ctrl+Y用于重做操作。使用快捷键可以避免频繁使用鼠标点击菜单或按钮,让用户的双手保持在键盘上,专注于创作内容本身。对于经常使用画布笔记本进行创作的用户来说,熟练掌握快捷键操作能够大幅缩短操作时间,提升整体的工作效率。快捷键的设计遵循了通用的软件操作惯例,与大多数图形编辑软件和文本编辑器的快捷键保持一致,这使得有其他软件使用经验的用户能够无缝过渡到画布笔记本的操作环境中。

编辑模式与预览模式

编辑模式和预览模式是画布笔记本Markdown编辑器的两种工作状态。在编辑模式下,用户看到的是带有Markdown语法标记的纯文本内容,可以直接进行文字的输入、修改和格式标记的编辑。编辑模式下通常会提供语法高亮功能,将不同类型的Markdown标记以不同的颜色显示,便于用户识别和编辑。在预览模式下,编辑器会将Markdown源码实时渲染为格式化的富文本显示,用户可以看到标题、粗体、列表、引用等格式的实际呈现效果。两种模式的切换让编写Markdown文档的过程既高效又直观:在编辑模式下快速编写内容,在预览模式下确认呈现效果。画布笔记本的编辑器支持在两种模式之间快速切换,用户可以根据需要随时查看渲染效果,确保文档的格式和排版达到预期。

本地存储

本地存储是指将数据保存在用户设备的浏览器中,而不是上传到远程服务器的存储方式。画布笔记本采用本地存储策略来保存用户的创作数据,这意味着用户的画布内容和Markdown文档都存储在自己的设备上,不会被传输到任何外部服务器。本地存储的优势在于保护用户隐私、支持离线使用、减少网络依赖以及提供更快的读写速度。用户可以随时在自己的设备上访问之前创作的内容,无需联网即可继续编辑和创作。同时,本地存储也意味着用户需要自行负责数据的备份工作,建议定期使用导出功能将重要的创作作品保存为PNG图片文件,以防止因浏览器数据清除或设备更换而导致的数据丢失。