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 Constants from '../utils/constant'; 17 18@Extend(Button) function locationButton() { 19 .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 20 .fontWeight(FontWeight.Medium) 21 .fontSize(Constants.TEXT_SMALLER_FONT_SIZE) 22 .height(Constants.LOCATION_BUTTON_HEIGHT) 23 .borderRadius(Constants.LOCATION_BUTTON_RADIUS) 24} 25 26@Component 27export struct LocationCanvas { 28 @Link locationFlag: number; 29 30 build() { 31 Column() { 32 Image($r('app.media.img_location_map')) 33 .opacity($r('app.float.opacity_location')) 34 .width(Constants.FULL_WIDTH) 35 .height(Constants.FULL_HEIGHT) 36 .scale({ x: ((this.locationFlag == Constants.LOCATION_UPGRADE) || (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)) 37 ? Constants.LOCATION_CANVAS_ZOOM_SCALE : Constants.LOCATION_CANVAS_INITIAL_SCALE, 38 y: ((this.locationFlag == Constants.LOCATION_UPGRADE) || (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)) 39 ? Constants.LOCATION_CANVAS_ZOOM_SCALE : Constants.LOCATION_CANVAS_INITIAL_SCALE }) 40 .animation({ 41 duration: Constants.LOCATION_ANIMATION_DURATION, // Animation duration 42 curve: Curve.Smooth, // The animation curve 43 playMode: PlayMode.Normal // The animation mode 44 }) 45 Image($r('app.media.ic_public_gps_filled')) 46 .fillColor($r('sys.color.ohos_id_color_emphasize')) 47 .width(Constants.LOCATION_ICON_WIDTH) 48 .height(Constants.LOCATION_ICON_HEIGHT) 49 .position({ x: Constants.LOCATION_ICON_POSITION_X, y: Constants.LOCATION_ICON_POSITION_Y }) 50 .opacity(((this.locationFlag == Constants.LOCATION_UPGRADE) || (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)) ? 1 : 0) 51 .scale({ x: ((this.locationFlag == Constants.LOCATION_UPGRADE) || (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)) ? 1 : 0.8, 52 y: ((this.locationFlag == Constants.LOCATION_UPGRADE) || (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)) ? 1 : 0.8 }) 53 .animation({ 54 duration: Constants.LOCATION_ANIMATION_DURATION / 2, // Animation duration 55 delay: this.locationFlag == Constants.LOCATION_BOTH_PRECISE ? (Constants.LOCATION_ANIMATION_DURATION / 2) : 0, 56 curve: Curve.Smooth, // The animation curve 57 playMode: PlayMode.Normal // The animation mode 58 }) 59 Circle({ width: Constants.LOCATION_CIRCLE_DIA, height: Constants.LOCATION_CIRCLE_DIA }) 60 .position({ x: Constants.LOCATION_CIRCLE_POSITION_X, y: Constants.LOCATION_CIRCLE_POSITION_Y }) 61 .fill($r('app.color.location_circle_color')) 62 .fillOpacity(Constants.LOCATION_CIRCLE_OPACITY) 63 .stroke($r('app.color.location_circle_color')) 64 .scale({ x: ((this.locationFlag == Constants.LOCATION_UPGRADE) || (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)) ? 0 : 1, 65 y: ((this.locationFlag == Constants.LOCATION_UPGRADE) || (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)) ? 0 : 1 }) 66 .animation({ 67 duration: Constants.LOCATION_ANIMATION_DURATION, // Animation duration 68 curve: Curve.Smooth, // The animation curve 69 playMode: PlayMode.Normal // The animation mode 70 }) 71 Row() { 72 if (this.locationFlag == Constants.LOCATION_BOTH_PRECISE) { 73 Button($r('app.string.precise_location_on')) 74 .locationButton() 75 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 76 .onClick(() => { this.locationFlag = Constants.LOCATION_BOTH_FUZZY }) 77 } 78 if (this.locationFlag == Constants.LOCATION_BOTH_FUZZY) { 79 Button($r('app.string.precise_location_off')) 80 .locationButton() 81 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 82 .onClick(() => { this.locationFlag = Constants.LOCATION_BOTH_PRECISE }) 83 } 84 }.position({ x: 0, y: 0 }) 85 .width(Constants.FULL_WIDTH) 86 .height(Constants.FULL_HEIGHT) 87 .alignItems(VerticalAlign.Top) 88 .justifyContent(FlexAlign.Center) 89 .padding({ top: Constants.LOCATION_BUTTON_POSITION_Y }) 90 }.width(Constants.FULL_WIDTH) 91 .height(Constants.LOCATION_CANVAS_HEIGHT) 92 .margin({ top: Constants.LOCATION_CANVAS_MARGIN_TOP, bottom: Constants.LOCATION_CANVAS_MARGIN_BOTTOM }) 93 .clip(true) 94 } 95} 96