企业官网建设流程全解析

手写笔记这个需求，看起来不复杂，真正想找一个顺手工具的时候，却总是差点意思。不是同步方案太重，就是笔迹渲染延迟明显，再不就是格式锁死，换设备后数据迁移变成大麻烦。折腾几轮之后，我决定干脆自己动手，写一个开源的 Android 手写笔记 APP，把核心链路完全握在自己手里。本篇文章会把这套实现的关键部分拆开讲解，包括自定义手写画板、贝塞尔曲线拟合、撤销重做、数据持久化，以及开源落地时值得注意的工程细节。代码以 Kotlin 编写，适合有一定 Android 基础、又对自定义 View 和笔记类应用感兴趣的开发者阅读，零基础的同学也可以按步骤把项目跑起来。

1. 为什么我又双叒自己写了一个手写笔记 APP

1.1 现有手写笔记工具的痛点

市面上的手写笔记 APP 其实不少，但用下来总有几个绕不开的问题。

第一是笔迹延迟。部分笔记 APP 把核心渲染逻辑放在跨平台框架里，复杂页面上快速书写时，笔迹明显跟不上手指，尤其是连续长笔画时，折线和锯齿感很重。对于手写笔记来说，延迟和跟手程度直接决定能不能日常使用。

第二是数据格式封闭。很多工具把笔记保存在私有数据库或自定义加密格式中，导出只有 PDF 或图片，原始笔迹数据带不出来。一旦你想做二次处理、批量检索、自动摘要，或者换个笔记软件，数据迁移成本非常高。

第三是功能臃肿。一个纯手写场景，非要塞进 AI 助手、模板市场、云盘同步、会员订阅。对于只需要“打开就写、写完能存、离线可用”的用户来说，这些功能反而是噪声。

第四是离线能力不稳定。依赖云端同步的笔记应用，在弱网环境下经常出现同步冲突，本地草稿丢失的情况也不少见。手写笔记本质上应该是本地优先的，网络只是附加能力。

1.2 自己写一个，图的是什么

自己动手写一个手写笔记 APP，核心目标其实只有几个：

• 完整控制笔迹渲染链路，从触摸采样、贝塞尔拟合到 View 绘制全部自己实现，保证低延迟。
• 数据格式完全开放，笔迹点阵用标准 JSON 保存，任何人都能解析和迁移。
• 功能做减法，只保留手写、撤销、重做、保存、加载，不搞复杂订阅体系。
• 离线优先，所有数据先落本地，后续有需要再加同步能力。

这其实也符合开源社区里很多手写笔记项目的思路：不追求大而全，而是把核心体验打磨好，然后通过开源协议把能力开放出来，让需要的人可以按自己的方式扩展。

1.3 开源能给项目带来什么

把这类项目开源，收益不只是代码托管。开源首先意味着用户可以自己编译、审查、修改，不用担心工具停止维护后笔记再也读不出来。其次，手写笔迹的渲染和拟合是个很细致的话题，开源之后容易吸引到同样在折腾这类需求的人，一起优化触摸事件处理、压感适配和渲染性能。

所以在项目设计阶段，我就尽量把核心逻辑和 UI 层解耦，方便其他人直接复用画板 View，而不是把整个 APP 绑死在一起。

2. 项目整体设计与技术选型

2.1 技术栈选择

整个项目采用 Kotlin 编写，基于 Android 原生框架，核心依赖很少。

不需要引入复杂的手写框架，因为这次的目标就是验证手写笔记的核心链路能不能自己做。

2.2 功能拆解

首版功能限定在四个模块：

• 手写画板：支持触摸书写、笔迹颜色与粗细设置。
• 笔迹拟合：使用二次贝塞尔曲线对原始触摸点做平滑，避免折线感。
• 操作栈：支持撤销、重做，保持可预期的手写体验。
• 数据存取：将笔迹序列化为 JSON 并保存到本地文件，支持加载恢复。

橡皮擦在这个版本里先做“按笔画擦除”，不做像素级擦除，降低实现复杂度。

