最近遇到乙個動畫執行時,文字位置變化的問題。如下圖:
如果你仔細看的話,當星星變小時,文字往下降了幾個畫素。
貌似有點莫名其妙,因為控制項之間並不在同乙個panel布局控制項中,不存在高度限制變化引發此類問題。所以有了如下測試
1. 首先新建了乙個空專案,前面是乙個帶陰影的文字,後面用一張普通迴圈變更它的高度。嘗試了下,還是會移動y軸的畫素
影響很大
2. 後面使用用普通的布局控制項grid代替。依然如此
影響較大
所以此問題不是動畫造成的。
3. 於是,我再新增個按鈕,測試帶陰影的非文字控制項
只有文字被影響了,按鈕不會被影響?
我們使用放大鏡,放大到500%,發現按鈕中的文字,上下位置其實還是會有細微的變化 。
所以,按鈕等控制項其實也是會被影響的。只是幅度較小。
5. 給按鈕設定,被影響文字同樣的字型系列。
按鈕也被影響了。。。所以,是字型原因!那麼,這種字型型別是什麼呢?
當前字型: fontfamily="microsoft yahei bold"。
而上一步操作4中,按鈕的字型型別是預設字型,即為microsoft yahei ui。
所以microsoft yahei bold的影響比microsoft yahei ui大很多?
6. 我們回到只有文字的測試模式
影響較大
影響較小
所以,我們可以得出是y軸位置變化,的確與字型型別有關。
變動很大
變動很小,使用放大鏡500%才能看到細微的變化
通過如上測試,發現只有微軟雅黑ui字型型別,影響較小。並且在步驟6中,測試通的是沒有設定字型型別的,沒有設定字型型別,其實預設是microsoft yahei ui。所以字型型別影響相對較小的是microsoft yahei ui
根據上述的字型型別測試,我們新增倆個文字框,使用microsoft yahei ui作為字型型別,設定字型大小分別為30和60。
通過如上對比,發現字型大小30的文字,受到的影響很明顯。字型為60的文字,受到的影響較小。
綜上,得出的結論是,y軸變化的幅度,與字型型別、字型大小有關。具體的詳細幅度,有待確認~~~
另,我們將高度變換的區域移動下位置,也不會有影響。
測試通過
再嘗試將陰影效果刪除,也不會有影響
測試通過
1.新增乙個文字/按鈕控制項
2.此顯示控制項設定陰影(條件一)
3.此顯示控制項設定字型型別fontfamily(條件二),如下
1 3 4 54.在此顯示控制項的顯示區域,變更其它控制項的高度(條件三)。6
完整案例如下:
1 8 9 10 11 12 13 14 15 16 17 1819
20
21 22
23 24 25 27
28 30 31 32
33
34
35
1 /// 2 /// mainwindow.xaml 的互動邏輯介面顯示:3 ///
4 public partial class mainwindow : window
5
11 12 private void mainwindow_loaded(object sender, routedeventargs e)
13
17 }
按照如上重現步驟,有三個條件才會出現此問題。
1.設定了陰影效果 2.顯示區域有寬高變更 3.字型型別/字型大小是乙個影響幅度因素(影響較小的字型型別與字型大小組合,例如:微軟雅黑ui+字型大小60)
針對這些條件,我們給出規避的解決方案
不設定陰影效果
測試通過
將高度變換的區域移動一點位置,不在帶陰影的控制項顯示區域內。
測試通過
設定乙個字型型別+字型大小的最小影響組合,例如fontfamily="microsoft yahei ui",fontsize=60;
如果需要加粗,可以通過設定fontweight加粗:
影響很小,不用放大鏡500%檢視的話,看不到影響,可以忽略。
注:如上規避措施只是臨時解決方案,如小夥伴們有其它方案或者發現其它根本原因,可以聯絡我~謝謝
UIButton 設定陰影效果
uibutton有的時候須要用 做樣式調整 當中就包含加入陰影 例如以下圖 中登陸 button 此時須要考慮對button的layer進行設定 button layer 設定下面幾個屬性 cornerradius shadowoffset shadowopacity shadowcolor 例如以...
UIButton 設定陰影效果
uibutton有的時候須要用 做樣式調整 當中就包含加入陰影 例如以下圖 中登陸 button 此時須要考慮對button的layer進行設定 button layer 設定下面幾個屬性 cornerradius shadowoffset shadowopacity shadowcolor 例如以...
android文字陰影效果設定
html view plain copy textview android id id tvtext1 android layout width wrap content android layout height wrap content android text text1 android te...