HarmonyOS鸿蒙Next中PDFView如何实现画笔功能？

HarmonyOS鸿蒙Next中PDFView如何实现画笔功能？

4 回复

要实现PDFView的画笔功能，需结合PDF Kits与Canvas组件协同实现

实现思路

在PDFView组件上层覆盖透明Canvas，用于捕获用户手势轨迹：

@Component
struct PdfWithCanvas {
  private pdfController: pdfViewManager.PdfController = new pdfViewManager.PdfController();
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
  build() {
    Stack() {
      PdfView({ controller: this.pdfController })
        .width('100%').height('100%')
      Canvas(this.context)
        .width('100%').height('100%')
        .onTouch((event: TouchEvent) => {
          // 处理触控事件
        })
    }
  }
}

通过触控事件获取坐标点并绘制路径：

@State strokePoints: Array<Point> = [];
.onTouch((event: TouchEvent) => {
  if (event.type === TouchType.Down) {
    this.strokePoints = []; // 开始新笔画
  }
  event.touches.forEach(touch => {
    this.strokePoints.push({ x: touch.x, y: touch.y });
    this.drawPath(); // 实时渲染路径
  });
})

笔迹处理与保存

通过@kit.PenKit实现压感与笔迹预测：

import { penKit } from '[@kit](/user/kit).PenKit';
const pen = penKit.createPenInstance();
pen.setStrokeWidth(5); // 设置笔迹宽度
pen.setColor(0xFF0000); // 设置颜色

将绘制路径转换为PDF批注并保存：

async function saveAsAnnotation() {
  const annotation = {
    type: pdfService.AnnotationType.INK,
    points: this.strokePoints,
    color: 0xFF0000,
    pageIndex: this.pdfController.getCurrentPage()
  };
  await this.pdfController.addAnnotation(annotation);
  await this.pdfController.saveDocument(); // 保存修改
}

界面交互优化

参考网格渐变方案构建颜色选择器：

@Component
struct ColorPalette {
  @Link selectedColor: number;
  
  build() {
    Grid() {
      ForEach(PRESET_COLORS, (color) => {
        GridItem() {
          Rect().fill(color).onClick(() => {
            this.selectedColor = color;
          })
        }
      })
    }
  }
}

通过栈结构管理历史记录：

@State undoStack: Array<Annotation> = [];
function undoLastStroke() {
  if (this.undoStack.length > 0) {
    const last = this.undoStack.pop();
    this.pdfController.deleteAnnotation(last.id);
  }
}

更多关于HarmonyOS鸿蒙Next中PDFView如何实现画笔功能？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


PDFView 组件本身不直接提供画笔功能，但您可以通过以下方式实现类似功能：

方法一：使用 Canvas 覆盖层实现画笔功能

这是最常用的方法，通过在 PDFView 上叠加一个 Canvas 组件来实现绘制功能。

import { PDFView } from '@ohos/pdf';
import { drawing } from '@kit.ArkGraphics2D';

@Entry
@Component
struct PdfWithDraw {
  // PDF控制器
  private pdfController: PDFView.PdfViewController = new PDFView.PdfViewController();
  // Canvas控制器
  private canvasController: drawing.CanvasRenderingContext2D = new drawing.CanvasRenderingContext2D();
  
  // 画笔状态
  @State isDrawing: boolean = false;
  @State penColor: string = '#ff0000';
  @State penWidth: number = 3;
  
  // 存储绘制路径
  private paths: Array<Array<number>> = [];
  private currentPath: Array<number> = [];

