被朋友圈“大字玩法”刷爆后，我科普一下朋友圈圖片顯示規(guī)則！
昨天大字的玩法刷爆朋友圈，大字的技術(shù)并不復(fù)雜，主要技術(shù)就是畫布打印，利用ih5等第三方工具就可以搞定。
朋友圈圖片可以怎么玩？先科普下朋友圈圖片顯示規(guī)則吧。
朋友圈最多可以顯示9張圖片，賤賤之前也分享過九宮格圖片的玩法。當圖片數(shù)量為單張時，會顯示單圖縮略圖。當圖片數(shù)量超過1張時，則有規(guī)律的按方格排列。
當朋友圈僅發(fā)一張照片時，顯示的效果卻是不一樣的。賤賤從朋友圈隨便截了幾張圖，大家仔細對比下。
對比發(fā)現(xiàn)：
圖A是個豎圖，圖片高度很高，預(yù)覽時上下顯示不全；
圖B是個方圖，圖C是個橫圖，圖B圖C寬度一樣；
圖D是個橫圖，寬度比圖B圖C更寬。
昨天刷屏的大字也是個橫圖，就像微信聊天框一樣，有以假亂真的效果。圖片的寬度和上圖D一樣，水平方向幾乎充滿了屏幕寬度。
圖片怎么才可以顯示這么寬？
我們可以初步猜測和圖片的寬高比（寬度/高度）有關(guān)，寬高比越大可能圖片顯示的越寬。
為了驗證這個結(jié)論，賤賤找不同的圖片尺寸實驗一下（圖片模板的右上角和左下角為邊界檢測文字）：
圖片尺寸分別為：
900*900（1:1）
900*600（1.5:1）
900*450（2:1）
900*360（2.5:1）
900*320（2.8125:1）
900*300（3:1），900*270（3.3333:1）
900*225（4:1）
實驗發(fā)現(xiàn)：
假設(shè)圖片寬高比=x
當1≤x≤2.5時，圖片預(yù)覽時寬度一致，且縮略圖和原圖比例一致。ps：此處假設(shè)寬度值為W
當2.5<x≤3時，縮略圖和原圖比例發(fā)生改變，縮略圖寬度也是W，高度為W / 2.5（即縮略圖寬高比為2.5:1），縮略圖水平方向有隱藏，兩端顯示不完整；
當x＞3時，縮略圖和原圖比例發(fā)生改變，此處假設(shè)寬度值為M，M的值大于W，高度為M／3（即縮略圖寬高比為3:1），縮略圖水平方向有隱藏，兩端顯示不完整。
顯然，如果圖片想在水平方向最大程度伸展的話，寬高比應(yīng)該大于3:1
朋友圈九宮格是個圖片控件，上面結(jié)論里的W和M是否存在某種數(shù)學關(guān)聯(lián)呢？
我們再添加兩個變量，假設(shè)4宮格寬度為Q，方格之間間隙為P
計算發(fā)現(xiàn)：
九宮格寬度等于M，即單圖最大伸展長度和九宮格寬度一樣
Q-W＝0.5P，即橫圖一般寬度比四宮格寬度少半個方格間隙
了解了單張橫圖的展示規(guī)則后，豎圖的原理也一樣，你會想出什么樣玩法呢？
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（1條）