UIView改變邊框寬度中間內容大小不變

2022-09-03 22:36:26 字數 2918 閱讀 2777

最近有個需求是,保證中間圓大小不變,動態改變邊線寬度。這裡比較簡單的方法有兩種:view和uibezierpath

//view

uiview *view1 = [[uiview

alloc] initwithframe:cgrectmake(10, 100, 100, 100)];

view1.backgroundcolor= [uicolor

redcolor

];view1.layer.cornerradius= 50;

view1.clipstobounds = yes;

view1.layer.bordercolor= [uicolor

greencolor

].cgcolor;

view1.layer.borderwidth= 10;

[self.view

addsubview:view1];

uiview *view2 = [[uiview

alloc] initwithframe:cgrectmake(200, 100, 120, 120)];

view2.backgroundcolor= [uicolor

redcolor

];view2.layer.cornerradius= 60;

view2.clipstobounds = yes;

view2.layer.bordercolor= [uicolor

greencolor

].cgcolor;

view2.layer.borderwidth= 20;

view2.center = cgpointmake(255, 150);

[self.view

addsubview:view2];

//這裡保證填充大小不變  view的寬、高的增量和cornerradius的增量、borderwidth的增量比為:2:1:1

uiview *view3 = [[uiview

alloc] initwithframe:cgrectmake(10, 250, 100, 100)];

view3.backgroundcolor= [uicolor

redcolor

];view3.layer.cornerradius= 50;

view3.clipstobounds = yes;

[self

.view

addsubview

:view3];

//貝塞爾曲線

uibezierpath *path=[uibezierpath bezierpath];

[path addarcwithcenter:cgpointmake(60, 150) radius:50 startangle:2 endangle:m_pi*2+2

clockwise:yes];

cashapelayer *layer1=[cashapelayer layer];

layer1.path=path.cgpath;

layer1.fillcolor = [uicolor redcolor].cgcolor;

layer1.strokecolor = [uicolor greencolor].cgcolor;

layer1.linewidth=10;

[self.view.layer addsublayer:layer1];

uibezierpath *path1=[uibezierpath bezierpath];

[path1 addarcwithcenter:cgpointmake(250, 150) radius:55 startangle:2 endangle:m_pi*2+2

clockwise:yes];

cashapelayer *layer2=[cashapelayer layer];

layer2.path=path1.cgpath;

layer2.fillcolor = [uicolor redcolor].cgcolor;

layer2.strokecolor = [uicolor greencolor].cgcolor;

layer2.linewidth=20;

[self.view.layer addsublayer:layer2];

//這裡要保證中間填充部分大小不變的情況下,改變linewidth,linewidth的增量與radius增量的比例為2:1

這裡需要注意的就是:

對view的操作 borderwidth的大小不影響view的frame。當borderwidth增大時,view的frame不變,那麼中間部分的直徑就會減小;

對path的操作 linewidth的大小會影響檢視的frame。當linewidth增大時,view的frame會增大linewidth,這樣只增加linewidth的大小,中間部分直徑不變

vue中 拖動元素邊框 改變元素寬度

先上效果圖 如圖所示,通過拖動來改變表單的寬度。但實際上,這邊並不是表單的邊框,而是乙個單獨的元件。通過監聽滑鼠的down,move以及up事件。我們可以單獨的寫個元件handle.vue。監聽事件並this.emit將值傳給父元件,父元件通過傳過來的值來動態的修改需要改變寬度的元素。如效果圖所示,...

xib中設定圓角,邊框寬度,邊框顏色等

xcode 版本 7.0 可以在runtime attributes 裡設定,新增系統沒有提供的但在class中有提供的屬性,但是type提供的型別有限,不是所有的引數型別都有 例如 cgcolorref 這樣的話,就想辦法將其轉換為type提供型別 如 calayer 重新新增一屬性borderu...

UIView設定圓角 邊框和陰影

我們經常需要對view進行圓角設定,有些view是通過設定屬性來設定圓角,一般需要用修改view的layer屬性。1 直接通過已有屬性設定圓角 對於uibutton uitextfield等,可以通過對已有屬性的設定來顯示圓角。uibutton button uibutton buttonwitht...