2.3 项目目录结构

handnote/ ├── app/ │ ├── src/main/ │ │ ├── java/com/example/handnote/ │ │ │ ├── MainActivity.kt │ │ │ ├── NoteBoardView.kt │ │ │ ├── NoteModels.kt │ │ │ └── NoteBoardSerializer.kt │ │ ├── res/layout/ │ │ │ └── activity_main.xml │ │ └── AndroidManifest.xml │ └── build.gradle.kts └── build.gradle.kts

这个结构后续就算加数据库、加导出功能，也不会影响画板本身的可复用性。

3. 核心实现：自定义手写画板

3.1 笔迹数据模型设计

手写笔迹的核心是点和笔画两个抽象。

一个点只需要保存 x 和 y 坐标，后续如果要加压感笔，可以扩展为pressure字段。一个笔画由颜色、线宽和点列表构成。

// 文件路径：app/src/main/java/com/example/handnote/NoteModels.kt package com.example.handnote import android.graphics.Path data class NotePoint( val x: Float, val y: Float ) class Stroke( val color: Int, val strokeWidth: Float, val points: MutableList<NotePoint> = mutableListOf() ) { // path 不参与序列化，绘制时根据 points 重建 val path: Path = Path() fun resetPath() { path.reset() if (points.isEmpty()) return path.moveTo(points[0].x, points[0].y) var lastX = points[0].x var lastY = points[0].y for (i in 1 until points.size) { val cur = points[i] val midX = (lastX + cur.x) / 2f val midY = (lastY + cur.y) / 2f path.quadTo(lastX, lastY, midX, midY) lastX = cur.x lastY = cur.y } path.lineTo(lastX, lastY) } }

这里path是内存态对象，不参与序列化。序列化时只保存points，加载后再调用resetPath()重建绘制路径，这是手写笔记存储的关键设计。

3.2 触摸事件采集与防抖

自定义 View 中，手写输入的入口是onTouchEvent。这里需要区分三种状态：

• ACTION_DOWN：开始新笔画。
• ACTION_MOVE：持续追加点。
• ACTION_UP/ACTION_CANCEL：结束笔画。

在实际书写过程中，触摸事件的采样频率很高，如果每个点都处理，会产生大量无效计算和内存消耗。这里可以结合ViewConfiguration.get(context).scaledTouchSlop做距离过滤，只有移动距离超过阈值的点才加入笔画。

3.3 贝塞尔曲线拟合

原始触摸点直接连线会出现明显的折角，尤其是快速书写时。因此需要使用二次贝塞尔曲线对点列做平滑处理。

核心思路是：对于相邻两个原始点，不直接画直线，而是以它们的中点作为曲线终点，以前一个原始点作为控制点，绘制一条quadTo曲线。这样每段曲线之间在几何上是平滑衔接的。

对应到resetPath()中的循环逻辑：从第二个点开始，每遍历到新点，就把上一个原始点到当前点中点的贝塞尔曲线追加到 Path 上。最后再lineTo到最后一个点，保证笔画的末端不会缺一块。

这种拟合方式的优点是计算量小，实时性高，适合 Android 手写场景。

3.4 完整 NoteBoardView 代码

下面是手写画板的核心实现，代码中同时包含了撤销重做栈、橡皮擦按钮占位逻辑和绘制流程。

