I have two CIImages. I'm trying to apply a CGAffineTransformation to the top image, and then pass it through along with the background image to the CIFilter for blending, but my resulting image seems to show the top image moving around (I just want it rotated on the spot).
I'm also having the same problem when scaling (the position of the top image seems to change).
What am I missing?
So after lots of digging, turns out my problem was due to the rotation point. This question/answer helped a lot.
CGContext rotation
Related
I am using CIContext method - (void)drawImage:(CIImage *)im inRect:(CGRect)dest fromRect:(CGRect)src to draw my image to screen. But I need to implement zoom-in/zoom-out method. How could I achieve it? I think zoom-in could be achieved increasing dest rect, because apple docs says:
The image is scaled to fill the destination rectangle.
But what about zoom-out? Because if dest rectangle is scaled down, then image is drawn in it's actual size, but only part of image is visible then (part that fits in dest rectangle).
What could you suggest?
You may try using this for image resizing (zooming). Hope this helps you.
Take a look at this little toy app I made
It's to demonstrate the NSImage version of your CIContext method:
- (void)drawInRect:(NSRect)dstRect
fromRect:(NSRect)srcRect
operation:(NSCompositingOperation)op
fraction:(CGFloat)delta
I did this to find out exactly how the rects relate to each other. It's interactive, you can play with the sliders and move/zoom the images. Not a solution, but it might help you work things out.
You can use CIFilter to resize your CIImage before drawing. Quartz Composer comes with a good example of using this filter. Just look up the description of the Image Resize filter in QC.
EDIT:
Another good filter for scaling is CILanczosScaleTransform. There is a snippet demonstrating basic usage.
When i draw a large image (say 1000x1000 pixel) using drawInRect method with size say 200x200 pixel and again i use drawInRect method to draw the image to its original size (1000x1000 pixel) does the resolution affect by using this ? Does the resolution decreases by drawing large image into small and again that same image to large image ?
Hopefully I've gotten your question correct in my head.
If you take an image bigger than 200x200 pixels and draw it into a 200x200 pixel rectangle, it'll get scaled down and lose most of its detail. If you then take the resultant image and try to draw it in a bigger rectangle it'll just get scaled up. So, to answer you're question, yes. It'll look blurry as hell. It's no different than resizing an image down in a graphics editor then blowing it back up to its original size. The loss of detail is permanent; there's no way to know what was lost in the transition down.
I've created a canvas within which I display an image that is clipped when it goes over the edges. I can do this fine with a square shaped frame, however the frame I want to use is the one below. Is there any way I can clip the image inside the frame without having to add a non transparent square border around the image, i.e. just using the black line that I've already drawn? (on iPad)
You'll need to use Core Graphics and Quartz to handle this sort of clipping/graphics manipulation.
http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/Introduction/Introduction.html#//apple_ref/doc/uid/TP30001066
If you're using UIBezierPath, you may be able to achieve the clipping you're after using the following process
http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_paths/dq_paths.html#//apple_ref/doc/uid/TP30001066-CH211-TPXREF101
Convert your UIBezierPath to a CGPath
Get your image into a CGContext
Add your CGPath to the context via CGContextAddPath
Clip your context using CGContextClip
Alternatively, if you don't want to be messing with paths (and depending on whether this technique is suitable for your situation, your description of the issue makes it hard to tell), it might be worth using image masking to achieve the effect you're after. See the first link and look under "Bitmap Images and Image Masks".
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.
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.