[文章]【图片旋转】jack_606 Codelab记录帖

阅读量0
0
0
目标:鸿蒙模拟器上实现图片旋转
1.核心MainAbilitySlice2类文件如下:
  1. public class MainAbilitySlice2 extends AbilitySlice{
  2.     private static final HiLogLabel LABEL_LOG = new HiLogLabel(3, 0xD001100, "MainAbilitySlice");

  3.     Image image;
  4.     PixelMap imagePixelMap;
  5.     Button whirlImageBtn;
  6.     Button cropImageBtn;
  7.     Button scaleImageBtn;
  8.     Button mirrorImageBtn;
  9.     private int whirlCount = 0;
  10.     private boolean isCorp = false;
  11.     private boolean isScale = false;
  12.     private boolean isMirror = false;
  13.     private float scaleX = 1.0f;
  14.     @Override
  15.     public void onStart(Intent intent) {
  16.         super.onStart(intent);
  17.         super.setUIContent(ResourceTable.Layout_ability_mains);
  18.         initView();
  19.     }

  20.     private void initView() {
  21.         if (findComponentById(ResourceTable.Id_whirl_image) instanceof Button) {
  22.             whirlImageBtn = (Button) findComponentById(ResourceTable.Id_whirl_image);
  23.         }
  24.         if (findComponentById(ResourceTable.Id_crop_image) instanceof Button) {
  25.             cropImageBtn = (Button) findComponentById(ResourceTable.Id_crop_image);
  26.         }
  27.         if (findComponentById(ResourceTable.Id_scale_image) instanceof Button) {
  28.             scaleImageBtn = (Button) findComponentById(ResourceTable.Id_scale_image);
  29.         }
  30.         if (findComponentById(ResourceTable.Id_mirror_image) instanceof Button) {
  31.             mirrorImageBtn = (Button) findComponentById(ResourceTable.Id_mirror_image);
  32.         }
  33.         if (findComponentById(ResourceTable.Id_image) instanceof Image) {
  34.             image = (Image) findComponentById(ResourceTable.Id_image);
  35.         }
  36.         whirlImageBtn.setClickedListener(new ButtonClick());
  37.         cropImageBtn.setClickedListener(new ButtonClick());
  38.         scaleImageBtn.setClickedListener(new ButtonClick());
  39.         mirrorImageBtn.setClickedListener(new ButtonClick());
  40.     }

  41.     private class ButtonClick implements Component.ClickedListener {
  42.         @Override
  43.         public void onClick(Component component) {
  44.             int btnId = component.getId();
  45.             switch (btnId) {
  46.                 case ResourceTable.Id_whirl_image:
  47.                     // 旋转图片
  48.                     whirlCount++;
  49.                     isCorp = false;
  50.                     isScale = false;
  51.                     isMirror = false;
  52.                     imagePixelMap = getPixelMapFromResource(ResourceTable.Media_fengjing);
  53.                     image.setPixelMap(imagePixelMap);
  54.                     break;
  55.                 case ResourceTable.Id_crop_image:
  56.                     // 剪裁图片
  57.                     whirlCount = 0;
  58.                     isCorp = !isCorp;
  59.                     isScale = false;
  60.                     isMirror = false;
  61.                     imagePixelMap = getPixelMapFromResource(ResourceTable.Media_fengjing);
  62.                     image.setPixelMap(imagePixelMap);
  63.                     break;
  64.                 case ResourceTable.Id_scale_image:
  65.                     // 缩放图片
  66.                     whirlCount = 0;
  67.                     isCorp = false;
  68.                     isScale = !isScale;
  69.                     isMirror = false;
  70.                     imagePixelMap = getPixelMapFromResource(ResourceTable.Media_fengjing);
  71.                     image.setPixelMap(imagePixelMap);
  72.                     break;
  73.                 case ResourceTable.Id_mirror_image:
  74.                     // 镜像图片
  75.                     whirlCount = 0;
  76.                     isCorp = false;
  77.                     isScale = false;
  78.                     isMirror = true;
  79.                     imagePixelMap = getPixelMapFromResource(ResourceTable.Media_fengjing);
  80.                     mirrorImage(imagePixelMap);
  81.                     image.setPixelMap(imagePixelMap);
  82.                     break;
  83.                 default:
  84.                     break;
  85.             }
  86.         }
  87.     }

  88.     private void mirrorImage(PixelMap pixelMap) {
  89.         scaleX = -scaleX;
  90.         image.addDrawTask(
  91.             new Component.DrawTask() {
  92.                 @Override
  93.                 public void onDraw(Component component, Canvas canvas) {

  94.                     if (isMirror) {
  95.                         isMirror = false;
  96.                         PixelMapHolder pmh = new PixelMapHolder(pixelMap);
  97.                         canvas.scale(
  98.                             scaleX,
  99.                             1.0f,
  100.                             (float) pixelMap.getImageInfo().size.width / 2,
  101.                             (float) pixelMap.getImageInfo().size.height / 2);
  102.                         canvas.drawPixelMapHolder(
  103.                             pmh,
  104.                             0,
  105.                             0,
  106.                             new Paint());
  107.                     }
  108.                 }
  109.             });
  110.     }

  111.     /**
  112.      * 通过图片ID返回PixelMap
  113.      *
  114.      * [url=home.php?mod=space&uid=3142012]@param[/url] resourceId 图片的资源ID
  115.      * [url=home.php?mod=space&uid=1141835]@Return[/url] 图片的PixelMap
  116.      */
  117.     private PixelMap getPixelMapFromResource(int resourceId) {
  118.         InputStream inputStream = null;

  119.         try {
  120.             // 创建图像数据源ImageSource对象
  121.             inputStream = getContext().getResourceManager().getResource(resourceId);
  122.             ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions();
  123.             srcOpts.formatHint = "image/jpg";
  124.             ImageSource imageSource = ImageSource.create(inputStream, srcOpts);

  125.             // 设置图片参数
  126.             ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
  127.             // 旋转
  128.             decodingOptions.rotateDegrees = 90 * whirlCount;
  129.             // 缩放
  130.             decodingOptions.desiredSize = new Size(isScale ? 512 : 0, isScale ? 384 : 0);

  131.             // 剪裁
  132.             decodingOptions.desiredRegion = new Rect(0, 0, isCorp ? 1024 : 0, isCorp ? 400 : 0);



  133.             decodingOptions.desiredPixelFormat = PixelFormat.ARGB_8888;
  134.             return imageSource.createPixelmap(decodingOptions);
  135.         } catch (IOException e) {
  136.             HiLog.info(LABEL_LOG, "IOException");
  137.         } catch (NotExistException e) {
  138.             HiLog.info(LABEL_LOG, "NotExistException");
  139.         } finally {
  140.             if (inputStream != null) {
  141.                 try {
  142.                     inputStream.close();
  143.                 } catch (IOException e) {
  144.                     HiLog.info(LABEL_LOG, "inputStream IOException");
  145.                 }
  146.             }
  147.         }
  148.         return null;
  149.     }

  150.     @Override
  151.     public void onActive() {
  152.         super.onActive();
  153.     }

  154.     @Override
  155.     public void onForeground(Intent intent) {
  156.         super.onForeground(intent);
  157.     }

  158. }
