• 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
38  onCropResetClicked(): void {
39    Log.debug(TAG, 'crop reset is clicked');
40    this.cropEdit.reset();
41    this.isCropReset = this.cropEdit.couldReset();
42    this.broadCast.emit(Constants.RULER_BAR_INTI, []);
43  }
44
45  onTouchStart(event: TouchEvent): void {
46    let x = event.touches[0].x;
47    let y = event.touches[0].y;
48    if (event.type == TouchType.Down) {
49      this.preTouch = new Date().getTime();
50      this.cropEdit.onTouchStart(x, y);
51    } else if (event.type == TouchType.Move) {
52      let now = new Date().getTime();
53      if (now - this.preTouch >= Constants.TIMEOUT) {
54        this.preTouch = now;
55        this.cropEdit.onTouchMove(x, y);
56      }
57    } else if (event.type == TouchType.Up || event.type == TouchType.Cancel) {
58      this.cropEdit.onTouchEnd();
59      this.isCropReset = this.cropEdit.couldReset();
60    } else {
61      Log.info(TAG, 'touch other event');
62    }
63  }
64
65  onPinchGestureStart(event: GestureEvent): void {
66    Log.debug(TAG, 'cropMode onPinchGestureStart called');
67    this.prePinch = new Date().getTime();
68    let x = 0;
69    let y = 0;
70    if (this.isVerticalScreen) {
71      x = event.pinchCenterX;
72      y = event.pinchCenterY - Constants.TOP_BAR_SIZE - this.stateMenuSize;
73    } else {
74      x = event.pinchCenterX - Constants.TOOL_BAR_SIZE;
75      y = event.pinchCenterY - Constants.TOP_BAR_SIZE - this.stateMenuSize;
76    }
77    this.cropEdit.onPinchStart(x, y, event.scale);
78  }
79
80  onPinchGestureUpdate(event: GestureEvent): void {
81    let now = new Date().getTime();
82    if (now - this.prePinch >= Constants.TIMEOUT) {
83      this.prePinch = now;
84      this.cropEdit.onPinchUpdate(event.scale);
85    }
86  }
87
88  onPinchGestureEnd(): void {
89    Log.debug(TAG, 'cropMode onPinchGestureEnd called');
90    this.cropEdit.onPinchEnd();
91    this.isCropReset = this.cropEdit.couldReset();
92  }
93
94  aboutToAppear(): void {
95    Log.debug(TAG, 'Photo CropImageShow called');
96    this.onCropResetClicked = this.onCropResetClicked.bind(this);
97    this.broadCast.on(Constants.CROP_RESET_CLICKED, this.onCropResetClicked);
98    this.adjustLayout();
99  }
100
101  adjustLayout(): void {
102    this.displayHeight = this.screenHeight;
103    this.displayWidth = this.screenWidth;
104    this.cropEdit.setCanvasSize(this.displayWidth, this.displayHeight);
105  }
106
107  aboutToDisappear(): void {
108    this.cropEdit.setCanvasReady(false);
109    this.broadCast.off(Constants.CROP_RESET_CLICKED, this.onCropResetClicked);
110  }
111
112  build() {
113    Flex({
114      direction: this.isVerticalScreen ? FlexDirection.Column : FlexDirection.Row,
115      alignItems: ItemAlign.Center,
116      justifyContent: FlexAlign.Center
117    }) {
118      Canvas(this.context)
119        .onReady(() => {
120          this.cropEdit.setCanvasContext(this.context);
121          this.cropEdit.setCanvasReady(true);
122        })
123    }
124    .onTouch((event) => {
125      this.onTouchStart(event);
126    })
127    .gesture(
128      PinchGesture()
129        .onActionStart((event: GestureEvent) => {
130          this.onPinchGestureStart(event);
131        })
132        .onActionUpdate((event: GestureEvent) => {
133          this.onPinchGestureUpdate(event);
134        })
135        .onActionEnd(() => {
136          this.onPinchGestureEnd();
137        })
138    )
139    .width(this.screenWidth)
140    .height(this.screenHeight)
141  }
142}