1

I am developing a Mac app, I want to draw a view like a radar, I find no method to draw gradient color along the arc. The existing method only draw gradient towards one direction.

matzone
  • 5,703
  • 3
  • 17
  • 20
6 1
  • 1,074
  • 1
  • 10
  • 14
  • gradient drawing is always a costly affair, it shuold be used with a purpose. in your case you can use an image. – Anoop Vaidya Jun 01 '13 at 08:50
  • 1
    How about creating an image in photoshop that looks like your radar and simply rotate it? – pmk Jun 01 '13 at 09:01
  • I don't want to use image, because the size of the radar view will change – 6 1 Jun 01 '13 at 09:19
  • http://stackoverflow.com/questions/1266179/how-do-i-add-a-gradient-to-the-text-of-a-uilabel-but-not-the-background/4558480#4558480 – SAMIR RATHOD Jun 01 '13 at 10:12
  • There's probably a way to get the fuzzy trailing effect with core animation effects. – uchuugaka Jun 01 '13 at 12:30
  • @AnoopVaidya: Drawing images, especially rotated (so no straight-across copy or composite), ain't cheap, either. – Peter Hosey Jun 01 '13 at 21:33
  • @PeterHosey: after seeing your sample I came to know "His actual requirement". I was thinking just a cirlce with a gradient, something darker in center and lighter in border. So you are correct(as always) rotation isn't cheap eithr. – Anoop Vaidya Jun 02 '13 at 04:29

2 Answers2

5

What you want is an angle gradient. I've written a Core Image filter that generates an angle gradient; give it an opaque color (e.g., green) for the start color and the completely-transparent version of that color for the middle and end colors.

Angle gradient with green, transparent green, and transparent green.

(The filter's output is actually infinite in extent and centered at the origin, so you'll need to mask it out to a circle and use an affine transform at one level or another to get it into the right position.)

Extra credit: In the kernel code for that filter (near the start of the .m), there's a line that starts the gradient at straight-up (90°) rather than straight-right. You could change the code, both of the filter and of the kernel, to make this a parameter (like inputStartColor et al) that you could vary over time, using a CABasicAnimation or something similar.

Peter Hosey
  • 95,783
  • 15
  • 211
  • 370
0

You'll need to use a combination of axial and radial gradients and probably also some clipping paths. You can find all of this documented here.

You can also use colorWithPatternImage: to stroke any lines you're drawing.

Wain
  • 118,658
  • 15
  • 128
  • 151