返回发烧友论坛
发 帖  

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

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

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

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

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

  92.     private void mirrorImage(PixelMap pixelMap) {
  93.         scaleX = -scaleX;
  94.         image.addDrawTask(
  95.             new Component.DrawTask() {
  96.                 @Override
  97.                 public void onDraw(Component component, Canvas canvas) {

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

  117.     /**
  118.      * 通过图片ID返回PixelMap
  119.      *
  120.      * [url=home.php?mod=space&uid=3142012]@param[/url] resourceId 图片的资源ID
  121.      * [url=home.php?mod=space&uid=1141835]@Return[/url] 图片的PixelMap
  122.      */
  123.     private PixelMap getPixelMapFromResource(int resourceId) {
  124.         InputStream inputStream = null;

  126.         try {
  127.             // 创建图像数据源ImageSource对象
  128.             inputStream = getContext().getResourceManager().getResource(resourceId);
  129.             ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions();
  130.             srcOpts.formatHint = "image/jpg";
  131.             ImageSource imageSource = ImageSource.create(inputStream, srcOpts);

  133.             // 设置图片参数
  134.             ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
  135.             // 旋转
  136.             decodingOptions.rotateDegrees = 90 * whirlCount;
  137.             // 缩放
  138.             decodingOptions.desiredSize = new Size(isScale ? 512 : 0, isScale ? 384 : 0);

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



  145.             decodingOptions.desiredPixelFormat = PixelFormat.ARGB_8888;
  146.             return imageSource.createPixelmap(decodingOptions);
  147.         } catch (IOException e) {
  148.             HiLog.info(LABEL_LOG, "IOException");
  149.         } catch (NotExistException e) {
  150.             HiLog.info(LABEL_LOG, "NotExistException");
  151.         } finally {
  152.             if (inputStream != null) {
  153.                 try {
  154.                     inputStream.close();
  155.                 } catch (IOException e) {
  156.                     HiLog.info(LABEL_LOG, "inputStream IOException");
  157.                 }
  158.             }
  159.         }
  160.         return null;
  161.     }

  163.     @Override
  164.     public void onActive() {
  165.         super.onActive();
  166.     }

  168.     @Override
  169.     public void onForeground(Intent intent) {
  170.         super.onForeground(intent);
  171.     }

  173. }
复制代码
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">

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

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

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

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

  52.         <Button
  53.             ohos:id="$+id:mirror_image"
  54.             ohos:height="match_content"
  55.             ohos:width="match_content"
  56.             ohos:background_element="$graphic:background_button"
  57.             ohos:left_margin="5vp"
  58.             ohos:padding="12vp"
  59.             ohos:text="镜像"
  60.             ohos:text_size="20vp"
  61.             ohos:top_margin="10vp"/>
  62.     </DirectionalLayout>

  64.     <Image
  65.         ohos:id="$+id:image"
  66.         ohos:height="match_content"
  67.         ohos:width="match_content"
  68.         ohos:image_src="$media:fengjing"
  69.         ohos:layout_alignment="horizontal_center"
  70.         ohos:top_margin="20vp">
  71.     </Image>

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


screenshot_2021041404.png
screenshot_2021041403.png
screenshot_2021041402.png
screenshot_2021041401.png
举报

回帖

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