在小程序中對圖片進行縮放時發生的問題記錄

在作一個小程序時，須要實現不規則的熱點，分別用於實現各自的點擊事件。

一、第一種作法：在圖片加載完成後，計算實際縮放比例，而後從新計算每一個熱區的尺寸和位置。

<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 });
      }
    });
  }

結果是不管如何，計算出來的縮放比例都是錯誤的。無解。

 

二、第二種作法：將全部的熱區都放在一個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%;
}

然而沒有任何效果。

 

三、第三種作法：將圖片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自動搞定！

 

 

最終結論：

一、小程序中返回的屏幕寬度單位並非px

二、rpx。。。真香！