ImageKnife/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets

/*
 * Copyright (C) 2021 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
import {ImageKnifeOption} from '@ohos/libraryimageknife'
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
import {ImageKnife} from '@ohos/libraryimageknife'
import {RotateImageTransformation} from '@ohos/libraryimageknife'
import ArkWorker from '@ohos.worker'
import worker from '@ohos.worker'
@Entry
@Component
struct TestImageKnifeOptionChangedPage {

  svgUrl:string = ''
  @State imageKnifeOption1: ImageKnifeOption =
    {
      loadSrc: $r('app.media.jpgSample'),

      placeholderSrc: $r('app.media.icon_loading'),
      errorholderSrc: $r('app.media.icon_failed'),

    };


  build() {
    Scroll() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Flex({direction:FlexDirection.Row}){
           Button('本地jpg')
          .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.jpgSample'),

                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),

              };

           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('png')
          .onClick(()=>{
             this.imageKnifeOption1 =  {
               loadSrc: $r('app.media.pngSample'),

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),

             };

           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('bmp')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: $r('app.media.bmpSample'),

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),

             };

           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('webp')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: $r('app.media.jpgSample'),

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };

           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('svg')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: $r('app.media.svgSample'),

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };

           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('gif')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: $r('app.media.gifSample'),

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };

           }).margin({left:5}).backgroundColor(Color.Blue)
        }
        .margin({top:15})
        Flex({direction:FlexDirection.Row}){
           Button('网络jpg')
          .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',

                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed')
              };
           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('png')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };
           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('bmp')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: 'https://img-blog.csdn.net/20140514114029140',

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };
           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('webp')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };
           }).margin({left:5}).backgroundColor(Color.Blue)

          Text("请先设置SVG图片的url地址")
          TextArea({ placeholder: '请输入SVG图片的url地址' })
            .placeholderColor("rgb(0,0,35)")
            .placeholderFont({ size: 20, weight: 100, family: 'cursive', style: FontStyle.Italic })
            .textAlign(TextAlign.Center)
            .caretColor(Color.Blue)
            .height(40)
            .width(400)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontFamily("sans-serif")
            .fontStyle(FontStyle.Normal)
            .fontColor(Color.Red)
            .onChange((value: string) => {
             this.svgUrl = value
            })

          Button('svg')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: this.svgUrl,

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };
           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('gif')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };
           }).margin({left:5}).backgroundColor(Color.Blue)

          Button("dpg")
            .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://img13.360buyimg.com/n1/jfs/t1/220646/38/10395/30916/61d6e061E1a6d91c8/c0a9a67e726dd7a4.jpg.dpg",

                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed')
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
        }
        .margin({top:15})

        Text('下面为展示图片区域').margin({top:5})
        Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
            .width(300)
            .height(300)
        }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)


      }
    }
    .width('100%')
    .height('100%')
  }

  aboutToAppear() {

  }
  aboutToDisappear(){

  }
}