Harmonyos5应用开发实战——摄影拍摄页面构建（part2）

3. 界面交互元素 - 变焦控制

使用 PinchGesture 手势监听双指缩放操作，根据缩放比例调整相机的变焦倍数。同时，提供预设的变焦按钮（广角、1x、5x、10x），点击按钮时调用 setZoom 函数设置相应的变焦倍数。代码如下：

XComponent({
  type: XComponentType.SURFACE,
  controller: this.mXComponentController,
  imageAIOptions:{
    types: [ImageAnalyzerType.SUBJECT],
    aiController: this.aiController
  }
})
.gesture(
  PinchGesture({ fingers: 2 })
    .onActionUpdate((event: GestureEvent) => {
      if (event && !this.isStabilization) {
        this.zoom = currentFov * event.scale;
        this.isShowZoom = true;
        if (this.zoom > (zoomRatioRange[1])) {
          this.zoom = zoomRatioRange[1];
        } else if (this.zoom < zoomRatioRange[0]) {
          this.zoom = zoomRatioRange[0];
        }
        setPhotoZoom(this.zoom);
      }
    })
    .onActionEnd(() => {
      currentFov = getPhotoZoom();
      this.isShowZoom = false
    })
)

4. 拍摄与切换摄像头

通过 Image 组件显示拍摄按钮和切换摄像头按钮，点击拍摄按钮时调用 capture 函数进行拍摄，点击切换摄像头按钮时调用 cameraShooting 函数切换摄像头并重新初始化相机。代码如下：

Image($r('app.media.capture'))
  .height(CameraConstants.CAPTURE_SIZE)
  .visibility(this.isPhoto ? Visibility.Visible : Visibility.Hidden)
  .onClick(() => {
    capture(this.isFront);
    this.currentPic = true;
  })

Image($r('app.media.switch_camera'))
  .height(CameraConstants.CAMERA_SWITCH_SIZE)
  .visibility(this.recording ? Visibility.Hidden : Visibility.Visible)
  .onClick(async () => {
    cameraPosition = cameraPosition === 1 ? 0 : 1
    cameraShooting(cameraPosition, surfaceId, context);
    this.Initialize();
    this.isFront = cameraPosition !== 0;
  })

通过以上代码，开发者可以在HarmonyOS Next应用中实现一个完整的摄影拍摄页面，包括权限请求、相机初始化、闪光灯控制、变焦控制、拍摄和切换摄像头等功能。