APP——uniApp針對圖片獲取節點並標識

demo

<template>
  <view>
    <view class="warp">
      <image
        :id="ImgId"
        @click="mouseClick"
        class="image"
        src="../../../static/image/bg_login.png"
      ></image>
      <view v-for="(point, index) in filterPoints" :key="index">
        <view class="point" :style="{ left: point.x + 'px', top: point.y + 'px' }">
          {{ index + 1 }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ImgId: Math.random()
        .toString(36)
        .substr(2),
      filterPoints: []
    };
  },
  methods: {
    mouseClick(e) {
      console.log('x', e.detail.x);
      console.log('y', e.detail.y);
      this.createPoint({ x: e.detail.x, y: e.detail.y });
    },
    createPoint({ x, y }) {
      uni
        .createSelectorQuery()
        .in(this)
        .select(`#${this.ImgId}`)
        .boundingClientRect(data => {
          console.log('得到佈局位置信息' + JSON.stringify(data));
          console.log('節點離頁面頂部的距離爲' + data.top);
          let _x = x - data.left;
          let _y = y - data.top;
          if (_x > 0 && _y > 0) {
            this.filterPoints.push({
              x: _x,
              y: _y
            });
          }
        })
        .exec();
    }
  }
};
</script>

<style lang="scss" scoped>
.warp {
  position: relative;
  width: 400rpx;
  height: 200rpx;
  .image {
    width: 400rpx;
    height: 200rpx;
  }
  .point {
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: red;
    font-size: 20rpx;
    font-weight: 200;
    color: #ffffff;
    width: 30rpx;
    height: 30rpx;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

 

呈現的效果：