【HarmonyOS】鸿蒙头像裁剪圆形遮罩效果实现 demo

import { image } from '@kit.ImageKit';import { picker } from '@kit.CoreFileKit';import Matrix4 from '@ohos.matrix4'import fs from '@ohos.file.fs';import { hilog } from '@kit.PerformanceAnalysisKit';
@Componentexport struct CropView {
  @State private model: CropModel = new CropModel();
  private settings: RenderingContextSettings = new RenderingContextSettings(true);  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  @State private matrix: object = Matrix4.identity()    .translate({ x: 0, y: 0 })    .scale({ x: this.model.scale, y: this.model.scale});
  /** 临时变量，无需手动赋值 **/  private tempScale = 1;  /** 临时变量，无需手动赋值 **/  private startOffsetX: number = 0;  /** 临时变量，无需手动赋值 **/  private startOffsetY: number = 0;
  build() {    Stack() {      Image(this.model.src)        .width('100%')        .height('100%')        .alt(this.model.previewSource)        .objectFit(ImageFit.Contain)        .transform(this.matrix)        .onComplete((msg) => {          if (msg) { // 图片加载成功            this.model.imageWidth = msg.width;            this.model.imageHeight = msg.height;            this.model.componentWidth = msg.componentWidth;            this.model.componentHeight = msg.componentHeight;            this.checkImageAdapt();
            if (this.model.imageLoadEventListener != null && msg.loadingStatus == 1) {              this.model.imageLoadEventListener.onImageLoaded(msg);            }          }        })        .onError((error) => {          if (this.model.imageLoadEventListener != null) {            this.model.imageLoadEventListener.onImageLoadError(error);          }        })      Canvas(this.context)        .width('100%')        .height('100%')        .backgroundColor(Color.Transparent)        .onReady(() => {          if (this.context == null) {            return          }
          let height = this.context.height          let width = this.context.width          this.context.fillStyle= this.model.maskColor;          this.context.fillRect(0, 0, width, height)
          // 计算圆形的中心点和半径          let centerX = width / 2;          let centerY = height / 2;          let minDimension = Math.min(width, height);          let frameRadiusInVp = (minDimension - px2vp(this.model.frameWidth)) / 2; // 减去边框宽度
          // 把中间的取景框透出来          this.context.globalCompositeOperation = 'destination-out'          this.context.fillStyle = 'white'          let frameWidthInVp = px2vp(this.model.frameWidth);          let frameHeightInVp = px2vp(this.model.getFrameHeight());          let x = (width - px2vp(this.model.frameWidth)) / 2;          let y = (height - px2vp(this.model.getFrameHeight())) / 2;          // this.context.fillRect(x, y, frameWidthInVp, frameHeightInVp)          console.info(`width:${width}`)          console.info(`height:${height}`)          console.info(`x:${x}`)          console.info(`y:${y}`)          console.info(`this.model.frameWidth:${this.model.frameWidth}`)          console.info(`this.model.getFrameHeight():${this.model.getFrameHeight()}`)          console.info(`frameWidthInVp:${frameWidthInVp}`)          console.info(`frameHeightInVp:${frameHeightInVp}`)          console.info(`frameRadiusInVp:${frameRadiusInVp}`)          this.context.beginPath();          this.context.arc(centerX, centerY, px2vp(this.model.frameWidth/2), 0, 2 * Math.PI);          this.context.fill();
          // 设置综合操作模式为源覆盖，以便在现有图形上添加新的图形          this.context.globalCompositeOperation = 'source-over';
          // 设置描边颜色          this.context.strokeStyle = this.model.strokeColor;

          // 计算圆形的半径，这里我们取正方形边框的较短边的一半作为半径          let radius = Math.min(frameWidthInVp, frameHeightInVp) / 2;
          // 开始绘制路径          this.context.beginPath();
          // 使用 arc 方法绘制圆形          this.context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
          // 关闭路径          this.context.closePath();
          // 描绘圆形边框          this.context.lineWidth = 1; // 边框宽度          this.context.stroke();
        })        .enabled(false)    }    .clip(true)    .width('100%')    .height('100%')    .backgroundColor("#00000080")    .priorityGesture(      TapGesture({ count: 2, fingers: 1 })        .onAction((event:GestureEvent) => {          if(!event){            return          }          if (this.model.zoomEnabled) {            if (this.model.scale != 1) {              this.model.scale = 1;              this.model.reset();              this.updateMatrix();            } else {              this.zoomTo(2);            }          }
          this.checkImageAdapt();        })    )    .gesture(      GestureGroup(GestureMode.Parallel,        // 拖动手势        PanGesture({})          .onActionStart(() => {            hilog.info(0, "CropView", "Pan gesture start");            this.startOffsetX = this.model.offsetX;            this.startOffsetY = this.model.offsetY;          })          .onActionUpdate((event:GestureEvent) => {            hilog.info(0, "CropView", `Pan gesture update: ${JSON.stringify(event)}`);            if (event) {              if (this.model.panEnabled) {                let distanceX: number = this.startOffsetX + vp2px(event.offsetX) / this.model.scale;                let distanceY: number = this.startOffsetY + vp2px(event.offsetY) / this.model.scale;                this.model.offsetX = distanceX;                this.model.offsetY = distanceY;                this.updateMatrix()              }            }          })          .onActionEnd(() => {            hilog.info(0, "CropView", "Pan gesture end");            this.checkImageAdapt();          }),
        // 缩放手势处理        PinchGesture({ fingers: 2 })          .onActionStart(() => {            this.tempScale = this.model.scale          })          .onActionUpdate((event) => {            if (event) {              if (!this.model.zoomEnabled) return;              this.zoomTo(this.tempScale * event.scale);            }          })          .onActionEnd(() => {            this.checkImageAdapt();          })      )    )  }
  /**   * 检查手势操作后，图片是否填满取景框，没填满则进行调整   */  private checkImageAdapt() {    let offsetX = this.model.offsetX;    let offsetY = this.model.offsetY;    let scale = this.model.scale;    hilog.info(0, "CropView", `offsetX: ${offsetX}, offsetY: ${offsetY}, scale: ${scale}`)
    // 图片适配控件的时候也进行了缩放，计算出这个缩放比例    let widthScale = this.model.componentWidth / this.model.imageWidth;    let heightScale = this.model.componentHeight / this.model.imageHeight;    let adaptScale = Math.min(widthScale, heightScale);    hilog.info(0, "CropView", `Image scale ${adaptScale} while attaching the component[${this.model.componentWidth}, ${this.model.componentHeight}]`)
    // 经过两次缩放(适配控件、手势)后，图片的实际显示大小    let showWidth = this.model.imageWidth * adaptScale * this.model.scale;    let showHeight = this.model.imageHeight * adaptScale * this.model.scale;    let imageX = (this.model.componentWidth - showWidth) / 2;    let imageY = (this.model.componentHeight - showHeight) / 2;    hilog.info(0, "CropView", `Image left top is (${imageX}, ${imageY})`)
    // 取景框的左上角坐标    let frameX = (this.model.componentWidth - this.model.frameWidth) / 2;    let frameY = (this.model.componentHeight - this.model.getFrameHeight()) / 2;
    // 图片左上角坐标    let showX = imageX + offsetX * scale;    let showY = imageY + offsetY * scale;    hilog.info(0, "CropView", `Image show at (${showX}, ${showY})`)
    if(this.model.frameWidth > showWidth || this.model.getFrameHeight() > showHeight) { // 图片缩放后，大小不足以填满取景框      let xScale = this.model.frameWidth / showWidth;      let yScale = this.model.getFrameHeight() / showHeight;      let newScale = Math.max(xScale, yScale);      this.model.scale = this.model.scale * newScale;      showX *= newScale;      showY *= newScale;    }
    // 调整x轴方向位置，使图像填满取景框    if(showX > frameX) {      showX = frameX;    } else if(showX + showWidth < frameX + this.model.frameWidth) {      showX = frameX + this.model.frameWidth - showWidth;    }    // 调整y轴方向位置，使图像填满取景框    if(showY > frameY) {      showY = frameY;    } else if(showY + showHeight < frameY + this.model.getFrameHeight()) {      showY = frameY + this.model.getFrameHeight() - showHeight;    }    this.model.offsetX = (showX - imageX) / scale;    this.model.offsetY = (showY - imageY) / scale;    this.updateMatrix();  }
  public zoomTo(scale: number): void {    this.model.scale = scale;    this.updateMatrix();  }
  public updateMatrix(): void {    this.matrix = Matrix4.identity()      .translate({ x: this.model.offsetX, y: this.model.offsetY })      .scale({ x: this.model.scale, y: this.model.scale })  }}
interface ImageLoadedEvent {  width: number;  height: number;  componentWidth: number;  componentHeight: number;  loadingStatus: number;  contentWidth: number;  contentHeight: number;  contentOffsetX: number;  contentOffsetY: number;}
export interface ImageLoadEventListener {
  onImageLoaded(msg: ImageLoadedEvent): void;
  onImageLoadError(error: ImageError): void;}
export class CropModel {  /**   * 图片uri   * 类型判断太麻烦了，先只支持string，其他形式的需要先转换成路径   */  src: string = '';  /**   * 图片预览   */  previewSource: string | Resource = '';  /**   * 是否可以拖动   */  panEnabled: boolean = true;  /**   * 是否可以缩放   */  zoomEnabled: boolean = true;  /**   * 取景框宽度   */  frameWidth = 1000;  /**   * 取景框宽高比   */  frameRatio = 1;  /**   * 遮罩颜色   */  maskColor: string = '#AA000000';  /**   * 取景框边框颜色   */  strokeColor: string = '#FFFFFF';  /**   * 图片加载监听   */  imageLoadEventListener: ImageLoadEventListener | null = null;
  /// 以下变量不要手动赋值 ///  /**   * 图片宽度，加载完成之后才会赋值   */  imageWidth: number = 0;  /**   * 图片高度，加载完成之后才会赋值   */  imageHeight: number = 0;  /**   * 控件宽度   */  componentWidth: number = 0;  /**   * 控件高度   */  componentHeight: number = 0;  /**   * 手势缩放比例   * 图片经过了两重缩放，一是适配控件的时候进行了缩放，二是手势操作的时候进行了缩放   */  scale: number = 1;  /**   * x轴方向偏移量   */  offsetX: number = 0;  /**   * y轴方向偏移量   */  offsetY: number = 0;
  /////////////////////////////////////////////
  public setImage(src: string, previewSource?: string | Resource): CropModel {    this.src = src;    if (!!previewSource) {      this.previewSource = previewSource;    }    return this;  }
  public setScale(scale: number): CropModel {    this.scale = scale;    return this;  }
  public isPanEnabled(): boolean {    return this.panEnabled;  }
  public setPanEnabled(panEnabled: boolean): CropModel {    this.panEnabled = panEnabled;    return this;  }
  public setZoomEnabled(zoomEnabled: boolean): CropModel {    this.zoomEnabled = zoomEnabled;    return this;  }
  public setFrameWidth(frameWidth: number) : CropModel {    this.frameWidth = frameWidth;    return this;  }
  public setFrameRatio(frameRatio: number) : CropModel {    this.frameRatio = frameRatio;    return this;  }
  public setMaskColor(color: string) : CropModel {    this.maskColor = color;    return this;  }
  public setStrokeColor(color: string) : CropModel {    this.strokeColor = color;    return this;  }
  public setImageLoadEventListener(listener: ImageLoadEventListener) : CropModel {    this.imageLoadEventListener = listener;    return this;  }
  public getScale(): number {    return this.scale;  }
  public isZoomEnabled(): boolean {    return this.zoomEnabled;  }
  public getImageWidth(): number {    return this.imageWidth;  }
  public getImageHeight(): number {    return this.imageHeight;  }
  public getFrameHeight() {    return this.frameWidth / this.frameRatio;  }
  public reset(): void {    this.scale = 1;    this.offsetX = 0;    this.offsetY = 0;  }
  public async crop(format: image.PixelMapFormat) : Promise<image.PixelMap> {
    if(!this.src || this.src == '') {      throw new Error('Please set src first');    }    if(this.imageWidth == 0 || this.imageHeight == 0) {      throw new Error('The image is not loaded');    }
    // 图片适配控件的时候也进行了缩放，计算出这个缩放比例    let widthScale = this.componentWidth / this.imageWidth;    let heightScale = this.componentHeight / this.imageHeight;    let adaptScale = Math.min(widthScale, heightScale);
    // 经过两次缩放(适配控件、手势)后，图片的实际显示大小    let totalScale = adaptScale * this.scale;    let showWidth = this.imageWidth * totalScale;    let showHeight = this.imageHeight * totalScale;    let imageX = (this.componentWidth - showWidth) / 2;    let imageY = (this.componentHeight - showHeight) / 2;
    // 取景框的左上角坐标    let frameX = (this.componentWidth - this.frameWidth) / 2;    let frameY = (this.componentHeight - this.getFrameHeight()) / 2;
    // 图片左上角坐标    let showX = imageX + this.offsetX * this.scale;    let showY = imageY + this.offsetY * this.scale;
    let x = (frameX - showX) / totalScale;    let y = (frameY - showY) / totalScale;    let file = fs.openSync(this.src, fs.OpenMode.READ_ONLY)    let imageSource : image.ImageSource = image.createImageSource(file.fd);    let decodingOptions : image.DecodingOptions = {      editable: true,      desiredPixelFormat: image.PixelMapFormat.BGRA_8888,    }
    // 创建pixelMap    let pm = await imageSource.createPixelMap(decodingOptions);    let cp = await this.copyPixelMap(pm);    pm.release();    let region: image.Region = { x: x, y: y, size: { width: this.frameWidth / totalScale, height: this.getFrameHeight() / totalScale } };    cp.cropSync(region);    return cp;  }
  async copyPixelMap(pm: PixelMap): Promise<PixelMap> {    const imageInfo: image.ImageInfo = await pm.getImageInfo();    const buffer: ArrayBuffer = new ArrayBuffer(pm.getPixelBytesNumber());    // TODO 知识点：通过readPixelsToBuffer实现PixelMap的深拷贝，其中readPixelsToBuffer输出为BGRA_8888    await pm.readPixelsToBuffer(buffer);    // TODO 知识点：readPixelsToBuffer输出为BGRA_8888,此处createPixelMap需转为RGBA_8888    const opts: image.InitializationOptions = {      editable: true,      pixelFormat: image.PixelMapFormat.RGBA_8888,      size: { height: imageInfo.size.height, width: imageInfo.size.width }    };    return image.createPixelMap(buffer, opts);  }}
interface MyEvent {  result: FileSelectorResult,  fileSelector: FileSelectorParam}@Entry@Componentstruct Page23 {  @State pm: PixelMap | undefined = undefined;  @State private model: CropModel = new CropModel();
  build() {    Column() {      CropView({        model: this.model,      })        .layoutWeight(1)        .width('100%')      Button('打开相册').onClick(()=>{        this.openPicker()      })      Button('测试剪裁').onClick(async () => {        try {          this.pm = await this.model.crop(image.PixelMapFormat.RGBA_8888);        } catch (e) {          console.info(`e:${JSON.stringify(e)}`)        }      })      Text('剪裁结果')      Image(this.pm).width('300lpx').height('300lpx').borderRadius('150lpx')    }    .height('100%')    .width('100%')  }  // 弹出图片选择器方法  async openPicker() {    try {      // 设置图片选择器选项      const photoSelectOptions = new picker.PhotoSelectOptions();      // 限制只能选择一张图片      photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;      photoSelectOptions.maxSelectNumber = 1;      // 创建并实例化图片选择器      const photoViewPicker = new picker.PhotoViewPicker();      // 选择图片并获取图片URI      let uris: picker.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);      if (!uris || uris.photoUris.length === 0) return;      // 获取选中图片的第一张URI      let uri: string = uris.photoUris[0];      this.model.setImage(uri)        .setFrameWidth(1000)        .setFrameRatio(1);    } catch (e) {      console.error('openPicker', JSON.stringify(e));    }  }
  handleFileSelection(event: MyEvent) {    const PhotoSelectOptions = new picker.PhotoSelectOptions();    PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;    PhotoSelectOptions.maxSelectNumber = 1;
    const photoPicker = new picker.PhotoViewPicker();
    photoPicker.select(PhotoSelectOptions)      .then((PhotoSelectResult) => {        if (PhotoSelectResult.photoUris.length === 0) {          console.warn('No image selected.');          return;        }
        const srcUri = PhotoSelectResult.photoUris[0];        this.model.setImage(srcUri)          .setFrameWidth(1000)          .setFrameRatio(1);      })      .catch((selectError: object) => {        console.error('Failed to invoke photo picker:', JSON.stringify(selectError));      });
    return true;  }}