HarmonyOS鸿蒙Next中图片裁剪、圆角

HarmonyOS鸿蒙Next中图片裁剪、圆角 一、需求：

获取网络图片后，根据指定区域裁剪对应尺寸的图片显示在指定鸿蒙组件，暂时并未找到比较合适的官方API，也有可能需求比较定制化，所以需要自己整一套裁剪的功能，经过探寻后，大致的思路，可以借用第三方库image_cropper进行实现和说明，我也只是简单有所接触和使用，时间紧迫，并未深耕，大家有兴趣可以自行深入挖掘和研究，大家一同进步

二、实现

分为以下步骤：

1. 自定义裁剪配置，具体的配置属性可以查看ImageCropperConfigOptions

2. 裁剪框的宽高比，更多的我们关注CropAspectRatios

示例代码如下：

export class CropAspectRatios { static custom: number | null = null; static original: number = 0.0; static ratio1_1: number = 1.0; static ratio3_4: number = 3.0 / 4.0; static ratio4_3: number = 4.0 / 3.0; static ratio9_16: number = 9.0 / 16.0; static ratio16_9: number = 16.0 / 9.0; }，更加自定义配置，多样灵活，对开发比较友好

1. 裁剪图层Painter：可以通过覆写 [ImageCropperConfig.cropLayerPainter] 里面的方法来自定裁剪图层，可查看ImageCropperLayerPainter

2. ImageCropperController控制器（提供旋转、撤销、重做、重置、重新设置裁剪比例、获取裁剪之后图片数据等操作）

4.0）翻转

export interface FlipOptions { animation?: boolean, duration?: number, } flip(options?: FlipOptions) controller.flip();

4.1）旋转：当 rotateCropRect 为 true 并且 degree 为 90 度时，裁剪框也会跟着旋转。

export interface RotateOptions { degree?: number, animation?: boolean, duration?: number, rotateCropRect?: boolean, } rotate(options?: RotateOptions) controller.rotate();

4.2）重新设置裁剪比例：重新设置裁剪框的宽高比 controller.updateCropAspectRatio(CropAspectRatios.ratio4_3);

4.3）撤销 // 判断是否能撤销 bool canUndo = controller.canUndo; // 撤销 controller.undo();

4.4）重做 // 判断是否能重做 bool canRedo = controller.canRedo; // 重做 controller.redo();

4.5）重置 controller.reset();

4.6）获取裁剪后的数据：这是重中之重，这样才能拿到我们需要的最终裁剪操作的结果 controller.getCroppedImage();获取裁剪信息等

• 具体使用参见：https://gitcode.com/xiayang/image_cropper，原理详解：原理讲解: https://juejin.cn/post/7433055767144136719

安装

ohpm install @candies/image_cropper

使用

完整例子: https://github.com/HarmonyCandies/image_cropper/blob/main/entry/src/main/ets/pages/Index.ets