// 文件路径：app/src/main/java/com/example/handnote/NoteBoardView.kt package com.example.handnote import android.content.Context import android.graphics.Canvas import android.graphics.Color import android.graphics.Paint import android.graphics.Path import android.util.AttributeSet import android.view.MotionEvent import android.view.View import android.view.ViewConfiguration import java.util.ArrayDeque class NoteBoardView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr) { private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.STROKE strokeCap = Paint.Cap.ROUND strokeJoin = Paint.Join.ROUND color = Color.BLACK strokeWidth = 6f } private val strokes = mutableListOf<Stroke>() private var currentStroke: Stroke? = null private var currentPath: Path = Path() private val undoStack = ArrayDeque<Stroke>() private val redoStack = ArrayDeque<Stroke>() var currentColor: Int = Color.BLACK var currentStrokeWidth: Float = 6f var eraserMode: Boolean = false private val touchSlop = ViewConfiguration.get(context).scaledTouchSlop private var lastX = 0f private var lastY = 0f fun getStrokes(): List<Stroke> = strokes.toList() fun setStrokes(newStrokes: List<Stroke>) { strokes.clear() strokes.addAll(newStrokes) undoStack.clear() redoStack.clear() invalidate() } fun undo() { if (strokes.isEmpty()) return val stroke = strokes.removeAt(strokes.size - 1) redoStack.push(stroke) invalidate() } fun redo() { if (redoStack.isEmpty()) return val stroke = redoStack.pop() strokes.add(stroke) invalidate() } fun clearAll() { strokes.clear() undoStack.clear() redoStack.clear() invalidate() } override fun onTouchEvent(event: MotionEvent): Boolean { val x = event.x val y = event.y when (event.actionMasked) { MotionEvent.ACTION_DOWN -> { if (eraserMode) { findStrokeAt(x, y)?.let { hit -> strokes.remove(hit) invalidate() } } else { currentStroke = Stroke(currentColor, currentStrokeWidth).also { it.points.add(NotePoint(x, y)) it.resetPath() } currentPath = currentStroke!!.path lastX = x lastY = y invalidate() } return true } MotionEvent.ACTION_MOVE -> { if (eraserMode) { findStrokeAt(x, y)?.let { hit -> strokes.remove(hit) invalidate() } } else { val stroke = currentStroke ?: return true val dx = x - lastX val dy = y - lastY if (dx * dx + dy * dy < touchSlop * touchSlop) return true stroke.points.add(NotePoint(x, y)) stroke.resetPath() currentPath = stroke.path lastX = x lastY = y invalidate() } return true } MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> { val stroke = currentStroke if (stroke != null && stroke.points.isNotEmpty()) { stroke.resetPath() strokes.add(stroke) undoStack.push(stroke) redoStack.clear() } currentStroke = null currentPath = Path() invalidate() return true } } return super.onTouchEvent(event) } private fun findStrokeAt(x: Float, y: Float): Stroke? { val threshold = touchSlop * 3f return strokes.lastOrNull { stroke -> stroke.points.any { p -> val dx = p.x - x val dy = p.y - y dx * dx + dy * dy <= threshold * threshold } } } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) canvas.drawColor(Color.WHITE) for (stroke in strokes) { paint.color = stroke.color paint.strokeWidth = stroke.strokeWidth canvas.drawPath(stroke.path, paint) } currentStroke?.let { stroke -> paint.color = stroke.color paint.strokeWidth = stroke.strokeWidth canvas.drawPath(currentPath, paint) } } }

这里有几个设计点值得说明。

撤销和重做采用双栈结构，undoStack保存已经完成的笔画，redoStack保存被撤销的笔画。每次新笔画结束时，把笔画加入undoStack，同时清空redoStack，保证重做只在撤销后有效。

橡皮擦方面，目前实现的是“按笔画擦除”，即根据触摸点与笔画中所有点的最近距离来判断是否命中。这种方案实现简单，符合演示需求，但做不到像素级擦除。如果要做到精确擦除，需要引入 Canvas 离屏缓冲或区域布尔运算，这个可以放到后续版本。

4. 撤销、重做与橡皮擦

4.1 基于双栈的撤销重做

撤销重做的核心数据结构是双栈。一个栈保存历史状态，另一个栈保存被撤销的状态。

在手写场景中，撤销的最小单元是“一笔”，也就是一个Stroke。当用户点击撤销按钮时，从当前笔画列表尾部取出一笔，推入 redo 栈；点击重做时，再从 redo 栈弹出一笔，加回笔画列表。

这个实现的关键是保证栈的状态和strokes列表的一致性。每次新笔画完成时，要清空 redo 栈，避免出现“撤销后写新笔画再重做旧笔画”这种不符合直觉的行为。

