Android应用开发实现用户手绘polyline功能的方案咨询

基于原生Android Canvas API即可实现，不需要引入额外第三方依赖，核心逻辑分为触摸事件捕获、顶点坐标存储、画布实时渲染三个部分。

核心实现步骤 #

• 自定义手绘图层View：继承基础View类，初始化绘制相关配置：
  • 配置Paint对象：开启抗锯齿，设置折线的颜色、粗细、转角样式，折线场景建议把strokeJoin设为ROUND，避免转角处出现尖锐毛刺。
  • 定义存储结构保存已绘制完成的折线、当前正在绘制的临时折线，同时单独存储每条折线的顶点坐标列表，方便后续做编辑、导出操作，不要只存Path对象（Path无法直接反向解析出准确顶点坐标）。
• 重写触摸事件处理方法onTouchEvent：
  • ACTION_DOWN（落笔）事件：获取当前触摸点的x、y坐标，重置临时路径，调用path.moveTo(x,y)设置路径起点，把起点坐标存入顶点列表，注意这里必须返回true消费事件，否则后续的MOVE、UP事件不会被当前View接收，会出现拖动无响应的问题。
  • ACTION_MOVE（拖动）事件：每次触摸位置更新时，获取最新坐标，直接调用path.lineTo(x,y)和上一个点连直线（折线场景不需要贝塞尔平滑处理，否则会变成曲线不符合polyline的定义），把新坐标存入顶点列表，调用invalidate()触发画布重绘，实现实时预览效果。
  • ACTION_UP（抬笔）事件：把当前绘制完成的临时折线存入已完成折线列表，重置临时路径和顶点列表，准备下一次绘制。
• 重写onDraw渲染方法：
  • 先遍历绘制所有已完成的历史折线，再绘制用户当前正在拖动的临时折线，保证实时绘制的内容在最上层。

核心实现代码（Kotlin） #

class PolylineDrawView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    // 折线默认样式配置
    private val defaultLinePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.parseColor("#333333")
        strokeWidth = 8f
        style = Paint.Style.STROKE
        strokeCap = Paint.Cap.ROUND
        strokeJoin = Paint.Join.ROUND
    }

    // 存储已完成折线：每条折线绑定对应的路径、顶点列表、绘制样式
    private data class PolylineModel(
        val path: Path,
        val points: List<PointF>,
        val paint: Paint
    )
    private val finishedPolylines = mutableListOf<PolylineModel>()

    // 当前正在绘制的临时路径、顶点
    private var currentPath = Path()
    private val currentPoints = mutableListOf<PointF>()

    override fun onTouchEvent(event: MotionEvent): Boolean {
        val x = event.x
        val y = event.y
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                currentPath.reset()
                currentPoints.clear()
                currentPath.moveTo(x, y)
                currentPoints.add(PointF(x, y))
                return true
            }
            MotionEvent.ACTION_MOVE -> {
                currentPath.lineTo(x, y)
                currentPoints.add(PointF(x, y))
                invalidate()
            }
            MotionEvent.ACTION_UP -> {
                finishedPolylines.add(
                    PolylineModel(
                        path = currentPath,
                        points = currentPoints.toList(),
                        paint = defaultLinePaint
                    )
                )
                currentPath = Path()
                invalidate()
            }
        }
        return super.onTouchEvent(event)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 绘制历史折线
        finishedPolylines.forEach { polyline ->
            canvas.drawPath(polyline.path, polyline.paint)
        }
        // 绘制当前正在创建的折线
        canvas.drawPath(currentPath, defaultLinePaint)
    }

    // 对外提供清空画布方法
    fun clearAll() {
        finishedPolylines.clear()
        currentPath.reset()
        currentPoints.clear()
        invalidate()
    }
}

常见需求扩展 #

• 顶点编辑功能：绘制时给每个顶点绘制半径10dp的圆形控制点，触摸时判断触点和控制点的距离，小于20dp（手指触摸判定阈值）就进入拖拽模式，拖动时更新对应顶点坐标、重绘关联路径即可。
• 多样式支持：初始化自定义属性，支持在布局文件中配置折线颜色、粗细、虚线效果，绘制时给每条折线绑定对应的Paint对象即可。
• 性能优化：单页折线数量超过50条时，使用离屏Bitmap缓存已绘制完成的内容，onDraw时先绘制缓存Bitmap，只实时渲染当前正在拖动的临时折线，避免重复绘制大量路径导致的卡顿。
• 坐标导出：直接从折线存储结构中取顶点列表，根据业务需求转成屏幕坐标或者映射为经纬度坐标即可。

内容的提问来源于stack exchange，提问作者Quoc Hung