I am trying to create a pseudo-3D square (like a scrabble tile) and I was thinking of faking it with borders. But then I couldn't find a way to set different width for different side.
Is this possible at all? If not, does anyone have any recommendation on how to do this in CALayer?
Oh, one caveat, I am already using shadow, so can't use that to fake the bevel.
Not possible with ordinary CALayer properties. You'd have to inset your layer and draw the different borders in the drawing method, or add a second larger layer to take care of that inside its drawing.
You could possibly do it with the layer's shadow properties, using -shadowOffset to only render it on two sides. However, to make it really nice you probably have to draw it yourself.
Related
I have an NSImageView which contains an image. Is there a simple way to draw a border around just the image (which might be smaller than the NSImageView), and not the entire NSImageView?
[Answering my own question.]
On the off chance that someone comes cross this page looking to get something similar done, a simple way to do it is by using a wrapper view, and setting a border on the inner view.
I'm basically trying to achieve this effect. It can be done with pretty much a PNG with a transparent hole cut through it, then stacked on top of a photo.jpg UIView. OR, I've also seen a method where you can directly create a mask with CGImageMaskCreate. I don't want to use that feature because I want the user to be able to interact with the photo.jpg layer (by moving it, rotating it, etc.):
Its essentially two UIViews stacked directly on top of each other.
However, what if rather than using blue, I wanted to use another color, or even pattern an image with [UIColor colorPatternWithImage:] for the masking layer? I wouldn't want to make a million different PNGs for each case.
Would I need some way to programmatically recreate my mask? Is there some way to convert my mask shapes into code? Any help is appreciated. Thanks
CALayer has a property called mask, which is another CALayer that defines the mask to use. You could use a CAShapeLayer to define the mask, then set that as the mask of another layer that renders your obscuring image/color/pattern/whatever. You could also use a regular CALayer as the mask with your semi-transparent image as the contents, it depends on whether or not you want the ability to customize the size/shape of the hole.
Caveats: CAShapeLayer is slower than normal layers, and mask is slower than non-masking as well. You may need to make sure performance is acceptable for you. You may also want to try out the shouldRasterize flag, though this will only improve performance (at the cost of memory) as long as the layer is static (i.e. not animating).
I'm creating an iphone application. I have this UIView whose content is clipped with a path. I want to add shading and/or shadow to it. What's the best way to do this? For shadow, I tried CGContextSetShadow() but it doesn't seem to have an effect (perhaps it's drawing outside the shown region?) . How about shading? I want it to appear along the path. What's the best way to go about it? Is it to create another narrow clip strip along the original clipping path (if it's possible to have two clip path... ) Or does this need to be done in another CALayer? I am not even sure what that is yet.
You can't add shadows to layers which are clipped or masked. The way I would do this is use two CALayers, one for the clipped content and place this inside another for the shadow which isn't clipped.
I want to implement dialog borders that scale to the size I require the dialog to be. Perhaps there is a better more conventional name for this sort of thing. If there is, if someone would edit the title, that'd be great.
Anyhow, I'd like to do this so I can have dialogs of any size without the visual artifacts that come with scaling border art to small, large, or wacky unproportional dimentions. I have a few ideas on how this is done, but am not sure which is better for iphone. I have a few questions.
1) Should I make a containing view object that basically overloads its drawRect method and draws the images where they should be at their appropriate scale when the method is called, or should I main a containing view object that simply contains 8 UIImageViews? I suspect the latter approach won't work if I need to actively scale the resulting dialog class like in an animation.
1b) If overloading drawRect is the way to go, does someone have some sample code or a link to an example that demonstrates drawing an image directly from drawRect()?
2) Is it generally better to create
a) a 3 x 3 image where the segments are in their appropriate 1x1 grid of the image? If so, is it simple to draw from a portion of this image onto my target view in drawRect (if the former assumption is correct that I should use drawRect)?
b) The pieces separately in 8 different files?
UPDATE:
To clarify, the idea is to take any customized border art and be able to stretch the 2nd, 4th, 6th, and 8th cell (in a 3x3-cell grid) to form a border of any size with just those assets. Stretching just a plain image would result in distortion of the corners, so I'd like to stretch those even numbered cells as needed and tack on the corners so there is no distortion. I'd seen this done before so thought it might be a standard thing and have a standard naming to it other than what I called it.
Anyhow, I was advised that adding 8 UIImageViews to a container would not be as efficient as drawing the UIImages on the fly in drawRect so took that approach using CGContextDrawImage() after applying the necessary transformations to the context to translate and scale the Y. Because this function draws from the bottom left corner of an image but onto a top-left origined UIView, the image is upside down without the Y axis invert. I noticed the suggestion to use UIImage functions like drawAtPoint works as well and similarly but for the invert since UIImage draws in the same orientation as UIViews. I will continue my implementation with the former and see how it goes, but one other question.
Would someone happen to know which of these approaches is more efficeint, faster, etc?
I'm not sure I follow, but here's my best shot at an answer...
Using drawRect: or adding individual UIImageViews to a parent view is entirely up to you. UIImageView gives you a bit of encapsulated functionality for free, but otherwise they are the same as far as appearances go.
If you do want to go the drawRect route, you just need to use UIImage's drawAtPoint: method. Do the math for where you want it to be, and draw it. You can calculate your points based on the parent view's dimensions.
As far as scaling, it's impossible to resize these images without scaling them, so I'd plan ahead and make your originals as large or larger than you ever expect to display them.
Hope that helps a little?
Cheers
If you want a border on a dialog box, assuming the box is a UIView (or subclass), then set the layer's border properties and let the system draw the border for you.
#import <QuartzCore/QuartzCore.h>
// ...
view.layer.borderWidth = 2;
view.layer.borderColor = [UIColor whiteColor].CGColor;
view.layer.cornerRadius = 0; // 0=square corners, >0 for rounded
Currently, I have a UIView subclass that "stamps" a single 2px by 2px CGLayerRef across the screen, up to 160 x 240 times.
I currently animate this by moving the UIView "up" the screen 2 pixels (actually, a UIImageView) and then drawing the next "row".
Would using multiple CALayer layers speed up performance of rendering this animation?
Are there tutorials, sample applications or code snippets for use of CALayer with the iPhone SDK?
The reason I ask is that most of the code snippets I find that demonstrate simple examples of CALayer employ method calls that do not work with the iPhone SDK. I appreciate any advice or pointers.
Okay, well, if you want something that has some good examples of CA good that draws things like that and works on the phone, I recommend the GeekGameBoard code that Jens Aflke published (it is an improved version of some Apple demo code).
Based on what you are describing I think you are doing somthing way more complicated than it needs be. My impression is you want basically a static view that you are animating by shifting its position so that it is partially off screen. If you just need to set some static content in your drawRect going through layers is not going to be faster than just calling CGFillRect() with your color. After that you could just use implicit animations and the animator proxy on UIView to move the view. I suspect you could even get rid of the custom drawRect: implementation with a patterned UIColor, but I honestly have not benchmarked the difference between the two.
What CALayer methods are you seeing that don't work on iPhone? Aside from animation features tied to CoreImage I have not noticed much that is missing. The big thing you are likely to notice is that all views are layer backed (so you do not need to do anything special to use layers, you can just grab a UIView's layer through the layer accessors methos), and the coordinate system has a top left origin.
In any event, generally having more things is slower than having fewer things. If you are just repeating the same pattern over and over again you are likely to find the best performance is implementing a custom UIView/CALayer/UIColor that knows how to draw what you want, rather than placing visually identical layers or views next to each other.
Having said that, generally layers are lighter weight than views, so if you have a lot of separate elements that you need to keep logically separated you will find that moving to layers can be a win over using views.
You might want to look at -[UIColor initWithPatternImage:] depending on exactly what you are trying to do. If you are using this two pixel pattern as a background color you could just make a UIColor that draws it and set the background.
What CALayer methods are you seeing that don't work on iPhone?
As one example, I tried implementing the grid demo here, without much luck. It looks like CAConstraintLayoutManager and CAConstraint are not available in QuartzCore.h.
In another attempt, I tried a very simple, small 20x20 CALayer object as a sublayer of my UIView's layer property, but that didn't show up.
Right now, I have a custom UIView of which I override the drawRect method. In drawRect I grab a context and render two types of CGLayerRefs:
At "off" cells I draw the background color across the entire 320x480 canvas.
At "on" cells, I either draw a single CGLayerRef across a grid of 320x480 pixels (initialization) or across a 320x2 row (animation).
During animation, I make a UIImageView clip view from 320x478 pixels, and draw a single row. This "pushes" my bitmap up the screen two pixels at a time.
Basically, I'd like to test whether or not using CALayer will accomplish two things:
Make my rendering faster, if CALayer has less overhead than what I'm doing now
Make my animation smoother, by letting me transition a layer up the screen smoothly
Unfortunately, I can't seem to get a basic CALayer working at the moment, and haven't found a good chunk of sample code to look at and play with.