1/* 2 * Copyright (c) 2022 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 router from '@ohos.router'; 17import { NavigationBar } from '../../../common/components/navigationBar' 18 19@Entry 20@Component 21struct ImageSample { 22 private on: string = 'http://image.xtep.com.cn/util/upload/product/202112172037/20211217203719485D6769491555162288862AC9594BC346E.jpg' 23 @State src: string = this.on; 24 @State width: number = 0; 25 @State height: number = 0; 26 @State xWidth: number = 0; 27 @State yHeight: number = 0; 28 @State colOpacity: number = 1; 29 @State Visibility1: string = 'Visible' 30 @State Visibility2: string = 'None' 31 @State Visibility3: string = 'None' 32 @State Visibility4: string = 'None' 33 @State Visibility5: string = 'None' 34 @State Visibility6: string = 'None' 35 @State objectFit: ImageFit = ImageFit.None 36 @State objectRepeat: ImageRepeat = ImageRepeat.NoRepeat 37 @State interpolation: ImageInterpolation = ImageInterpolation.None 38 @State renderMode: ImageRenderMode = ImageRenderMode.Original 39 @State borderStyle: BorderStyle = BorderStyle.Dashed 40 @State align: Alignment = Alignment.Bottom 41 42 build() { 43 Column() { 44 NavigationBar({ title: 'Image' }) 45 Column() { 46 Column() { 47 Column() { 48 Row({ space: 4 }) { 49 Image('/common/test1.jpg') 50 .width('30%') 51 .height('35%') 52 .border({ width: 1 }) 53 .objectFit(ImageFit.Fill) 54 Image('/common/test2.jpg') 55 .alt('/common/test5.jpg') 56 .width('30%') 57 .height('35%') 58 .border({ width: 1 }) 59 .objectFit(ImageFit.Fill) 60 .syncLoad(false) 61 }.margin({ bottom: 10 }) 62 63 Row({ space: 4 }) { 64 Image($r('app.media.svg1a')) 65 .width('30%') 66 .height('35%') 67 .border({ width: 1 }) 68 .objectFit(ImageFit.Fill) 69 Image(this.src) 70 .width('30%') 71 .height('35%') 72 .border({ width: 1 }) 73 .objectFit(ImageFit.Fill) 74 } 75 }.visibility(Visibility[this.Visibility1]) 76 77 Row({ space: 5 }) { 78 Image('/common/test1.jpg') 79 .border({ width: 1 }) 80 .borderStyle(BorderStyle.Dashed) 81 .objectFit(this.objectFit) 82 .width('50%') 83 .height('50%') 84 }.visibility(Visibility[this.Visibility2]) 85 86 Row({ space: 5 }) { 87 Image('/common/test3.png') 88 .border({ width: 1 }) 89 .borderStyle(BorderStyle.Dashed) 90 .renderMode(this.renderMode) 91 .width('30%') 92 .height('30%') 93 Image('/common/test3.png') 94 .border({ width: 1 }) 95 .borderStyle(BorderStyle.Dashed) 96 .sourceSize({ height: this.yHeight, width: this.xWidth }) 97 .objectFit(ImageFit.ScaleDown) 98 .aspectRatio(1) 99 .width('40%') 100 }.visibility(Visibility[this.Visibility3]) 101 102 Row({ space: 5 }) { 103 Image('/common/test3.png') 104 .border({ width: 1 }) 105 .borderStyle(BorderStyle.Dashed) 106 .interpolation(this.interpolation) 107 .width('90%') 108 .height('60%') 109 }.visibility(Visibility[this.Visibility4]) 110 111 Row({ space: 5 }) { 112 Image('') 113 .alt($r('app.media.icon')) 114 .border({ width: 1 }) 115 .borderStyle(BorderStyle.Dashed) 116 .objectRepeat(this.objectRepeat) 117 .objectFit(ImageFit.ScaleDown) 118 .width('40%') 119 .height('50%') 120 }.visibility(Visibility[this.Visibility5]) 121 122 Row({ space: 5 }) { 123 Image('/common/test5.jpg') 124 .objectFit(ImageFit.Cover) 125 .sourceSize({ width: 100, height: 100 }) 126 .width('30%') 127 .height('30%') 128 .onComplete((msg: { 129 width: number, 130 height: number 131 }) => { 132 this.width = msg.width 133 this.height = msg.height 134 }) 135 .onError(() => { 136 console.info('load image fail') 137 }) 138 Image($r('app.media.svg2a')) 139 .border({ width: 1 }) 140 .borderStyle(BorderStyle.Dashed) 141 .width('30%') 142 .height('40%') 143 .objectFit(ImageFit.Contain) 144 .opacity(this.colOpacity) 145 .onFinish(() => { 146 this.colOpacity = 0.3 147 }) 148 }.visibility(Visibility[this.Visibility6]) 149 }.width('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center) 150 } 151 .width('100%') 152 .constraintSize({ minHeight: 218, maxHeight: 402 }) 153 .padding({ left: 12, right: 12, top: 22, bottom: 22 }) 154 155 Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround }) { 156 Button('default') 157 .onClick(() => { 158 this.Visibility1 = 'Visible', this.Visibility2 = 'None', this.Visibility3 = 'None', 159 this.Visibility4 = 'None', this.Visibility5 = 'None', this.Visibility6 = 'None' 160 }) 161 .fontSize('12fp') 162 .borderRadius(14) 163 .fontWeight(FontWeight.Medium) 164 .margin({ bottom: 12 }) 165 Button('objectFit') 166 .onClick(() => { 167 this.Visibility2 = 'Visible', this.Visibility1 = 'None', this.Visibility3 = 'None', 168 this.Visibility4 = 'None', this.Visibility5 = 'None', this.Visibility6 = 'None' 169 }) 170 .fontSize('12fp') 171 .borderRadius(14) 172 .fontWeight(FontWeight.Medium) 173 .margin({ bottom: 12 }) 174 Button('renderMode') 175 .onClick(() => { 176 this.Visibility3 = 'Visible', this.Visibility2 = 'None', this.Visibility1 = 'None', 177 this.Visibility4 = 'None', this.Visibility5 = 'None', this.Visibility6 = 'None' 178 }) 179 .fontSize('12fp') 180 .borderRadius(14) 181 .fontWeight(FontWeight.Medium) 182 .margin({ bottom: 12 }) 183 Button('interpolation') 184 .onClick(() => { 185 this.Visibility4 = 'Visible', this.Visibility2 = 'None', this.Visibility3 = 'None', 186 this.Visibility1 = 'None', this.Visibility5 = 'None', this.Visibility6 = 'None' 187 }) 188 .fontSize('12fp') 189 .borderRadius(14) 190 .fontWeight(FontWeight.Medium) 191 .margin({ bottom: 12 }) 192 Button('objectRepeat') 193 .onClick(() => { 194 this.Visibility5 = 'Visible', this.Visibility2 = 'None', this.Visibility3 = 'None', 195 this.Visibility1 = 'None', this.Visibility4 = 'None', this.Visibility6 = 'None' 196 }) 197 .fontSize('12fp') 198 .borderRadius(14) 199 .fontWeight(FontWeight.Medium) 200 .margin({ bottom: 12 }) 201 Button('event') 202 .onClick(() => { 203 this.Visibility6 = 'Visible', this.Visibility2 = 'None', this.Visibility3 = 'None', 204 this.Visibility1 = 'None', this.Visibility5 = 'None', this.Visibility4 = 'None' 205 }) 206 .fontSize('12fp') 207 .borderRadius(14) 208 .fontWeight(FontWeight.Medium) 209 .margin({ bottom: 12 }) 210 } 211 .width('100%') 212 .backgroundColor('#FFFFFF') 213 .borderRadius(24) 214 .padding(12) 215 .margin({ top: 24 }) 216 217 Scroll() { 218 Column() { 219 Row({ space: FlexAlign.SpaceBetween }) { 220 Text('width') 221 .fontSize('16fp') 222 .opacity(0.5) 223 .fontColor('#182431') 224 .fontWeight(FontWeight.Medium) 225 226 Blank() 227 228 Column() { 229 Text('20%') 230 .fontSize('16fp') 231 .fontColor('#182431') 232 .fontWeight(FontWeight.Medium) 233 .width('50%') 234 .textAlign(TextAlign.End) 235 } 236 } 237 .alignItems(VerticalAlign.Center) 238 .width('100%') 239 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 240 .borderRadius(24) 241 .backgroundColor('#FFFFFF') 242 .visibility(Visibility[this.Visibility1]) 243 .margin({ top: 8 }) 244 245 Row({ space: FlexAlign.SpaceBetween }) { 246 Text('height') 247 .fontSize('16fp') 248 .opacity(0.5) 249 .fontColor('#182431') 250 .fontWeight(FontWeight.Medium) 251 252 Blank() 253 254 Column() { 255 Text('30%') 256 .fontSize('16fp') 257 .fontColor('#182431') 258 .fontWeight(FontWeight.Medium) 259 .width('50%') 260 .textAlign(TextAlign.End) 261 } 262 } 263 .alignItems(VerticalAlign.Center) 264 .width('100%') 265 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 266 .borderRadius(24) 267 .backgroundColor('#FFFFFF') 268 .margin({ top: 8 }) 269 .visibility(Visibility[this.Visibility1]) 270 271 Row({ space: FlexAlign.SpaceBetween }) { 272 Text('objectFit') 273 .fontSize('16fp') 274 .opacity(0.5) 275 .fontColor('#182431') 276 .fontWeight(FontWeight.Medium) 277 Column() { 278 Text(`${this.objectFit == 5 ? 'None' : this.objectFit == 1 ? 'Contain' : 279 this.objectFit == 0 ? 'Fill' : this.objectFit == 2 ? 'Cover' : 'ScaleDown'}`) 280 .fontSize('16fp') 281 .fontColor('#182431') 282 .fontWeight(FontWeight.Medium) 283 .width('50%') 284 .textAlign(TextAlign.End) 285 } 286 .bindMenu([ 287 { 288 value: 'None', 289 action: () => { 290 this.objectFit = ImageFit.None 291 } 292 }, 293 { 294 value: 'Contain', 295 action: () => { 296 this.objectFit = ImageFit.Contain 297 } 298 }, 299 { 300 value: 'Fill', 301 action: () => { 302 this.objectFit = ImageFit.Fill 303 } 304 }, 305 { 306 value: 'Cover', 307 action: () => { 308 this.objectFit = ImageFit.Cover 309 } 310 }, 311 { 312 value: 'ScaleDown', 313 action: () => { 314 this.objectFit = ImageFit.ScaleDown 315 } 316 }, 317 ]) 318 } 319 .alignItems(VerticalAlign.Center) 320 .width('100%') 321 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 322 .borderRadius(24) 323 .backgroundColor('#FFFFFF') 324 .margin({ top: '-8vp' }) 325 .visibility(Visibility[this.Visibility2]) 326 327 Row({ space: FlexAlign.SpaceBetween }) { 328 Text('renderMode') 329 .fontSize('16fp') 330 .opacity(0.5) 331 .fontColor('#182431') 332 .fontWeight(FontWeight.Medium) 333 Column() { 334 Text(`${this.renderMode == 0 ? 'Original' : 'Template'}`) 335 .fontSize('16fp') 336 .fontColor('#182431') 337 .fontWeight(FontWeight.Medium) 338 .width('50%') 339 .textAlign(TextAlign.End) 340 } 341 .bindMenu([ 342 { 343 value: 'Original', 344 action: () => { 345 this.renderMode = ImageRenderMode.Original 346 } 347 }, 348 { 349 value: 'Template', 350 action: () => { 351 this.renderMode = ImageRenderMode.Template 352 } 353 } 354 ]) 355 } 356 .alignItems(VerticalAlign.Center) 357 .width('100%') 358 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 359 .borderRadius(24) 360 .backgroundColor('#FFFFFF') 361 .margin({ top: '-8vp' }) 362 .visibility(Visibility[this.Visibility3]) 363 364 Column() { 365 Text('sourceSize') 366 .fontSize('16fp') 367 .opacity(0.5) 368 .fontColor('#182431') 369 .fontWeight(FontWeight.Medium) 370 Row() { 371 Text('x') 372 .fontSize('16fp') 373 .opacity(0.5) 374 .fontColor('#182431') 375 .fontWeight(FontWeight.Medium) 376 Slider({ 377 value: this.xWidth, 378 min: 0, 379 max: 300, 380 step: 1, 381 style: SliderStyle.OutSet 382 }) 383 .blockColor('#FFFFFF') 384 .trackColor('#182431') 385 .selectedColor('#007DFF') 386 .showSteps(true) 387 .showTips(true) 388 .width('80%') 389 .onChange((value: number) => { 390 this.xWidth = value 391 this.yHeight += 0.001 392 }) 393 Text(this.xWidth.toFixed()) 394 .fontSize('16fp') 395 .opacity(0.5) 396 .fontColor('#182431') 397 .fontWeight(FontWeight.Medium) 398 }.width('80%') 399 } 400 .width('100%') 401 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 402 .borderRadius(24) 403 .backgroundColor('#FFFFFF') 404 .visibility(Visibility[this.Visibility3]) 405 406 Column() { 407 Text('sourceSize') 408 .fontSize('16fp') 409 .opacity(0.5) 410 .fontColor('#182431') 411 .fontWeight(FontWeight.Medium) 412 Row() { 413 Text('y') 414 .fontSize('16fp') 415 .opacity(0.5) 416 .fontColor('#182431') 417 .fontWeight(FontWeight.Medium) 418 Slider({ 419 value: this.yHeight, 420 min: 10, 421 max: 300, 422 step: 1, 423 style: SliderStyle.OutSet 424 }) 425 .blockColor('#FFFFFF') 426 .trackColor('#182431') 427 .selectedColor('#007DFF') 428 .showSteps(true) 429 .showTips(true) 430 .width('80%') 431 .onChange((value: number) => { 432 this.yHeight = value 433 this.xWidth += 0.001 434 }) 435 Text(this.yHeight.toFixed(0)).fontSize(16) 436 }.width('80%') 437 } 438 .width('100%') 439 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 440 .borderRadius(24) 441 .backgroundColor('#FFFFFF') 442 .margin({ top: 8, bottom: 8 }) 443 .visibility(Visibility[this.Visibility3]) 444 445 Row({ space: FlexAlign.SpaceBetween }) { 446 Text('interpolation') 447 .fontSize('16fp') 448 .opacity(0.5) 449 .fontColor('#182431') 450 .fontWeight(FontWeight.Medium) 451 Column() { 452 Text(`${this.interpolation == 0 ? 'None' : this.interpolation == 3 ? 'High' 453 : this.interpolation == 2 ? 'Medium' : 'Low'}`) 454 .fontSize('16fp') 455 .fontColor('#182431') 456 .fontWeight(FontWeight.Medium) 457 .width('50%') 458 .textAlign(TextAlign.End) 459 } 460 .bindMenu([ 461 { 462 value: 'None', 463 action: () => { 464 this.interpolation = ImageInterpolation.None 465 } 466 }, 467 { 468 value: 'High', 469 action: () => { 470 this.interpolation = ImageInterpolation.High 471 } 472 }, 473 { 474 value: 'Medium', 475 action: () => { 476 this.interpolation = ImageInterpolation.Medium 477 } 478 }, 479 { 480 value: 'Low', 481 action: () => { 482 this.interpolation = ImageInterpolation.Low 483 } 484 }, 485 ]) 486 } 487 .alignItems(VerticalAlign.Center) 488 .width('100%') 489 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 490 .margin({ top: '-16vp' }) 491 .borderRadius(24) 492 .backgroundColor('#FFFFFF') 493 .visibility(Visibility[this.Visibility4]) 494 495 Row({ space: FlexAlign.SpaceBetween }) { 496 Text('objectRepeat') 497 .fontSize('16fp') 498 .opacity(0.5) 499 .fontColor('#182431') 500 .fontWeight(FontWeight.Medium) 501 Column() { 502 Text(`${this.objectRepeat == 0 ? 'NoRepeat' : this.objectRepeat == 1 ? 'X' 503 : this.objectRepeat == 2 ? 'Y' : 'XY'}`) 504 .fontSize('16fp') 505 .fontColor('#182431') 506 .fontWeight(FontWeight.Medium) 507 .width('50%') 508 .textAlign(TextAlign.End) 509 } 510 .bindMenu([ 511 { 512 value: 'NoRepeat', 513 action: () => { 514 this.objectRepeat = ImageRepeat.NoRepeat 515 } 516 }, 517 { 518 value: 'X', 519 action: () => { 520 this.objectRepeat = ImageRepeat.X 521 } 522 }, 523 { 524 value: 'Y', 525 action: () => { 526 this.objectRepeat = ImageRepeat.Y 527 } 528 }, 529 { 530 value: 'XY', 531 action: () => { 532 this.objectRepeat = ImageRepeat.XY 533 } 534 }, 535 ]) 536 } 537 .width('100%') 538 .alignItems(VerticalAlign.Center) 539 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 540 .margin({ top: '-16vp' }) 541 .borderRadius(24) 542 .backgroundColor('#FFFFFF') 543 .visibility(Visibility[this.Visibility5]) 544 545 Row({ space: FlexAlign.SpaceBetween }) { 546 Text('onComplete') 547 .fontSize('16fp') 548 .opacity(0.5) 549 .fontColor('#182431') 550 .fontWeight(FontWeight.Medium) 551 Column() { 552 Text('msg.width') 553 .fontSize('16fp') 554 .fontColor('#182431') 555 .fontWeight(FontWeight.Medium) 556 .width('50%') 557 .textAlign(TextAlign.End) 558 } 559 } 560 .alignItems(VerticalAlign.Center) 561 .width('100%') 562 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 563 .margin({ top: '-16vp' }) 564 .borderRadius(24) 565 .backgroundColor('#FFFFFF') 566 .visibility(Visibility[this.Visibility6]) 567 568 Row({ space: FlexAlign.SpaceBetween }) { 569 Text('onFinish') 570 .fontSize('16fp') 571 .opacity(0.5) 572 .fontColor('#182431') 573 .fontWeight(FontWeight.Medium) 574 Column() { 575 Text('opacity') 576 .fontSize('16fp') 577 .fontColor('#182431') 578 .fontWeight(FontWeight.Medium) 579 .width('50%') 580 .textAlign(TextAlign.End) 581 } 582 } 583 .alignItems(VerticalAlign.Center) 584 .width('100%') 585 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 586 .borderRadius(24) 587 .backgroundColor('#FFFFFF') 588 .margin({ top: '-8vp', bottom: 8 }) 589 .visibility(Visibility[this.Visibility6]) 590 }.width('100%') 591 }.width('100%').height('25%') 592 } 593 .width('100%') 594 .height('100%') 595 .alignItems(HorizontalAlign.Center) 596 .justifyContent(FlexAlign.Start) 597 .backgroundColor('#F1F1F5') 598 .padding({ left: '3%', right: '3%', bottom: 10 }) 599 } 600 601 pageTransition() { 602 PageTransitionEnter({ duration: 370, curve: Curve.Friction }) 603 .slide(SlideEffect.Bottom) 604 .opacity(0.0) 605 606 PageTransitionExit({ duration: 370, curve: Curve.Friction }) 607 .slide(SlideEffect.Bottom) 608 .opacity(0.0) 609 } 610}
