在做一個小程式時，需要實現不規則的熱點，分別用於實現各自的點選事件。

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。。。真香！