复制代码
2.base>graphic文件夹下新建background_button.xml文件内容如下:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.        ohos:shape="rectangle">
  4.     <corners
  5.         ohos:radius="40"/>
  6.     <solid
  7.         ohos:color="#e9e9e9"/>
  8. </shape>
复制代码
3.Layout_ability_mains.xml布局文件:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:orientation="vertical">

  7.     <DirectionalLayout
  8.         xmlns:ohos="http://schemas.huawei.com/res/ohos"
  9.         ohos:height="match_content"
  10.         ohos:width="match_content"
  11.         ohos:layout_alignment="horizontal_center"
  12.         ohos:orientation="horizontal"
  13.         ohos:top_margin="20vp">

  14.         <Button
  15.             ohos:id="$+id:whirl_image"
  16.             ohos:height="match_content"
  17.             ohos:width="match_content"
  18.             ohos:background_element="$graphic:background_button"
  19.             ohos:padding="12vp"
  20.             ohos:right_margin="5vp"
  21.             ohos:text="旋转"
  22.             ohos:text_size="20vp"
  23.             ohos:top_margin="10vp">
  24.         </Button>

  25.         <Button
  26.             ohos:id="$+id:crop_image"
  27.             ohos:height="match_content"
  28.             ohos:width="match_content"
  29.             ohos:background_element="$graphic:background_button"
  30.             ohos:left_margin="5vp"
  31.             ohos:padding="12vp"
  32.             ohos:text="剪裁"
  33.             ohos:text_size="20vp"
  34.             ohos:top_margin="10vp">
  35.         </Button>

  36.         <Button
  37.             ohos:id="$+id:scale_image"
  38.             ohos:height="match_content"
  39.             ohos:width="match_content"
  40.             ohos:background_element="$graphic:background_button"
  41.             ohos:left_margin="5vp"
  42.             ohos:padding="12vp"
  43.             ohos:text="缩放"
  44.             ohos:text_size="20vp"
  45.             ohos:top_margin="10vp">
  46.         </Button>

  47.         <Button
  48.             ohos:id="$+id:mirror_image"
  49.             ohos:height="match_content"
  50.             ohos:width="match_content"
  51.             ohos:background_element="$graphic:background_button"
  52.             ohos:left_margin="5vp"
  53.             ohos:padding="12vp"
  54.             ohos:text="镜像"
  55.             ohos:text_size="20vp"
  56.             ohos:top_margin="10vp"/>
  57.     </DirectionalLayout>

  58.     <Image
  59.         ohos:id="$+id:image"
  60.         ohos:height="match_content"
  61.         ohos:width="match_content"
  62.         ohos:image_src="$media:fengjing"
  63.         ohos:layout_alignment="horizontal_center"
  64.         ohos:top_margin="20vp">
  65.     </Image>

  66. </DirectionalLayout>
复制代码
4.编译运行模拟器最终实现效果如下:


screenshot_2021041404.png
screenshot_2021041403.png
screenshot_2021041402.png
screenshot_2021041401.png

回帖

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
链接复制成功,分享给好友