4.2 橡皮擦的两种策略

手写笔记的橡皮擦通常有两种实现策略。

第一种是“笔画级擦除”，点击或滑动时命中某一条笔画，直接删除整笔。优点是逻辑简单、撤销语义清晰，缺点是擦除粒度太粗，用户只能整笔删除。

第二种是“像素级擦除”，通过PorterDuff.Mode.CLEAR或保存透明通道实现对局部笔迹的擦除。优点是表现自然，但实现复杂，还需要处理图层合成和撤销快照。

本文的示例实现的是第一种。如果你打算做像素级擦除，一个可行的思路是维护一个离屏 Bitmap，每次绘制笔迹时同时绘制到 Bitmap 和 View 上，擦除时对 Bitmap 做drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)，再把 Bitmap 区域重新绘制到 View。要注意的是，这种方式下撤销栈需要保存位图快照，内存占用会明显上升。

4.3 在自定义 View 中落地

在NoteBoardView中，橡皮擦的入口是eraserMode字段。当这个字段为true时，触摸事件不会创建新的笔画，而是调用findStrokeAt查找命中的笔画并移除。

findStrokeAt用的是距离判定：遍历所有笔画中的所有点，计算与触摸点的欧式距离，只要距离小于阈值就认为命中。这种方法在笔画稀疏时效果不错，但在笔画密集区域会出现误删，真实项目可以将阈值调低并增加最近一次触摸位置记忆来优化。

5. 数据持久化与笔记管理

5.1 为什么要自己设计序列化格式

选择自设计 JSON 格式，核心原因是可读和可迁移。相比 SQLite 数据库，JSON 文件可以用任意文本编辑器打开，也方便脚本处理。后续要把笔迹数据接入云同步、自动化笔记处理或知识库，JSON 都是兼容性最好的中间格式。

5.2 JSON 序列化与解析

下面给出NoteBoardSerializer的完整实现，它负责把NoteBoardView中的笔画列表转换成JSONObject，以及反向解析。

// 文件路径：app/src/main/java/com/example/handnote/NoteBoardSerializer.kt package com.example.handnote import org.json.JSONArray import org.json.JSONObject object NoteBoardSerializer { fun encode(view: NoteBoardView): JSONObject { val root = JSONObject() root.put("version", 1) root.put("width", view.width) root.put("height", view.height) val strokesArray = JSONArray() view.getStrokes().forEach { stroke -> val item = JSONObject() item.put("color", stroke.color) item.put("strokeWidth", stroke.strokeWidth.toDouble()) val points = JSONArray() for (p in stroke.points) { val point = JSONObject() point.put("x", p.x.toDouble()) point.put("y", p.y.toDouble()) points.put(point) } item.put("points", points) strokesArray.put(item) } root.put("strokes", strokesArray) return root } fun decode(json: JSONObject): List<Stroke> { val strokes = mutableListOf<Stroke>() val strokesArray = json.optJSONArray("strokes") ?: return strokes for (i in 0 until strokesArray.length()) { val item = strokesArray.getJSONObject(i) val color = item.optInt("color") val strokeWidth = item.optDouble("strokeWidth", 6.0).toFloat() val pointsJson = item.getJSONArray("points") val points = mutableListOf<NotePoint>() for (j in 0 until pointsJson.length()) { val p = pointsJson.getJSONObject(j) points.add( NotePoint( x = p.optDouble("x").toFloat(), y = p.optDouble("y").toFloat() ) ) } val stroke = Stroke(color, strokeWidth, points) stroke.resetPath() strokes.add(stroke) } return strokes } }

注意optDouble提供了默认值，可以防止字段缺失导致崩溃。在实际项目中，建议对 JSON 的 version 字段做校验，如果未来格式变化，可以根据不同版本做迁移解析。

5.3 保存与加载入口

保存和加载可以直接在 Activity 中完成。示例中使用filesDir作为存储目录，这是应用私有目录，不需要额外权限。

