1/* 2 * Copyright (c) 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 16// Zoom component 17// For changes in components - can only be integers 1 to 6 18import cameraDemo from 'libentry.so' 19import Logger from '../model/Logger'; 20 21const TAG: string = 'SlidePage'; 22 23@Component 24export struct SlidePage { 25 // Slide slider 26 @State outSetValueOne: number = 1; 27 // Slide slider movement value 28 @State sliderTextPos: string = '-10'; 29 30 slideChange(value: number) { 31 cameraDemo.setZoomRatio(value); 32 switch (value) { 33 case 1: 34 this.sliderTextPos = '-10'; 35 break; 36 case 2: 37 this.sliderTextPos = '70'; 38 break; 39 case 3: 40 this.sliderTextPos = '145'; 41 break; 42 case 4: 43 this.sliderTextPos = '220'; 44 break; 45 case 5: 46 this.sliderTextPos = '300'; 47 break; 48 case 6: 49 this.sliderTextPos = '380'; 50 break; 51 default: 52 break; 53 } 54 } 55 56 build() { 57 58 Column() { 59 Row() { 60 Text('1x').fontColor(Color.White); 61 Text('6x').fontColor(Color.White); 62 }.justifyContent(FlexAlign.SpaceBetween).width('95%') 63 64 Text(this.outSetValueOne + 'x') 65 .fontColor('#182431') 66 .width('100px') 67 .height('50px') 68 .borderRadius(25) 69 .backgroundColor(Color.White) 70 .fontSize(14) 71 .textAlign(TextAlign.Center) 72 .position({ x: this.sliderTextPos, y: '-5' }) 73 .zIndex(9) 74 75 Row() { 76 Slider({ 77 value: this.outSetValueOne, 78 min: 1, 79 max: 6, 80 step: 1, 81 style: SliderStyle.OutSet 82 }).showSteps(false) 83 .trackColor('rgba(255,255,255,0.6)') 84 .selectedColor($r('app.color.theme_color')) 85 .onChange((value: number) => { 86 let val = Number(value.toFixed(2)); 87 this.slideChange(val); 88 this.outSetValueOne = val; 89 console.info('value:' + val + 'this.sliderTextPos:' + this.sliderTextPos); 90 }) 91 }.width('100%') 92 93 } 94 .height('60') 95 .width('32.5%') 96 .position({ x: '35%', y: '3%' }) 97 } 98}