I'm working on an iPhone app that has some non-rectangular UI elements. Currently, I'm subclassing UIView, and in drawRect I'm using a CGPathRef to draw black border and a color-filled interior.
I'd like to make these items look more like "buttons", though, so I'd like to have some of the same sort of "glass effects" that are used on e.g. the icons for an iPhone app (when you don't set UIPrerenderedIcon to true), or in other buttons.
I hunted around, and found this, which seems to be close to what I need:
Gradients on UIView and UILabels On iPhone
But I'm having difficulty figuring out how to clip the gradient to my shape.
It seems like the mask property on the view would be the right place to go, which seems like it would call for me to create a new CALayer object, with the clipping somehow applied to it.
I'm hoping there's some nice convenience function for doing this, though if I need to write something more complicated, that's OK, too. I'm just having difficulty figuring out how to apply the path as a mask. I'm unsure if I need to create a new drawing context and draw the path into it? And then use CGContextClip?
I think I've got a lot of the right pieces figured out, I'm just having difficulty understanding how to assemble them.
Could someone please point me in the right direction? (I'm happy to read more in the docs, just point me in the right direction, please.)
You can create a CAShapeLayer and set its path to your CGPathRef. Then set the mask property of a CAGradientLayer to your shapeLayer.
Related
Hey so I'm pretty new to ObjC and coding in general. Essentially I want to make a circle move across a UIBezier path (close to a sin function) one 'unit' every hour and make its shadow small and yellow, then brigger and white, then small and dim again as it moves up and then down the curve. The crest of the sin function should be midday (noon), and the 'tails' of the curve should midnight on both sides. Is this even possible? And where can I find the resources to help me? Couldn't seem to find anything online to help me since I don't know what I need to achieve this. Thanks!
You use the CAKeyFrameAnimation class to move the view along a path. You create a path, and animate the position property of the view's layer. An example of this is in Apple's Core Animation documentation in the "Using a Keyframe Animation to Change Layer Properties" section. The other things you want to do with the shadow, can be done with CABasicAnimation. You can animate a shadow's color, offset, radius, path, and opacity.
I'm working on an iPad application and that's my problem:
I elaborated an algorithm to know if a point is inside a polygon, in an image. So I need when touching the Image, to know the coordinates of the touched point and then do an action using those coordinates (an NSLog to make the example easy), the problem is that I can't use an IBAction on an UIImageView, and so can't recover the point's coordinates. Thanks for any help
I think at first you have to make polygon which fit to your image. And then you can use touchesBegan:withEvent: to get the coordinate of touch point and judge whether the point is inside of polygon or not.
Here is similar question like yours.
How to get particular touch Area?
I think this is a little difficult work, so maybe you would better use cocos2d library which have collision judgement function.
http://box2d.org/forum/viewtopic.php?f=9&t=7487
But also I think iOS is well constructed for handling touch, so this is beneficial effort for you.
I have been looking for the solution on the web for a long time. Most tutorials are fairly simple about adding shadow to a UIView. I also noticed that if we add a shadow to an UIImageView. The shadow shape could perfectly fit the shape of the content image if the image itself has alpha channel in it. Say for example, if the image is an animal with transparent background, the shadow shape is also the same as that animal (not a rectangle shadow as same as UIImageView frame).
But these are not enough. What I need to do is to add some changes to the shadow so it may have some rotation angle and compressed (squeezed or shift) effect so that looks like the sunlight comes from a certain spot.
To demonstrate what I need, I upload 2 images below, which I captured from the Google Map App created by Apple. You can imagine the Annotation Pin is an image which has the Pin shape, so the shadow is also "pin shaped", but it is not simply "offset" with a CGSize, you can see the top of the shadow is shifted right about 35 degrees and slightly squeezed the height.
When we tap and hold and pin, the shadow is also animated away from the pin, so I believe that such shadow can be made programmably.
The best shadow tutorial I can found so far is http://nachbaur.com/blog/fun-shadow-effects-using-custom-calayer-shadowpaths But unfortunately, that cannot make this effect.
If anyone know the answer or know any better words to search for, please let me know. Thank you.
(Please note that the shape of the image is dynamic in the App, so using any tool like Photoshop to pre-render the shadow is not an option.)
In order to create dynamic effects like this, you have to use Core Graphics. It's incredibly powerful once you know how to use it. Basically you need to set a skew transform on the context, set up a shadow and draw the image. You will probably have to use transparency layers as well.
It doesn't sound like you can use CALayer shadows, since that is meant to solve a specific use-case. The approach Apple takes with the pin marks on the map is to have two separate images that are created ahead of time (e.g. in Photoshop) and they position them within the map relative to a reference point.
If you really do need to do this at run-time, it should still be possible by using either Core Graphics or ImageKit. To get a blurred shadow appearance, you can use the kCICategoryBlur CIFilter. You can then convert the image to grayscale. And to get that compressed look you just need to resize and skew the image.
Once you have two separate images, you can either take the CGImageRef for the shadow image and can set that as the content of another sublayer, or you can add it as a separate view.
If you know what all the shapes are, you could just render a shadow image in Photoshop or something.
Im not sure how else I should approach it, but if I was to (in my mac application) have a grid of NSViews, which the user can change the colour of each, is it possible to then translate this, so now I have been given a colour for each pixel by the user, make this into an exportable image?
I honestly can't think of how else to do this. I don't want to go ahead an realise I have taken a rather foolish path.
The idea is I will have a grid of squares which the user can paint, a colour in each square, a square representing a pixel in the final image. So they paint with like a paint bucket filling each one, then export it into an actual image file.
Any help much appreciated, thanks.
A grid of NSViews sounds really heavy for what you're doing. Why not write one single custom view that checks the mouse position and modifies the data appropriately? Then you'd write a custom drawing method to fill the custom view, and you could use the same exact draw method to write to an NSImage which you could export.
You'll need to do a bit o' math. For each "pixel", call -set on the appropriate NSColor, then use NSBezierPath's -fillRect method. It may help you to get out a pencil & paper to figure out the math for the rect origins & sizes.
Check http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CocoaDrawingGuide/Introduction/Introduction.html for help if you've never done custom drawing before. It's really not that bad, just takes a little reading. :)
I know similar questions have been asked before, so don't get snarky and link to previous answers. The reason I am repeating this is that none of the answers have worked.
I have a UIWebView, and I want to draw a pretty drop-shadow behind it. I have tried subclassing and using some CoreGraphics goodness in drawRect:, but to no avail. Can anyone point me in the right direction? Thanks.
You could place a UIImageView under the UIScrollView with a slight offset, and give the image view a shadowy-looking image.
In this case, it would be convenient to use the stretchableImageWithLeftCapWidth:topCapHeight: method of UIImage to get a shadow image that can have nicely blurred edges and corners without distorting if you alter its size.
I think the usual quartz shadows are hard to apply to a UIWebView since you don't really have access to the raw drawing code, which would be the best place to plug that in.
Addendum Here's a sample drop shadow image:
. It has 4 pixel cap size all around, for use with the above stretchableImage method, and an alpha of 80% (so it's 20% transparent in the middle, tapering out at the edges). Feel free to use it. They're easy to make with a selection + feathering in your favorite graphics app.