1.新增手势裁剪

Signed-off-by: zhoulisheng1 <zhoulisheng1@huawei.com>

entry/src/main/ets/pages/cropImagePage.ets

@@ -1,119 +0,0 @@
-/*
- * Copyright (C) 2021 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {CropImage} from '@ohos/imageknife'
-import {CropOptions} from '@ohos/imageknife'
-import {Crop} from '@ohos/imageknife'
-import {RecourseProvider} from '@ohos/imageknife'
-import {PixelMapPack} from '@ohos/imageknife'
-
-
-@Component
-@Entry
-export struct CropImagePage {
-  private _resource: Resource= $r('app.media.jpgSample');
-  @State x: number = 0;
-  @State y: number = 0;
-  @State crop_size: number = 100;
-  @State colorRotate: number = 100;
-  @State _mCropPixelMap: PixelMapPack= new PixelMapPack();
-  @State _mCropOptions: CropOptions= {
-    src: this._mCropPixelMap.pixelMap,
-    size: {
-      width: 200,
-      height: 200
-    }
-  }
-
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Text('原图').fontSize(20)
-      Image(this._resource).width(300).height(300).margin(10).objectFit(ImageFit.Contain);
-      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        TextInput({ text: '', placeholder: '裁X坐标' })
-          .type(InputType.Number)
-          .placeholderColor(Color.Gray)
-          .placeholderFont({ size: 20 })
-          .onChange((value: string) => {
-            this.x = parseInt(value);
-          })
-          .height(60)
-          .width(130)
-          .margin(2)
-        TextInput({ text: '', placeholder: '裁Y坐标' })
-          .type(InputType.Number)
-          .placeholderColor(Color.Gray)
-          .placeholderFont({ size: 20 })
-          .onChange((value: string) => {
-            this.y = parseInt(value);
-          })
-          .height(60)
-          .width(130)
-          .margin(2)
-
-        TextInput({ text: '', placeholder: '裁剪长度' })
-          .type(InputType.Number)
-          .placeholderColor(Color.Gray)
-          .placeholderFont({ size: 20 })
-          .onChange((value: string) => {
-            this.crop_size = parseInt(value);
-          })
-          .height(60)
-          .width(130)
-          .margin(2)
-
-        TextInput({ text: '', placeholder: '颜色比<1' })
-          .type(InputType.Number)
-          .placeholderColor(Color.Gray)
-          .placeholderFont({ size: 20 })
-          .onChange((value: string) => {
-            this.colorRotate = parseFloat(value);
-          })
-          .height(60)
-          .width(130)
-          .margin(2)
-
-      }.width('100%')
-      .height(60).backgroundColor(Color.Pink)
-
-      Button() {
-        Text('Crop').fontSize(15).fontColor(Color.White)
-      }
-      .height(35)
-      .width(150)
-      .onClick(() => {
-        var provider = new RecourseProvider(this._resource);
-        provider.openInternal((buffer) => {
-          Crop.crop(buffer, this.x, this.y, this.crop_size, this.crop_size, (error, data) => {
-            let result = new CropOptions();
-            result.src=null;
-            this._mCropOptions=result;
-            setTimeout(() => {
-              this._mCropOptions = {
-                src: data,
-                size: {
-                  width: 200,
-                  height: 200
-                }
-              }
-            },100)
-
-          }, this.colorRotate);
-        })
-      }).margin(10);
-      CropImage({ _mOptions: $_mCropOptions })
-    }.width('100%').height('100%');
-  }
-}

entry/src/main/ets/pages/cropImagePage2.ets

@@ -17,7 +17,6 @@ import { CropImage } from '@ohos/imageknife'
 import { CropOptions } from '@ohos/imageknife'
 import { Crop } from '@ohos/imageknife'
 import { RecourseProvider } from '@ohos/imageknife'
-import { PixelMapPack } from '@ohos/imageknife'
 import { PixelMapCrop } from '@ohos/imageknife'
 import { CropCallback } from '@ohos/imageknife'
 import { FileUtils } from '@ohos/imageknife'
@@ -28,77 +27,74 @@ import { FileUtils } from '@ohos/imageknife'
 export struct CropImagePage2 {
   @State options1: PixelMapCrop.Options = new PixelMapCrop.Options();
   @State cropTap: boolean = false;
-  @State pack: PixelMapPack = new PixelMapPack();
+
   @State width1: number = 0;
   @State height1: number = 0;
   @State _rotate: number = 0;
   @State _scale: number = 1;
   private _resource: Resource = $r('app.media.bmpSample');
-
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   build() {
-    Column() {
+    Scroll() {
+      Column() {
+        Button('点击解析图片')
+          .onClick(() => {
+            globalThis.ImageKnife.getImageKnifeContext().resourceManager.getMedia($r('app.media.bmpSample').id)
+              .then(data => {
+                let arrayBuffer = FileUtils.getInstance().uint8ArrayToBuffer(data);
+                let optionx = new PixelMapCrop.Options();
+                optionx.setWidth(800)
+                  .setHeight(800)
+                  .setCropFunction((err, pixelmap, sx, sy) => {
+                    console.log('PMC setCropFunction callback')
+                    if (err) {
+                      console.error('PMC crop err =' + err)
+                    } else {
 
-      Button('点击解析图片')
-        .onClick(() => {
-          globalThis.ImageKnife.getImageKnifeContext().resourceManager.getMedia($r('app.media.bmpSample').id)
-            .then(data => {
-              let arrayBuffer = FileUtils.getInstance().uint8ArrayToBuffer(data);
-              let optionx = new PixelMapCrop.Options();
-              optionx.setWidth(800)
-                .setHeight(800)
-                .setCropFunction((err, pixelmap, sx, sy) => {
-                  console.log('PMC setCropFunction callback')
-                  if (err) {
-                    console.error('PMC crop err =' + err)
-                  } else {
-                    let pack1 = new PixelMapPack();
-                    pack1.pixelMap = pixelmap;
-                    this.pack = pack1;
-                    this.width1 = sx * px2vp(1);
-                    this.height1 = sy * px2vp(1);
-                  }
+                      this.width1 = sx * px2vp(1);
+                      this.height1 = sy * px2vp(1);
+                      this.canvasContext.drawImage(pixelmap,0,0,this.width1,this.height1)
+                    }
 
 
+                  })
+                optionx.loadBuffer(arrayBuffer, () => {
+                  this.options1 = optionx;
                 })
-              optionx.loadBuffer(arrayBuffer, () => {
-                this.options1 = optionx;
               })
-            })
 
 
-        })
+          })
 
-      PixelMapCrop({ options: this.options1, cropTap: this.cropTap })
+        PixelMapCrop({ options: $options1, cropTap: this.cropTap })
 
-      Button('点击裁剪图片')
-        .onClick(() => {
-          this.cropTap = !this.cropTap;
-        })
-
-
-      Image(this.pack.pixelMap)
-        .width(this.width1)
-        .height(this.height1)
-        .objectFit(ImageFit.Contain)
-        .rotate({
-          z: 1,
-          centerX: this.width1 / 2,
-          centerY: this.height1 / 2,
-          angle: this._rotate
-        })
-        .scale({ x: this._scale, y: this._scale, z: 1.0 })
-        .gesture(GestureGroup(GestureMode.Parallel,
-        RotationGesture({ fingers: 2 }).onActionUpdate(event => {
-          this._rotate = event.angle;
-        }), PinchGesture({ fingers: 2 }).onActionUpdate(event => {
-          this._scale = event.scale;
-        })))
+        Button('点击裁剪图片')
+          .onClick(() => {
+            this.cropTap = !this.cropTap;
+          })
 
 
+        Canvas(this.canvasContext)
+          .width(this.width1)
+          .height(this.height1)
+          .rotate({
+            z: 1,
+            centerX: this.width1 / 2,
+            centerY: this.height1 / 2,
+            angle: this._rotate
+          })
+          .scale({ x: this._scale, y: this._scale, z: 1.0 })
+          .gesture(GestureGroup(GestureMode.Parallel,
+          RotationGesture({ fingers: 2 }).onActionUpdate(event => {
+            this._rotate = event.angle;
+          }), PinchGesture({ fingers: 2 }).onActionUpdate(event => {
+            this._scale = event.scale;
+          })))
+      }
+      .backgroundColor(Color.Brown)
+      .width('100%')
     }
-    .backgroundColor(Color.Brown)
-    .width('100%')
-    .height('100%')
 
   }
 }

imageknife/src/main/ets/components/imageknife/crop/Crop.ets

@@ -71,7 +71,7 @@ export namespace Crop {
     })
   }
 
-  async function colorRatioPixelMap(data: any, width: number, height: number, colorRatio: number, func?: CropCallback<PixelMap>) {
+  var colorRatioPixelMap = async (data: any, width: number, height: number, colorRatio: number, func?: CropCallback<PixelMap>)=> {
     if (!data) {
       func("colorRatio pixelMap is null", null);
       return;
@@ -95,10 +95,10 @@ export namespace Crop {
   }
 
 
-  function getPixelMapSize(imageSource: any, func: CropCallback<{
+   var getPixelMapSize = (imageSource: any, func: CropCallback<{
     width: number,
     height: number
-  }>) {
+  }>)=> {
     if (!imageSource) {
       return;
     }

imageknife/src/main/ets/components/imageknife/crop/PixelMapCrop.ets

@@ -18,7 +18,7 @@ import { CropCallback } from './CropCallback'
 
 @Component
 struct PixelMapCrop {
-  @Watch('watchOptions') @State options: PixelMapCrop.Options = new PixelMapCrop.Options();
+  @Watch('watchOptions') @Link options: PixelMapCrop.Options;
   @Watch('watchCropTap') @Prop cropTap: boolean;
   @State bWidth: number = 0;
   @State bHeight: number = 0;