2011-03-11 184 views
2

我試圖做一個NSScrollView用剪切的邊角,類似於Twitter的應用程序剪輯路徑:我怎樣才能得到NSScrollView尊重

enter image description here

我有一個NSScrollView子類,添加以下代碼:

- (void)drawRect:(NSRect)dirtyRect { 
    NSBezierPath *pcath = [NSBezierPath bezierPathWithRoundedRect:[self bounds] xRadius:kDefaultCornerRadius yRadius:kDefaultCornerRadius]; 
    [path setClip]; 

    [super drawRect:dirtyRect]; 
} 

我預計NSScrollView的內容有圓角,但它不尊重剪輯路徑。我怎樣才能做到這一點?




UPDATE &澄清
我知道如何使一個自定義NSScroller,我知道如何使它透明覆蓋。我所要求的只是如何使NSSCrollView卡在其角落,包括它所包含的一切。 NSScrollView位於NSView之內,其背景可能會發生變化,這意味着視圖疊加以僞造圓角不是選項。

+0

drawRect聲明的超級實現可能會設置新聞剪輯。嘗試逐個繪製部件,而不是調用超級部件,看看它是否會改變任何內容。 – sosborn 2011-03-11 03:10:45

+0

你的意思是畫出contentView和documentView自己,而不是要求super做到這一點?看起來我不得不重新實現所有的NSScrollView滾動邏輯來做到這一點。我希望有一種方式,而不是重新發明輪子。 – coneybeare 2011-03-11 03:16:52

+0

查看NSScroller的文檔。通常一個NSScrollView將有兩個NSScrollers,一個x和一個y。 NSScroller類公開了繪製方法。如果你要像Twitter客戶端一樣的外觀,你將不得不繼承NSScroller的子類。 – sosborn 2011-03-11 05:32:17

回答

4

您可以將面膜視圖的層:

[myScrollView setWantsLayer: YES]; 
[myScrollView layer].mask = ...; 

掩碼是另一個CALayer。因此,在這種情況下,您應創建一個CALayer,將其背景顏色設置爲不透明,將其邊界設置爲與滾動視圖匹配,併爲其指定一個cornerRadius,例如8.0

結果將是滾動視圖及其所有內容似乎被蒙上了一個圓角,圓角半徑爲8px。

+0

這似乎工作,但我需要在角落更多的靈活性。我只需要兩個圓角,上面的舍入代碼就是一個例子。不僅如此,但是當我在scrollview上執行此操作時,所有內部內容都停止繪製,並且我不確定如何在不使用drawRect的情況下重新創建它。 – coneybeare 2011-03-14 20:33:23

+0

您可以將遮罩層的內容屬性設置爲幾乎任何內容。看一看Core Animation Cookbook,它會幫助你使用Core Animation繪圖。 (不幸的是,網址不方便。) – 2011-03-14 22:31:05

+0

這個方法很有效,但會帶來很多額外的問題(nsview在滾動視圖中閃爍,在修剪過的角落顯示奇怪的構件以及實時調整圖層大小的問題)。我希望有另一個答案,因爲這樣做所需的努力似乎相當大。以下是我在此實現中看到的問題的簡要屏幕錄像:http://screencast.com/t/wKt5vCjoWPu – coneybeare 2011-03-16 04:32:32

3

您是否嘗試過重寫

- (BOOL)isOpaque { 
    return NO; 
} 

,並設置滾動視圖-setDrawsBackground:NO和剛剛離開的看法,而不削波和只畫邊角與[NSColor clearColor],因爲這也將清除底層的顏色和模擬輪效應。

+0

剛剛閱讀您的更新要求「可能會改變的背景」,所以我想我的答案已經過時。 – 2011-03-18 13:19:48

6

多擺弄之後,我才發現,通過簡單地給它一個背襯層和設置提供了層的拐角半徑NSScrollView的,可向有圓角你也做同樣的它的內部NSClipView。兩者都是必需的,現在有意義,因爲它實際上是在NSScrollView的文檔視圖中提供可視窗口的剪輯視圖。

NSScrollView * scrollView = ...; 

// Give the NSScrollView a backing layer and set it's corner radius. 
[scrollView setWantsLayer:YES]; 
[scrollView.layer setCornerRadius:10.0f]; 

// Give the NSScrollView's internal clip view a backing layer and set it's corner radius. 
[scrollView.contentView setWantsLayer:YES]; 
[scrollView.contentView.layer setCornerRadius:10.0f]; 
+0

但請注意,這似乎不適用於包含NSTextView的NSScrollView。在這種情況下,我們需要恢復到屏蔽層方法。 – Dalmazio 2012-04-03 10:11:47