圖片預覽位置亂跳 about pttchrome HOT 2 OPEN

與 #40, #48, & #55 重複。

from pttchrome.

#40 與 #55 初步闡述了該問題發生的原理。以下對其進一步分析。

#55 指出該問題位於函式 getTop()。

（相關的參數 left 與 top 應該會是游標的位置，故以下如此假設）

目前的圖片位置邏輯是：

• 水平位置固定在游標右方 30 CSS 像素處。（爲何不定義 getLeft()？）
• 垂直位置則以 getTop() 函式求出：
  • if (top + height / 2 > pageHeight - 20) {
    「如果頁尾底上方 20 CSS 像素處到游標處之間的空間無法容下圖片的一半原始高度的話」……
    • if (height / 2 < top) { return pageHeight - 20 - height; }
      「如果頁首頂到 游標處 之間的空間容得下圖片的 一半原始高度 的話，就以頁尾底上方 20 CSS 像素處爲 原始圖片底端 顯示圖片」（虫舍？）
      • 理應檢査的是頁首頂到頁尾底間的空間容不容得下整個圖片。
      • 如果圖片已被縮小，那實際的圖片底端就會落在原始圖片底端的上方，且愈縮愈嚴重。
    • (else { return 20; })
      （「否則的話以頁首頂下方 20 CSS 像素處爲圖片頂端顯示圖片」）
  • } else if (top - 20 > height / 2) { return top - height / 2; }
    「如果容得下，且頁首頂下方 20 CSS 像素處到游標處之間的空間也容得下圖片的一半原始高度的話，就以游標位置爲原始圖片中心顯示圖片」
  • return 20;
    「否則的話，以頁首頂下方 20 CSS 像素處爲圖片頂端顯示圖片」

#40 提到，目前的計算方式 (實際上是 getTop()) 是使用圖片未經縮放的原始尺寸計算，如果圖片縮小的話會算錯以圖片中心或底端爲基準時的位置。

　　雖然我不是邏輯學家，但這看起來很複雜對吧？

　　它的理念是讓圖片中心橫軸對齊游標，但以不超出頁緣減 20 CSS 像素的界線爲前提。
　　但我有個更簡單的方案：

const getTop = (top, height) => { 
  const pageHeight = $(window).height(); 
  height = min(0.8 * pageHeight, height); // 可能有些許誤差，先暫時忽略
  return max(20, min(pageHeight - 20 - height, top - height / 2));
};

from pttchrome.