canvas做的圓角視窗(有陰影)
傳統的寫圓角方式主要有兩種方法,一種是做背景圖、另一種是用很多個不同透明度或者明暗不同的畫素點圍成乙個圓角。第一種的話比較容易實現,但需要切圖;第二種網上主要有以下這幾個做得很不錯的:
1. curvycorners www.curvycorners.net
2. nifty corners
3. anti-aliased-nifty-corners
4. rounded-corners
5. rounded_corners
第5個是綜合前面幾個的結晶。
最近在寫一套web ui元件做到視窗的時候在想,有沒另外的方法來實現圓角呢?既不用也不用乙個1畫素的div來拼。後來找資料時發現用html5的元素canvas可以畫圖,另外還有個mootools的ui框架也是用同樣的方式實現的,所以翻了下資料後自己也動手做了一下,大家看這種方法會不會比和拼畫素的實現方法好呢?
最終做出來的效果如圖(附demo):
注:drag類是從網上拿來的,作者好像是cloudgamer
呼叫:
var width = 500;
var height = 250;
var radius = [5,5,5,5];//圓角半徑:左上,左下,右下,右上
var title = "kui web元件之容器";
var content = "s圓角半徑:左上,左s圓角半徑:左上,";
window.onload = function()
document.getelementbyid('closebtn').onclick = function()
var drag = new drag("container", ,
onmove: function(),
onstop: function()
});
}
QT 設定視窗陰影,設定視窗圓角
qt開發過程中,新增過自定義標題欄後,因為設定了 setwindowflags qt framelesswindowhint 屬性,widget介面後面陰影沒有了。現在使用paint的方法繪製陰影和視窗圓角,一方面能設定陰影,一方面可解決設定的視窗圓角後,仍殘留四個小角的問題。廢話不說 上 先設定屬...
設定view的圓角 邊框 陰影
在ios開發中,任何可見檢視都是繼承於uiview的。繼承體系中,大部分uiview的屬性適用於其任何孩子。而uiview的layer屬性可以繪製uiview的各種效果。其實我們看到的view的動畫實際上也是layer在繪製。objc view plain copy cornerview layer...
WPF學習 最大化有陰影的無邊框窗體
畫兩個按鈕,希望執行時只顯示乙個按鈕,另乙個按鈕隱藏。用到 visibility collapsed 隱藏按鈕,且不為它保留位置。horizontalalignment right template verticalalignment top width 45 height 42 最小化 最大化 關...