AndroidPDFViewer实现PDF触摸添加标记点功能技术求助

嘿，我之前刚好折腾过类似的需求，用AndroidPDFViewer实现触摸标记点其实没那么复杂，核心思路确实是靠自定义绘制层来实现，不用去碰PDF本身的位图，那样反而容易踩坑。下面给你一步步拆解具体实现：

核心逻辑 #

AndroidPDFViewer自带了触摸监听接口，我们可以通过它拿到屏幕触摸坐标，再转换成PDF页面的对应坐标，最后在PDFView的上层叠加一个自定义视图来绘制标记点——这样既不破坏PDF本身的内容，还能灵活控制标记的显示。

具体实现步骤 #

• 1. 先定义标记点的数据结构
  先搞个简单的数据类，用来存每个标记点的关键信息：

  data class MarkerPoint(
      val page: Int,          // 标记点所在的PDF页码
      val x: Float,           // 标记点在PDF页面上的X坐标
      val y: Float,           // 标记点在PDF页面上的Y坐标
      val radius: Float = 10f,// 标记点的大小
      val color: Int = Color.RED // 标记点颜色
  )
  

• 2. 给PDFView绑定触摸监听
  在你的Activity/Fragment里，给PDFView设置触摸监听，把屏幕触摸坐标转换成PDF页面的相对坐标：

  // 先初始化标记点列表
  private val markerPoints = mutableListOf<MarkerPoint>()
  
  // 给PDFView设置触摸监听
  pdfView.setOnTapListener { tapX, tapY ->
      val currentPage = pdfView.currentPage
      val pageSize = pdfView.getPageSize(currentPage)
      
      // 把屏幕坐标转成PDF页面的相对坐标（基于页面宽高的比例，适配缩放）
      val pdfX = tapX / pdfView.width * pageSize.width
      val pdfY = tapY / pdfView.height * pageSize.height
      
      // 添加标记点到列表
      markerPoints.add(MarkerPoint(currentPage, pdfX, pdfY))
      // 通知自定义绘制视图重绘
      customDrawView.setMarkerPoints(markerPoints)
      true
  }
  

• 3. 写一个自定义绘制视图
  这个视图要叠加在PDFView上层，负责绘制所有标记点，还要适配PDF的缩放和页面切换：

  class CustomDrawView(context: Context, attrs: AttributeSet?) : View(context, attrs) {
      private val markerPoints = mutableListOf<MarkerPoint>()
      private val paint = Paint().apply {
          style = Paint.Style.FILL
          isAntiAlias = true
      }
  
      fun setMarkerPoints(points: List<MarkerPoint>) {
          markerPoints.clear()
          markerPoints.addAll(points)
          invalidate() // 触发重绘
      }
  
      override fun onDraw(canvas: Canvas) {
          super.onDraw(canvas)
          val pdfView = parent as PDFView
          val currentPage = pdfView.currentPage
          
          // 只绘制当前页面的标记点
          markerPoints.filter { it.page == currentPage }.forEach { point ->
              val pageSize = pdfView.getPageSize(currentPage)
              // 把PDF页面坐标转回屏幕坐标
              val screenX = point.x / pageSize.width * width
              val screenY = point.y / pageSize.height * height
              
              paint.color = point.color
              canvas.drawCircle(screenX, screenY, point.radius, paint)
          }
      }
  }
  

• 4. 布局里叠加视图
  把自定义绘制视图和PDFView放在同一个FrameLayout里，确保绘制视图在最上层：

  <FrameLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
      <com.github.barteksc.pdfviewer.PDFView
          android:id="@+id/pdfView"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>
  
      <com.yourpackage.CustomDrawView
          android:id="@+id/customDrawView"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>
  </FrameLayout>
  

关键注意事项 #

• 坐标转换一定要用比例计算，这样不管PDF怎么缩放、滚动，标记点都能精准对应到PDF页面的位置；
• 如果需要支持标记点的删除、修改，只需要操作markerPoints列表，然后通知自定义视图重绘就行；
• 后续要测两点间距的话，直接从列表里取两个点，结合PDF的页面尺寸（比如毫米、英寸）就能算出真实物理距离，这个后续再细化也很方便。

这样搞完，用户触摸屏幕时就能在对应的PDF位置添加上红色标记点了，而且标记点会跟着PDF的缩放、滚动自动适配位置~

内容的提问来源于stack exchange，提问作者Vincent Herreros