// 文件路径：app/src/main/java/com/example/handnote/MainActivity.kt package com.example.handnote import android.os.Bundle import android.widget.Button import androidx.appcompat.app.AppCompatActivity import org.json.JSONObject import java.io.File class MainActivity : AppCompatActivity() { private lateinit var noteBoardView: NoteBoardView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) noteBoardView = findViewById(R.id.noteBoardView) findViewById<Button>(R.id.btnUndo).setOnClickListener { noteBoardView.undo() } findViewById<Button>(R.id.btnRedo).setOnClickListener { noteBoardView.redo() } findViewById<Button>(R.id.btnSave).setOnClickListener { saveNote() } findViewById<Button>(R.id.btnLoad).setOnClickListener { loadNote() } } private fun saveNote() { val json = NoteBoardSerializer.encode(noteBoardView) val file = File(filesDir, "note_demo.json") file.writeText(json.toString()) } private fun loadNote() { val file = File(filesDir, "note_demo.json") if (!file.exists()) return val json = JSONObject(file.readText()) noteBoardView.setStrokes(NoteBoardSerializer.decode(json)) } }

这个版本没有处理异步 IO。真实项目中，保存应该在协程或子线程中进行，避免在笔迹多、文件大时阻塞 UI 线程。

6. 构建运行与工程集成

6.1 环境准备

本文示例基于 Kotlin 和 Android 原生开发。你需要提前准备：

• Android Studio，建议使用当前稳定版本。
• JDK 17 或以上。
• Android SDK，编译版本建议使用本机已安装的最新稳定版本。

如果你还没有 Android Studio，可以先去官网下载，安装完成后用 SDK Manager 安装对应的 Android 平台版本。本文不绑定具体版本号，因为 Android 开发工具链更新较快，不同版本的 Android Studio 默认模板会有差异。你只需要用 Android Studio 新建的项目作为基础，再对照本文的代码结构进行整合即可。

6.2 添加依赖

这个示例项目的依赖很少，只需要引入 AndroidX 基础库。在app/build.gradle.kts中维护依赖：

// 文件路径：app/build.gradle.kts plugins { id("com.android.application") id("org.jetbrains.kotlin.android") } android { namespace = "com.example.handnote" compileSdk = 34 defaultConfig { applicationId = "com.example.handnote" minSdk = 23 targetSdk = 34 versionCode = 1 versionName = "1.0" } buildTypes { release { isMinifyEnabled = false } } compileOptions { sourceCompatibility = JavaVersion.VERSION_17 targetCompatibility = JavaVersion.VERSION_17 } kotlinOptions { jvmTarget = "17" } } dependencies { implementation("androidx.core:core-ktx:1.12.0") implementation("androidx.appcompat:appcompat:1.6.1") implementation("com.google.android.material:material:1.11.0") }

如果上述版本在你的环境中无法解析，请优先使用 Android Studio 新建项目时自动生成的版本号，然后再集成本文代码。

6.3 编写布局与 MainActivity

布局文件使用 LinearLayout 划分画板区域和底部操作按钮。

<!-- 文件路径：app/src/main/res/layout/activity_main.xml --> <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.example.handnote.NoteBoardView android:id="@+id/noteBoardView" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="#FFFFFF" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="8dp"> <Button android:id="@+id/btnUndo" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="撤销" /> <Button android:id="@+id/btnRedo" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="重做" /> <Button android:id="@+id/btnSave" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="保存" /> <Button android:id="@+id/btnLoad" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="加载" /> </LinearLayout> </LinearLayout>

6.4 编译运行步骤

1. 在 Android Studio 中新建一个空项目，包名建议设为com.example.handnote。
2. 把NoteModels.kt、NoteBoardView.kt、NoteBoardSerializer.kt、MainActivity.kt四个文件复制到对应目录。
3. 替换activity_main.xml布局文件。
4. 同步 Gradle 后，连接模拟器或真机，点击 Run。

