Wie erstellt man am besten solch ein Control in Cocoa für OS X (Circular Slider + Buttons in bestimmter Form)

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Wie erstellt man am besten solch ein Control in Cocoa für OS X (Circular Slider + Buttons in bestimmter Form)

    Ich habe ein Steuerelement in .Net (C#, WPF). Das würde ich gerne in Cocoa für OS X nachbauen.
    Mir ist nicht ganz klar wie ich das am besten bewerkstellige. Das Grüne auf dem Bild ist ein Button. Auf der blauen Oberfläche lässt sich der graue Knopf mit der Maus rotieren. In der Mitte ist ebenfalls ein Button zum zentrieren.

    Angefangen bei einem Button in einer bestimmten Form. Die Form kann ich zeichnen, soweit ist es kein Problem. Wie mache ich aber, dass die Klicks nur auf der gezeichneten Oberfläche und nicht auf der ganzen View ausgelöst werden?

    Bei dem Circular Slider war der erste Gedanke den NSSliderCell vom Typ NSCircularSlider im Aussehen zu verändern. Ich brauche aber einen Slider der sich nur Außen am Ring dreht.
    Dateien

    • control.png

      (26,68 kB, 171 mal heruntergeladen, zuletzt: )

  • Hallo,

    ich würde das einfach alles mit jeweils einem NSView machen.
    D.h. die vier Knöpfe und den Drehboppel alles getrennt.

    Mit -mouseDown: und -mouseMoved: würde ich einfach die x und y Werte in Grad umrechnen und das View entsprechend um den Mittelpunkt drehen.

    Einzige Rechenübung ist, ob die Maus im transparenten Bereich ist. Also z.B. beim linken Knopf in den 1/4-Kreisbogen.
    Ich weiß nicht, ob Du das mit einem Bilchen realisierst, oder selbst zeichnest. Schaue da mal nach dem -hitTest:
    Vielleicht ist es einfach zu "bescheißen", wenn Du einfach "fragst", ob das View an der Stelle transparent ist.

    Viele Grüße

  • Mit einzelnen Views könnte es schwer werden, wenn der Klick zwar im View, aber eigentlich ausserhalb der entsprechenden Fläche des jeweiligen Views landet. Dann müsste man den Klick quasi an den "richtigen" View weiterreichen.

    Daher würde es sich anbieten, alles mit einem View zu machen. Wenn Du die einzelnen Flächen per NSBezierPath zeichnest, dann kannst Du auch sehr leicht per containsPoint: feststellen, ob ein Klick in der jeweiligen Fläche gelandet ist und darauf dann entsprechend reagieren.

  • Hm... Ohne Erfahrung scheint es eine umständliche und langwierige Aufgabe zu sein.
    In WPF (.NET) sind die Buttons einfache Ellipse Elemente die durch Clipping beschnitten und gedreht sind. Diese Elemente reagieren auch nur in dem gezeichneten Bereich auf die Klicks.
    Zum Rotieren werden ebenfalls zwei Ellipse Elemente verwendet mit ein wenig Logik für die Bewegung. Aber nichts wildes.

  • Es ist wahrscheinlich, dass die User von Windows auf Mac wechseln. Andersrum ehe nicht. :)

    Ich glaube den Aufwand ist es auf jeden Fall nicht wert.

    Mir ist aber aufgefallen, dass der NSCircularSlider nicht Retina fähig ist. Der sieht verpixelt aus.

  • Aufwand? Das ist absolut easy - sei nicht so faul :D

    Ich habe grad nen Test gebaut und ca. sieben Minuten dafür benötigt.
    Es hat sogar Trackpad support. Siehe unten.

    Das Ganze muss natürlich gepimpt und optimiert werden.
    Für die Schleifarbeit brauch man vielleicht nochmals 20 Minuten.

    Aber als solches ist das keine Raketenwissenschaft.
    NSReadPixel halt bei mir in der Eile nicht funktioniert, deshalb lese ich den Teil von einem geränderten Bild aus.
    Das kann man deutlich schöner umsetzen.

    Aber als solches funktioniert es genau wie gewünscht.
    Das Ding dreht sich nur, wenn man auf dem Kreisding rummacht bzw. mit dem Trackpad die Rotationsgeste ausführt.

    Viele Grüße

    C-Quellcode

    1. -(instancetype)initWithFrame:(NSRect)frame
    2. {
    4. // …
    6. self = [super initWithFrame:frame];
    8. // …
    10. if(self == nil)
    11. {
    13. return nil;
    15. }
    17. // …
    19. [self prepare:self];
    21. // …
    23. return self;
    25. // …
    27. }
    29. -(NSView*)hitTest:(NSPoint)aPoint
    30. {
    32. // …
    34. NSRect rect = [self bounds];
    36. // …
    38. NSPoint point = [self convertPoint:aPoint
    39. fromView:nil];
    41. if(NSPointInRect(point, rect) == NO)
    42. {
    44. return (id)[self nextResponder];
    46. }
    48. // …
    50. NSBitmapImageRep *bitmapImageRep = [self bitmapImageRepForCachingDisplayInRect:rect];
    52. if(bitmapImageRep == nil)
    53. {
    55. return (id)[self nextResponder];
    57. }
    59. // …
    61. [bitmapImageRep setSize:rect.size];
    63. [self cacheDisplayInRect:rect
    64. toBitmapImageRep:bitmapImageRep];
    66. // …
    68. NSColor *color = [bitmapImageRep colorAtX:point.x
    69. y:point.y];
    71. if(color == nil)
    72. {
    74. return (id)[self nextResponder];
    76. }
    78. // …
    80. if([color alphaComponent] < 0.1)
    81. {
    83. return (id)[self nextResponder];
    85. }
    87. // …
    89. return [super hitTest:aPoint];
    91. // …
    93. }
    95. #pragma mark Draw
    97. -(void)drawRect:(NSRect)dirtyRect
    98. {
    100. // …
    102. [super drawRect:dirtyRect];
    104. // …
    106. [self drawBackground:self];
    108. // …
    110. [self drawKnob:self];
    112. // …
    114. }
    116. -(BOOL)drawBackground:(id)sender
    117. {
    119. // …
    121. NSRect rect = [self bounds];
    123. if(rect.size.width < 1.0)
    124. {
    126. return NO;
    128. }
    130. if(rect.size.height < 1.0)
    131. {
    133. return NO;
    135. }
    137. // …
    139. NSBezierPath *bezierPath = [NSBezierPath bezierPath];
    141. if(bezierPath == nil)
    142. {
    144. return NO;
    146. }
    148. // …
    150. NSColor *color = [NSColor yellowColor];
    152. if(color == nil)
    153. {
    155. return NO;
    157. }
    159. // …
    161. [color set];
    163. // …
    165. [bezierPath appendBezierPathWithOvalInRect:rect];
    167. [bezierPath stroke];
    169. [bezierPath fill];
    171. // …
    173. return YES;
    175. // …
    177. }
    179. -(BOOL)drawKnob:(id)sender
    180. {
    182. // …
    184. NSRect rect = [self bounds];
    186. if(rect.size.width < 1.0)
    187. {
    189. return NO;
    191. }
    193. if(rect.size.height < 1.0)
    194. {
    196. return NO;
    198. }
    200. // …
    202. rect.origin.x = rect.origin.x + (rect.size.width / 2.0) - 5.0;
    204. rect.size.width = 10.0;
    206. // …
    208. NSBezierPath *bezierPath = [NSBezierPath bezierPath];
    210. if(bezierPath == nil)
    211. {
    213. return NO;
    215. }
    217. // …
    219. NSColor *color = [NSColor blueColor];
    221. if(color == nil)
    222. {
    224. return NO;
    226. }
    228. // …
    230. [color set];
    232. // …
    234. [bezierPath appendBezierPathWithRect:rect];
    236. [bezierPath stroke];
    238. [bezierPath fill];
    240. // …
    242. return YES;
    244. // …
    246. }
    248. #pragma mark Prepare
    250. -(BOOL)prepare:(id)sender
    251. {
    253. // …
    255. NSView *view = self;
    257. if(view == nil)
    258. {
    260. return NO;
    262. }
    264. // …
    266. [view setWantsLayer:YES];
    268. // …
    270. CALayer *layer = [view layer];
    272. if(layer == nil)
    273. {
    275. return NO;
    277. }
    279. // …
    281. [layer setAnchorPoint:CGPointMake(0.5,0.5)];
    283. // …
    285. return YES;
    287. // …
    289. }
    291. #pragma mark Mouse
    293. -(void)mouseDragged:(NSEvent *)theEvent
    294. {
    296. // …
    298. [self rotateWithEvent:theEvent];
    300. // …
    302. }
    304. #pragma mark Rotate
    306. -(void)rotateWithEvent:(NSEvent *)event
    307. {
    309. // …
    311. CALayer *layer = [self layer];
    313. if(layer == nil)
    314. {
    316. return;
    318. }
    320. // …
    322. [layer setAnchorPoint:CGPointMake(0.5, 0.5)];
    324. // …
    326. CGFloat x = [event rotation] / 180.0 * M_PI;
    328. if(x < 0.05)
    329. {
    331. x = 0.05;
    333. }
    335. // …
    337. CATransform3D transform = [layer transform];
    339. // …
    341. transform = CATransform3DRotate(transform, x, 0.0, 0.0, 1.0);
    343. // …
    345. [layer setTransform:transform];
    347. // …
    349. }
    Alles anzeigen