在小程序中对图片进行缩放时发生的问题记录

在做一个小程序时，需要实现不规则的热点，分别用于实现各自的点击事件。

1、第一种做法：在图片加载完成后，计算实际缩放比例，然后重新计算每个热区的尺寸和位置。

<view class="rmq_bg">
  <image src="../../asset/img/main_bg.jpg" mode="widthFix" bindload="drawLink"></image>
  <view class="btns">
    <view class="btn btn-{{index}}" id="{{link.id}}" style="width:{{link.wid}}px;height:{{link.hei}}px;left:{{link.x}}px;top:{{link.y}}px" bindtap="click" wx:for="{{links}}" wx:for-item="link" wx:key="id"></view>
  </view>
</view>

然后在 drawLink 事件方法中：

  drawLink: function (evt) {
    let oWid = evt.detail.width;
    let nWid = 0;
    let scale = 1;
    let olinks = this.data.links;
    let nlinks = [];
    wx.getSystemInfo({
      success: (res) => {
        nWid = res.windowHeight;
        scale = nWid / oWid;
        olinks.forEach((link, ind) => {
          let n = { id: link.id };
          n.wid = link.wid * scale;
          n.hei = link.hei * scale;
          n.x = link.x * scale;
          n.y = link.y * scale;
          nlinks.push(n);
        });this.setData({ links: nlinks });
      }
    });
  }

结果是无论如何，计算出来的缩放比例都是错误的。无解。

 

2、第二种做法：将所有的热区都放在一个view里，然后图片加载完成后，计算实际的缩放比例，最后利用 transform: scale() 对view进行缩放。

 

<view class="rmq_bg">
  <image src="../../asset/img/main_bg.jpg" mode="widthFix" bindload="drawLink"></image>
  <view class="btns" style="transform: scale({{scale}})">
    <view class="btn btn-{{index}}" id="{{link.id}}" style="width:{{link.wid}}px;height:{{link.hei}}px;left:{{link.x}}px;top:{{link.y}}px" bindtap="click" wx:for="{{links}}" wx:for-item="link" wx:key="id"></view>
  </view>
</view>

 

然后在 drawLink 事件方法中：

 

  drawLink: function (evt) {
    let oWid = evt.detail.width;
    let nWid = 0;
    let scale = 1;
    let olinks = this.data.links;
    wx.getSystemInfo({
      success: (res) => {
        nWid = res.windowHeight;
        scale = nWid / oWid;this.setData({ scale });
      }
    });
  }

 

结果跟第一种一样，计算出来的缩放比例 scale 就是不对。

在css中，设置了缩放中心点：

.btns{
  left: 0px;
  top: 0px;
  transform-origin: 0% 0%;
}

然而没有任何效果。

 

3、第三种做法：将图片PS成 750 * 1000的，然后在每个热区的css中统一使用rpx单位：

<view class="rmq_bg">
  <image src="../../asset/img/main_bg.jpg" mode="widthFix"></image>
  <view class="btns">
    <view class="btn btn-{{index}}" id="{{link.id}}" style="width:{{link.wid}}rpx;height:{{link.hei}}rpx;left:{{link.x}}rpx;top:{{link.y}}rpx" bindtap="click" wx:for="{{links}}" wx:for-item="link" wx:key="id"></view>
  </view>
</view>

结果：大功告成，压根就不需要计算什么缩放比例，rpx自动搞定！

 

 

最终结论：

1、小程序中返回的屏幕宽度单位并不是px

2、rpx。。。真香！