iOS - Swift - Clickable Regions on a UIImage

uiimageview set image swift 4
uiimageview click event swift 4
add tap gesture recognizer to uiimageview swift 4
swift on image click
xcode uiimageview set image
uiimage(named swift)
image view tapped swift
add tap gesture recognizer to uiview swift 4

I am working on a project where I have to plot points in specific regions on an image that represents the human body. In Interface Builder, I have set up a container UIView, which takes up most of the vertical center of the main view. In that container view, I placed a UIImageView and set the graphic in IB. The graphic is much larger than both the UIImageView and the container UIView, more specifically, it’s taller. The ContentMode of the UIImageView is set to AspectFit because I want the image to not show as bigger than the container.

The code creates several CGRect instances which are regions where user taps mean something. When the user taps on the container view, code is used to determine if the point is within one of the regions and if it is, a dot is drawn in the center of that region.

The problem is that when I run the app on certain simulators, the region rectangles are not in the right place on the image. For example, when I run the app on an iPhone X, the rectangle region that is in place for the head looks fine. When I run the app on an iPhone XR, the rectangle region is off to the left of the head.

I am using coordinates to define the region rectangles that are based on where, for example, the human head is in the image. I feel like this is not the right way to do this since AspectFit for the ContentMode of the image is most likely causing the image to be scaled to maintain aspect.

Bottom line is that I want a rectangle to be in the right place and size no matter how the image scales. No sure if how I am doing it makes sense, so hope that some suggestions come in that offer a better way to do this.

Update 1: The UIImageView is pinned to the surrounding UIView, so it's width and height are as big as the container. Since the image is skinnier than the UIImageView, the image appears centered in it. In the attached images, the purple background is the UIImageView showing the topmost UIView's background color.

Update 2: I checked the scale for both width and height and found they are different. The width scale factor is 1.36565656565 and the height scale factor is 2.104. I tried the formulas given with both scale factors given by Sweeper and no luck.

You just need to do some maths.

On the original image, identify the region the user can tap. Note down its x, y, w, h, relative to the image.

Figure out how much the image shrank in the image view. Since you said the image is taller than the image view, the image underwent a scale factor of imageViewHeight / imageHeight. We'll now refer to this as scaleFactor.

The region's Y coordinate must have also gone down by scaleFactor, so you multiply regionY by scaleFactor to get newY.

The region's width and height will do the same thing, so multiply them by scaleFactor and get newWidth and newHeight.

The X coordinate of the region, relative to the image view, is a bit tricky. You need to account for the amount of empty space that the image view has created by scaling down the image. This emptySpace is calculated by (imageViewWidth - newWidth) / 2. Then to calculate the new region's X coordinate relative to the image view, you do emptySpace + X * scaleFactor.

Now the rect (newX, newY, newWidth, newHeight) is the region relative to the image view that the user can tap!

ios - Divide an Image to a clickable parts, Add UIButtons on top of the image with clear background color. You can do this with AutoLayout and always get correct proportions to the areas  Swift: Clickable UIImageView with Extension. Ogulcan Orhan. Follow. Aug 18, 2018 · 2 min read. To make the long story short: In iOS, sometimes we may need to interact with Image View(s).

I made this code for a rectangle in the position exactly the same on every device. To make the check if it's a x phone I do in the viewDidLoad and set the constrains to what I want and added tab bar size.

@IBOutlet weak var tabMenu:          NSLayoutConstraint!
@IBOutlet weak var topConstraint:    NSLayoutConstraint!
@IBOutlet weak var bottomConstraint: NSLayoutConstraint!

@IBOutlet weak var backgroundImg: UIImageView!
@IBOutlet weak var rectangleImg:  UIImageView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Check if it's a iPhone X
    if #available(iOS 11, *) {
        let safeArea = UIApplication.shared.delegate?.window??.safeAreaInsets

        // If its a x phone i use safe instead of superView
        guard let safe = safeArea else { return }
        if safe.bottom > 0 {
            topConstraint.constant = safe.top
            bottomConstraint.constant = safe.bottom + tabMenu.constant
        }
    }
}

override func viewDidAppear(_ animated: Bool) {

    // Here I set the rectangle to 36% of the width and height (change to what you want)
    rectangleImg.frame = CGRect(x: 0, y: 0, width: backgroundImg.frame.width * 0.36,
    height: backgroundImg.frame.height * 0.36)

    // Last I put the rectangle in the center of background image
    rectangleImg.center.x = backgroundImg.center.x
    rectangleImg.center.y  = backgroundImg.center.y

}

Hope this code could help!

Swift - Clickable Regions on a UIImage - ios, iOS - Swift - Clickable Regions on a UIImage - ios. In Interface Builder, I have set up a container UIView, which takes up most of the vertical center of the main  Click Event on UIImageView programmatically in ios. How to you make a UIImageView on the storyboard clickable (swift) Click Event on UIImageView programmatically.

The root of my problem is that I had the UIImageView's four sides pinned to its container view. When the width of the device changed, it correctly scaled the image, but it caused the graphic to be "stretched". This caused the width of the head, for example, to increase. I have solved this for now by locking the width of the image so the coordinates I come up with from the original image remain intact no matter what the device.

For those reading this, it may not sound like much of a solution, but I have to go with this since I have a pretty aggressive deadline. I have tested it on multiple device simulators and it works. I may have to revisit this in the future, but for now, it is working.

I also used this question's answer to rework the code: create a clickable body diagram

Swift: Clickable UIImageView with Extension, To make the long story short: In iOS, sometimes we may need to interact with Image View(s). By default, this is just a few steps away to make it  iOS uses different rendering techniques, with different performance characteristics, depending on the size of each resizable area in the image: If resizable areas have a width or height of 1 pixel—that is, a horizontally resizable area is 1 pixel wide, a vertically resizable area is 1 pixel tall, or the center region of the image is 1 x 1 pixel—iOS draws the image by stretching the 1-pixel region.

UIImage, A stretchable image is one that defines regions where the underlying image data can be duplicated in an aesthetically pleasing way. Stretchable images are  UIImage.Resizing Mode. SDKs. iOS 6.0+ Mac Catalyst 13.0+ tvOS 9.0+ the interior region of the original image will be repeated to fill in the interior region

iOS UITableView Custom Cell with Image, Create iOS TableView with Custom Cell App in Swift In the welcome window click on the second option the left side à select Application à In the main area of dialog  The deleting code works fine, but the problem is that the button is not clickable under the programatically-added UIImageView. (If I click on a portion of the button which is not covered by the UIImageView, the button's function is called and the image(s) are properly deleted.)

How to make resizable images using , If you use a small image in a large image view, you can make the can also ask iOS to repeat the center area as a tile if that's what you want. You use image objects to represent image data of all kinds, and the UIImage class is capable of managing data for all image formats supported by the underlying platform. . Image objects are immutable, so you always create them from existing image data, such as an image file on disk or programmatically created image d

Comments
  • The formulas you supplied seem to work for everything but the x coordinate. I am amending my question to reflect how the UIImageView is set up.
  • @Moebius Can you show the region you created using my formulas? Also, only use the height scale factor. The width scale factor you calculated is wrong, since the image view's width is not the same as the image's scaled width. Only use the height scale factor.
  • I did use the height scale factor and is was way too large. In the meantime, I have switched to locking the UIImageView's width, which was the main cause of problems.
  • @Moebius it doesn’t matter how large the scale factor is. The math should still work. Can you show me why it being too large is a problem?