• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { BroadCast, Constants, Log, ScreenManager } from '@ohos/common';
17import { PhotoEditCrop } from '../crop/PhotoEditCrop';
18
19const TAG: string = 'editor_CropImageShow';
20
21@Component
22export struct CropImageShow {
23  @Consume('selected') selectedMode: number;
24  @Consume broadCast: BroadCast;
25  @Consume isCropReset: boolean;
26  @Consume @Watch('adjustLayout') screenWidth: number;
27  @Consume @Watch('adjustLayout') screenHeight: number;
28  @Consume cropEdit: PhotoEditCrop;
29  @State displayHeight: number = Constants.NUMBER_0;
30  @State displayWidth: number = Constants.NUMBER_0;
31  setting: RenderingContextSettings = new RenderingContextSettings(true);
32  context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.setting);
33  @Consume('verticalScreen') isVerticalScreen: boolean;
34  private stateMenuSize: number = ScreenManager.getInstance().getStatusBarHeight();
35  private preTouch: number = Constants.NUMBER_0;
36  private prePinch: number = Constants.NUMBER_0;
37  private onCropResetClickedFunc: Function = (): void => this.onCropResetClicked()
38
39  onCropResetClicked(): void {
40    Log.debug(TAG, 'crop reset is clicked');
41    this.cropEdit.reset();
42    this.isCropReset = this.cropEdit.couldReset();
43    this.broadCast.emit(Constants.RULER_BAR_INTI, []);
44  }
45
46  onTouchStart(event: TouchEvent): void {
47    let x = event.touches[0].x;
48    let y = event.touches[0].y;
49    if (event.type == TouchType.Down) {
50      this.preTouch = new Date().getTime();
51      this.cropEdit.onTouchStart(x, y);
52    } else if (event.type == TouchType.Move) {
53      let now = new Date().getTime();
54      if (now - this.preTouch >= Constants.TIMEOUT) {
55        this.preTouch = now;
56        this.cropEdit.onTouchMove(x, y);
57      }
58    } else if (event.type == TouchType.Up || event.type == TouchType.Cancel) {
59      this.cropEdit.onTouchEnd();
60      this.isCropReset = this.cropEdit.couldReset();
61    } else {
62      Log.info(TAG, 'touch other event');
63    }
64  }
65
66  onPinchGestureStart(event: GestureEvent): void {
67    Log.debug(TAG, 'cropMode onPinchGestureStart called');
68    this.prePinch = new Date().getTime();
69    let x = 0;
70    let y = 0;
71    if (this.isVerticalScreen) {
72      x = event.pinchCenterX;
73      y = event.pinchCenterY - Constants.TOP_BAR_SIZE - this.stateMenuSize;
74    } else {
75      x = event.pinchCenterX - Constants.TOOL_BAR_SIZE;
76      y = event.pinchCenterY - Constants.TOP_BAR_SIZE - this.stateMenuSize;
77    }
78    this.cropEdit.onPinchStart(x, y, event.scale);
79  }
80
81  onPinchGestureUpdate(event: GestureEvent): void {
82    let now = new Date().getTime();
83    if (now - this.prePinch >= Constants.TIMEOUT) {
84      this.prePinch = now;
85      this.cropEdit.onPinchUpdate(event.scale);
86    }
87  }
88
89  onPinchGestureEnd(): void {
90    Log.debug(TAG, 'cropMode onPinchGestureEnd called');
91    this.cropEdit.onPinchEnd();
92    this.isCropReset = this.cropEdit.couldReset();
93  }
94
95  aboutToAppear(): void {
96    Log.debug(TAG, 'Photo CropImageShow called');
97
98    this.broadCast.on(Constants.CROP_RESET_CLICKED, this.onCropResetClickedFunc);
99    this.adjustLayout();
100  }
101
102  adjustLayout(): void {
103    this.displayHeight = this.screenHeight;
104    this.displayWidth = this.screenWidth;
105    this.cropEdit.setCanvasSize(this.displayWidth, this.displayHeight);
106  }
107
108  aboutToDisappear(): void {
109    this.cropEdit.setCanvasReady(false);
110    this.broadCast.off(Constants.CROP_RESET_CLICKED, this.onCropResetClickedFunc);
111  }
112
113  build() {
114    Flex({
115      direction: this.isVerticalScreen ? FlexDirection.Column : FlexDirection.Row,
116      alignItems: ItemAlign.Center,
117      justifyContent: FlexAlign.Center
118    }) {
119      Canvas(this.context)
120        .onReady(() => {
121          this.cropEdit.setCanvasContext(this.context);
122          this.cropEdit.setCanvasReady(true);
123        })
124    }
125    .onTouch((event?: TouchEvent) => {
126      this.onTouchStart(event as TouchEvent);
127    })
128    .gesture(
129      PinchGesture()
130        .onActionStart((event?: GestureEvent) => {
131          this.onPinchGestureStart(event as GestureEvent);
132        })
133        .onActionUpdate((event?: GestureEvent) => {
134          this.onPinchGestureUpdate(event as GestureEvent);
135        })
136        .onActionEnd((): void => {
137          this.onPinchGestureEnd();
138        })
139    )
140    .width(this.screenWidth)
141    .height(this.screenHeight)
142  }
143}