运行后，你可以在画板区域用手指书写，底部按钮支持撤销、重做、保存和加载。保存的 JSON 文件位于应用私有目录下的note_demo.json，可以通过 Device File Explorer 查看。

7. 常见问题与排查清单

7.1 高频报错与解决方案

7.2 体验问题的排查思路

如果手写体验不跟手，优先查看两点。

第一，触摸事件是否在 UI 线程被阻塞。如果在onTouchEvent中做了大量 JSON 解析、文件 IO 或复杂计算，必然产生卡顿。手写绘制路径上的代码要尽量轻量，重活放到子线程。

第二，点的过滤策略是否合理。如果完全不过滤，可能同一段笔迹重复保存了大量距离很近的点；如果过滤阈值太大，快速书写时笔迹又会变得不完整。一般以scaledTouchSlop作为基础阈值，再根据实际设备调整。

8. 最佳实践与开源发布建议

8.1 自定义 View 的性能边界

这个示例在每次ACTION_MOVE都调用resetPath()重建整条 Path。对于单笔几百个点的场景勉强够用，但对于大量笔迹的页面，这种方式的 CPU 开销会上升很快。

在实际项目中，可以改成增量更新：只在当前 Path 上追加新线段，而不是每次从第一个点开始重建。大概思路是保存上一次的lastX、lastY，在 MOVE 事件中只对新加入的点计算贝塞尔中点并 append 到 Path。这样单笔书写的复杂度从 O(n²) 降到 O(1)。

另一个优化点是局部刷新。invalidate()会导致整个 View 重绘，可以改成invalidate(dirtyRect)，只刷新发生变化的区域。配合硬件加速，可以明显改善大面积笔记的绘制性能。

8.2 数据安全与文件管理

手写笔记的数据是用户的重要资产。保存文件时应该遵循几个原则：

• 写文件时先写临时文件，再通过renameTo覆盖旧文件，避免写入中断导致数据损坏。
• 保存成功后再更新笔记列表元数据，保证文件与索引的一致性。
• 重要笔记加个定期备份机制，比如把 JSON 文件复制到系统备份目录。
• 如果未来引入云同步，优先使用增量同步，避免每次全量上传整个 JSON 文件。

在演示代码中，文件读写都发生在主线程，实际项目中必须改为协程或线程池。可以配合kotlinx.coroutines的Dispatchers.IO来做。

8.3 开源仓库整理建议

如果你准备把这个项目开源，仓库质量会影响别人是否愿意使用和贡献。在发布前建议做好以下几件事。

第一，选择一个宽松的开源协议。手写笔记这类学习型项目，MIT 或 Apache 2.0 协议比较合适，使用者在保留版权声明的前提下可以自由修改和商用。

第二，写好 README。README 中应该包含功能介绍、运行截图、技术栈说明、构建步骤和目录结构。特别是要写清楚当前实现了哪些功能、哪些功能还没做，避免使用者产生误解。

第三，提供最小可复现示例。不要只放一个完整 APP，可以单独抽出一个NoteBoardView的 Demo 页面，方便其他开发者快速集成到自己的项目里。

第四，关注开源安全。仓库中不要提交签名密钥、local.properties、keystore文件，.gitignore要提前配置好。同时要在 README 中说明最低系统版本和所需权限，让使用者在集成前就清楚边界。

9. 写在最后

手写笔记看似是个小工具，真正做起来牵扯的细节非常多。触摸事件滤波、贝塞尔拟合、撤销栈设计、序列化格式，每一块单独拿出来都可以继续深挖。本文这套实现更像一个“最小可用内核”，把从手指到屏幕、再从内存到文件的核心链路完整打通了。

如果你也在折腾手写笔记类工具，建议基于这套代码先把基础体验跑通，再考虑加入压感笔支持、离线渲染缓存、PDF 导出、甚至接入开源 OCR 做手写识别扩展。数据格式是开放的，这些能力都可以逐步加进去。欢迎在评论区分享你的实现思路，也可以把你的开源项目链接贴出来一起交流。