HarmonyOS 鸿蒙Next中【快应用】图片放大预览功能的实现

HarmonyOS 鸿蒙Next中【快应用】图片放大预览功能的实现 【关键词】

放大、image、background-position

【问题背景】

快应用中并没有直接的放大图片预览的功能，然而是可以利用现有的功能去实现图片的放大预览功能的。这样在快应用中浏览页面内容遇到图片时，遇到一些小图，觉得图片内容是不错的，就可以点击图片局部地方，放大查看图片的部分细节，提升用户体验。

【解决方案】

实现上主要分为两部分：

一、获取要展示的局部图片；

这个是比较好实现的，我们只要实时获取在图片上滑动时的一个X，Y坐标，这个可以用touchmove事件返回的offsetX和offsetY来获取。

cke_2568.png

二、显示放大的局部图片；

这里是使用一个div块 + background的各个属性来实现的。

background-image:用来展示图片（一张原图）；

background-size：设置背景图大小来选择放大的倍数；image大小是500500，该值设置的10001000，即图片被放大了4倍。

background-position：设置背景图展示的位置属性，即展示局部放大后的图片；此处是动态填入处理后的touchmove事件返回的XY坐标，需要将值取反，如下所示：

this.positionX = 0 - e.changedTouches[0].offsetX;
this.positionY = 0 - e.changedTouches[0].offsetY;

细节部分：滑动超过图片的范围时，就显示对应的四个角的位置。

实现代码：

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <text class="title">图片放大预览功能，点击图片后，在图片上滑动</text>
    <div>
      <image id="imgid" class="img" src="/Common/logo.png" ontouchmove="move" ontouchend="moveEnd"></image>
    </div>
    <div class="preview" show="{{display}}" style="background-position: {{positionX}} {{positionY}};"></div>
  </div>
</template>

<style>
  .container {
    flex-direction: column;
    align-items: center;
  }

  .title {
    font-size: 50px;
  }

  .img {
    width: 500px;
    height: 500px;
  }

  .preview {
    width: 500px;
    height: 500px;
    background-image: url(/Common/logo.png);
    background-size: 1000px 1000px;
    margin-top: 10px;
  }
</style>

<script>
  module.exports = {
    data: {
      display: false,
      positionX: 0,
      positionY: 0,
    },
    onInit() {
      this.$page.setTitleBar({
        text: '图片预览',
        textColor: '#ffffff',
        backgroundColor: '#007DFF',
        backgroundOpacity: 0.5,
        menu: true
      });
    },
    move(e) {
      this.display = true
      if (e.changedTouches[0].offsetX < 500 && e.changedTouches[0].offsetX > 0) {
        this.positionX = 0 - e.changedTouches[0].offsetX;
      }
      if (e.changedTouches[0].offsetY < 500 && e.changedTouches[0].offsetY > 0) {
        this.positionY = 0 - e.changedTouches[0].offsetY;
      }
    },
    moveEnd() {
      this.display = false
    }
  }
</script>

更多关于HarmonyOS 鸿蒙Next中【快应用】图片放大预览功能的实现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next中【快应用】图片放大预览功能的实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，实现快应用的图片放大预览功能，可以通过以下步骤：

  1. 引入组件：使用<image>标签加载图片，并设置onclick事件。
  2. 弹窗组件：使用<dialog>组件创建弹窗，用于显示放大后的图片。
  3. 样式设置：通过CSS设置弹窗的样式，确保图片居中显示，并添加背景遮罩。
  4. 事件处理：在onclick事件中，控制弹窗的显示与隐藏，实现点击图片后放大预览的效果。

示例代码：

<image src="image_url" onclick="showPreview()"></image>
<dialog id="previewDialog">
  <image src="image_url" style="width: 100%; height: 100%;"></image>
</dialog>

<script>
  function showPreview() {
    document.getElementById('previewDialog').show();
  }
</script>

通过以上步骤，即可在快应用中实现图片的放大预览功能。

回到顶部