  build() {
    Stack() {
      // PDF视图
      PDFView({
        controller: this.pdfController,
        filePath: $rawfile('document.pdf') // 替换为您的PDF文件路径
      })
      .width('100%')
      .height('100%')
      
      // 覆盖在PDF上的Canvas，用于绘制
      Canvas(this.canvasController)
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Transparent)
        .onTouch((event) => {
          this.handleTouch(event);
        })
    }
    .width('100%')
    .height('100%')
  }

  // 处理触摸事件
  handleTouch(event: TouchEvent) {
    const touch = event.touches[0];
    
    switch (event.type) {
      case TouchType.Down:
        this.isDrawing = true;
        this.currentPath = [touch.x, touch.y];
        break;
        
      case TouchType.Move:
        if (this.isDrawing) {
          this.currentPath.push(touch.x, touch.y);
          this.drawOnCanvas();
        }
        break;
        
      case TouchType.Up:
        if (this.isDrawing) {
          this.paths.push([...this.currentPath]);
          this.isDrawing = false;
          this.currentPath = [];
        }
        break;
    }
  }

  // 在Canvas上绘制
  drawOnCanvas() {
    // 清除Canvas
    this.canvasController.clearRect(0, 0, 10000, 10000);
    
    // 设置画笔样式
    this.canvasController.strokeStyle = this.penColor;
    this.canvasController.lineWidth = this.penWidth;
    this.canvasController.lineCap = 'round';
    this.canvasController.lineJoin = 'round';
    
    // 绘制所有保存的路径
    for (const path of this.paths) {
      this.canvasController.beginPath();
      this.canvasController.moveTo(path[0], path[1](@ref);
      
      for (let i = 2; i < path.length; i += 2) {
        this.canvasController.lineTo(path[i], path[i + 1]);
      }
      
      this.canvasController.stroke();
    }
    
    // 绘制当前路径
    if (this.currentPath.length > 0) {
      this.canvasController.beginPath();
      this.canvasController.moveTo(this.currentPath[0], this.currentPath[1](@ref);
      
      for (let i = 2; i < this.currentPath.length; i += 2) {
        this.canvasController.lineTo(this.currentPath[i], this.currentPath[i + 1]);
      }
      
      this.canvasController.stroke();
    }
  }

  // 清除所有绘制
  clearDrawings() {
    this.paths = [];
    this.currentPath = [];
    this.canvasController.clearRect(0, 0, 10000, 10000);
  }

  // 更改画笔颜色
  changePenColor(color: string) {
    this.penColor = color;
  }

  // 更改画笔粗细
  changePenWidth(width: number) {
    this.penWidth = width;
  }
}

方法二：添加工具栏控件

为了让用户能够控制画笔，您可以添加一个工具栏：

// 在build方法中添加工具栏
build() {
  Column() {
    // 工具栏
    Row() {
      Button('红')
        .onClick(() => this.changePenColor('#ff0000'))
      Button('蓝')
        .onClick(() => this.changePenColor('#0000ff'))
      Button('粗')
        .onClick(() => this.changePenWidth(5))
      Button('细')
        .onClick(() => this.changePenWidth(2))
      Button('清除')
        .onClick(() => this.clearDrawings())
    }
    .height(50)
    .width('100%')
    
    // PDF和Canvas区域
    Stack() {
      PDFView({
        controller: this.pdfController,
        filePath: $rawfile('document.pdf')
      })
      .width('100%')
      .height('100%')
      
      Canvas(this.canvasController)
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Transparent)
        .onTouch((event) => {
          this.handleTouch(event);
        })
    }
    .layoutWeight(1)
    .width('100%')
  }
  .width('100%')
  .height('100%')
}

方法三：保存绘制内容

如果您需要保存绘制的内容，可以考虑以下方法：

  1. 保存为图片：将Canvas内容导出为图片，然后与PDF一起保存
  2. 保存绘制数据：将路径数据保存为JSON，下次加载时重新绘制
// 保存绘制数据
saveDrawings() {
  const drawingData = JSON.stringify({
    paths: this.paths,
    penColor: this.penColor,
    penWidth: this.penWidth
  });
  
  // 使用Preferences或其他存储方式保存drawingData
}

// 加载绘制数据
loadDrawings() {
  // 从存储中获取drawingData
  const drawingData = ''; // 从存储中获取的数据
  
  if (drawingData) {
    const data = JSON.parse(drawingData);
    this.paths = data.paths;
    this.penColor = data.penColor;
    this.penWidth = data.penWidth;
    this.drawOnCanvas();
  }
}

注意事项

  1. 性能考虑：对于复杂的绘制，可能需要优化绘制算法，例如使用路径简化
  2. 坐标转换：如果PDF有缩放或平移，需要考虑坐标转换
  3. 内存管理：大量绘制路径可能会占用较多内存，需要适当管理
  4. PDF交互：确保绘制不会干扰PDF的正常操作（如翻页、缩放等）

替代方案

如果上述方法不能满足需求，您可以考虑：

  1. 使用第三方PDF库：寻找支持注解功能的第三方PDF库
  2. 服务端处理：将PDF发送到服务端添加注释，然后下载修改后的PDF
  3. 混合方案：在PDF上绘制，然后将绘制内容转换为PDF注释（如果PDFView支持）

这种方法虽然需要一些额外的工作，但可以提供灵活的绘制功能，并且不会修改原始PDF文件。

在HarmonyOS鸿蒙Next中，PDFView组件通过集成Canvas绘制能力实现画笔功能。开发者可使用ArkTS声明式UI，结合手势事件监听获取触摸轨迹，并利用绘制指令实时渲染笔迹路径。需调用PDFView的图形绘制API，设置画笔属性如颜色与粗细，通过Path2D记录坐标数据并更新视图。

在HarmonyOS Next中，PDFView目前不直接支持原生画笔功能。可以通过以下方式实现手势画笔：

  1. 使用Canvas叠加层：在PDFView上方叠加一个透明Canvas，通过触摸事件监听实现手绘轨迹捕获。

  2. 结合Gesture和Drawing库：利用ArkUI的Gesture处理系统（如PanGesture）跟踪手指移动路径，使用DrawingContext进行实时绘制。

  3. 保存绘制数据：将绘制轨迹数据与PDF页面坐标关联，确保缩放/滚动时保持位置同步。

注意：需要自行处理笔迹的存储、重绘和清除逻辑，目前没有官方内置的PDF标注API支持。

回到顶部