Drawing in Custom ScrollView - iphone

I'm trying to draw in a scrollview on top of an image using multi-touch. The circles are actually drawn, but under the image. In my code I currently create a custom ScrollView:
#interface AppScrollView : UIScrollView {
//objects to draw circles
NSMutableDictionary *circlesInProcess;
NSMutableArray *completeCircles;
}
#end
In my AppScrollView.m I override touches commands to store touches and add a
(void)drawRect:(CGRect) rect
method to draw the circles in the scrollview. I also include
[self setNeedsDisplay]
to display the circles. In my app controller, I declare the new custom scrollView object:
IBOutlet AppScrollView *scrollView;
Later I add an image to the scrollView using:
[scrollView addSubview:myImage];
The image is visible, but when I try to draw circles on top of it, they are drawn under the image. Let me know if you have any suggestions?

Suggestion: draw the image onto your scrollview (instead of adding the image view as a subview) and then draw the circles on top of that.

In your code check where did you add you custom scrollview. Is it added after imageView is added or before.
You scrollView should be on top of imageView.

Related

Layering UIImageView and UIBezierPath

I have a an array of UIBezierPaths which I drew and also a UIImageView all put on a UIView. When I draw a UIBezierPath and save it to the array, then add a UIImageView, then draw another path, the second path will appear behind the image. Is there something such as a bringSubViewToFront: sort of thing for UIBezierPath?
- (void)drawRect:(CGRect)rect
{
for(int a=0; a<_pathArray.count; a++) {
[(UIColor )[_colorArray objectAtIndex:a] setStroke];
[(UIBezierPath)[_pathArray objectAtIndex:a] strokeWithBlendMode:kCGBlendModeNormal alpha:1.0];
}
}
where _colorArray is the array of the colors for each of the paths, and _pathArray is the array of the UIBezierPaths. I'm inserting a UIImageView onto the view and then what I want to do is to be able to draw on the whole UIView (including on top of the UIImageView).
All subviews will always be drawn on "top" of the superview. Bezier paths aren't subviews, they are drawn as part of the view so they will always be behind the subviews.
You can either render the images that you are currently adding to the image views into the current context (during drawRect). Or you could add the image views behind the view that you draw the Bezier paths into (by adding them to the same superview, or by adding a new sibling view that the beziers are drawn into.

How to zoom an image without zooming sub views in iPhone?

I have scroll view with an UIImageView init.I add a button on UIImageView.When i zoom the image then my button is also perform zooming.How can i only zoom the Image not the button.Thanks in advance for you time.
Place the button and any other views you do not want to be affected by the UIScrollView zooming in a view at the same level as the UIScrollView. Here's an example view hierarchy that was set up for just this purpose.
The scroll view and anything inside it will zoom (in this case the Image View).
In the UIView below the scroll view (in this case, an image view with the Default.png image) will not zoom when the scroll view is zoomed.
EDIT:
To have the button remain in the same place relative to the image add it as a subview to your scroll view, add UIScrollViewDelegate to your view controller header. In your view controller implementation: capture the initial UIButton frame in viewWillAppear, and use the scroll view delegate scrollViewDidZoom method to update the button frame so that is stays in place. This will also allow the button to move with the image when panning.
Here's the updated view structure:
The applicable view controller code segments:
#interface MyViewController () {
CGRect initialButtonFrame;
...
}
-(void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
initialButtonFrame = self.button.frame;
...
}
- (void)scrollViewDidZoom:(UIScrollView *)sv
{
self.button.frame = CGRectMake((initialButtonFrame.origin.x * self.scrollView.zoomScale),
(initialButtonFrame.origin.y * self.scrollView.zoomScale),
initialButtonFrame.size.width,
initialButtonFrame.size.height);
...
}
Here are a couple of images showing the button staying in place relative to its placement in the image. Note the button origin is near the top left of the red area near the center bottom of the fireman's coat when not zoomed (first image) and when zoomed (second image).
Add the button on the imageScrollView superview after the imageScrollView so that the button is not scroll view's subview.

how do you resize a CALayer after it's been added as a sublayer

I have a CALayer (CAGradientLayer) added as a subview of a UIImageView. I have successfully added it as a sublayer of the UIImageView, however on orientation I'd like to adjust the layer's width. How can I do so? I tried the following code without any success:
- (void) willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
[self.imageOverlay setFrame:self.backgroundImageView_.bounds];
[self.gradientOverlay setFrame:self.view.bounds];
}
Are you supporting < iOS 5? You can override the viewWillLayoutSubviews method on your view controller and try setting the frame there. Otherwise, create a view subclass to use as the container of the gradient layer and resize the layer in layoutSubviews.

Display Overlay on Image

Using this tutorial: http://www.techotopia.com/index.php/An_Example_iOS_4_iPhone_Camera_Application_%28Xcode_4%29
I have displayed on the UI an image from the photo library. I would like to simply overlay some basic text or a shape (like a square) over the UIImage. Is there an easy way to do this?
Thank you.
Do you have an UIImage only or do you display it using an UIImageView?
If you have an UIImageView then you can just add a UILabel as sub view to your image view.
Assuming your UIImageView is named myImageView ...
// Create and init the label with any rect.
UILabel *myLabel = [[UILabel alloc] initWithFrame:myImageView.frame]; // The lable has the same size as the Image has.
mylabel.text = #"the text";
[myImageView addSubview:myLabel];
//A subview's coordinates are within its superview's coordinates.
mylabel.center = CGPointMake(myImageView.frame.size.width/2,myImageView.frame.size.height/2) // aligning the centers of the views
//An alternative could be transforming the image's center into the coordinate system of its superviews. That code would look smarter but his example is imho easier to understand.
//Setting front, size, alpha, background colour ...
...
You can create a subclass of a UIView, make it transparent, and add an instance of this class, the same size as your image, as a overlay subview on top of the image. Then, when you want to display something on top of your image, call setNeedsDisplay on the transparent subview, and draw whatever you want (colored rectangles, text, etc.) in the drawRect callback of this view.
To make a UIView subclass transparent, add this to the view class initWithFrame method:
[ self setBackgroundColor:[ UIColor clearColor ] ];

how to drag UIImageView under UIScrollView?

I have a UIImageView (imageView) being the subView of the UIScrollView (scrollView). The scrollView is set only for pinching the showed image from imageView. And I have a small UIImageView (iconView) which is the subView of imageView. So the relationship is like:
UIView
|_____ UIScrollView ( scrollView )
|_____ UIImageView (imageView)
|______ UIImageView(iconView) .
I need to touch and move the iconView but I am confused with this two methods I found.
Can I simply use the "hitTest:withEvent:" method to work this out and how to use hitTest ?
Or Should I override "UITouchesBegan:withEvent:" "UITouchesMoved:withEvent:" "UITouchesEnd:withEvent:" ? and how to use it?
You should use the 2nd method.
Subclass the UIView class and create CustomView. Define iconView as CustomView.
In CustomView define the 3 delegates to the desired behaviour:
UITouchesBegan:withEvent:
UITouchesMoved:withEvent:
UITouchesEnd:withEvent:
Hope this helps