1

I've been reading a lot of posts here and I see conflicting information.

I'm trying to draw a line over a UIImageView which already contains a picture. I'll need to draw the line either horizontally, vertically, or not at all based on user selection, without disturbing the existing picture.

Some responses say to draw into the UIImageView directly, some say to subclass a UIImageView or UIView, and still others say to create a view layer.

What is the Best Practice for this, and can you also point me to a tutorial?

Fattie
  • 27,874
  • 70
  • 431
  • 719
wayneh
  • 4,393
  • 9
  • 35
  • 70
  • Do you need to save the image with the line on it? For example, do you want to store the modified image to the camera roll or send it to a web site? – rob mayoff May 25 '14 at 15:22
  • I do not need to save it - it's for reference only. However, I do need to make sure it's always visible on top of the background image when the user moves/scales the background. – wayneh May 25 '14 at 15:27
  • Would you ever need to pan/zoom the image underneath the line and have the line stay in one spot? – brandonscript May 25 '14 at 15:27
  • Yes - See previous comment (we must have posted at the same time) – wayneh May 25 '14 at 15:28
  • ah! lol. So you'll definitely need a view over top then - if you draw it in the UIImageView, it probably won't work well. – brandonscript May 25 '14 at 15:30
  • So if I want to be able to display a picture, draw a reference line on top of it, but still allow the user to manipulate the picture (position/scale) I would create a UIViewController, add a UIImageView (for the picture) then add a UIView on top for the line drawing - correct? – wayneh May 25 '14 at 15:32

2 Answers2

2

Since you need to pan/zoom the image underneath, I suggest you implement a stack like this:

[UIScrollView] on the bottom
    [UIImageView] inside the scroll view for pan/zoom

[UIView] on top of the scrollview - for drawing the line

(see this tutorial for line drawing).

Personally I've used this project for implementing pan/zoom -- it's well implemented and takes a lot of the guess work out of it.

Community
  • 1
  • 1
brandonscript
  • 68,675
  • 32
  • 163
  • 220
  • OK - I've checked out the code and it seems like the perfect base example - thanks. I'll give this a shot and post back later. – wayneh May 25 '14 at 15:41
  • On a related note please see this answer, which is so useful I gave it a 500 point bounty! it may help here: http://stackoverflow.com/a/22694062/294884 – Fattie May 25 '14 at 16:18
  • One problem so far - my pan/zoom touches are not seen by the ScrollView since the "line view" is on top - how can I make the view pass the touches through to the scrollview? – wayneh May 25 '14 at 17:59
  • You should be able to just set myView.userInteractionEnabled = NO; on the line UIView. – brandonscript May 25 '14 at 18:01
1

The easiest way to do this, since you only want to draw a horizontal or vertical line, is to add a subview to the UIImageView. If you want a horizontal line, set the subview's height to 1-2 points and set the width to the image view's width. If you want the line to be vertical, set the subview's height to the image view's height and set the width to 1-2 points. Set the subview's background color to whatever color you want the line to be.

A subview always appears on top of its superview.

rob mayoff
  • 375,296
  • 67
  • 796
  • 848