1

I'd like to be able to drag one imageview onto another, such that when they overlap, the overlapping area changes colour. To help visualise the problem, these imageviews are circular: when they overlap, it should form a Venn diagram-style image as shown below.

enter image description here

I know you can detect whether the intersection has occurred by using:

if (self.imageview1.bounds.contains(self.imageview2.bounds)) {
    ...
}

But do not really know how to colour the area in between!

Peter O.
  • 32,158
  • 14
  • 82
  • 96
jasperthedog
  • 129
  • 3
  • 9
  • Clarification question: Are you talking about the intersection of two `UIViews` that just happen to be `UIImageViews`? Or the intersection of the `UIImages` contained in two `UIImageViews`? –  Sep 22 '17 at 11:43
  • This can be complicated to do with arbitrary images in image views (and begs lots of questions like whether the background color of those images are white or transparent, whether they're scaled to the right sizes already; etc.). If, however, you're looking for intersections of two regular shapes, like your circles in your Venn diagram, the math is fairly easy. – Rob Sep 22 '17 at 14:28
  • It was two UIViews that just happened to be ImageViews, but I found a way to do it using the geometry! – jasperthedog Sep 22 '17 at 15:01

1 Answers1

1

so I figured out a way to do this mathematically! Basically you use basic trigonometry to find the angles required for the two "arcs" of the intersection, and make a Bezier Path composed of these two arcs. Then just superpose the bezier path and you're done! Here's my code if anyone is interested :)

Note: this assumes both circles have the same radius, and I have clipped my imageviews such that they are circular!

let circlePath = UIBezierPath()
let left_circle_center = left_image_view.center.x
let right_circle_center = right_image_view.center.x
let radius = left_image_view.frame.width/2
let angle = acos( (left_circle_center - right_circle_center)/radius) 
intersection_Path.addArc(withCenter: right_circle_center, radius: radius, startAngle: CGFloat(Double.pi-angle), endAngle: CGFloat(Double.pi+angle), clockwise: true)
intersection_Path.addArc(withCenter: left_circle_center, radius: radius, startAngle: CGFloat(-angle), endAngle: CGFloat(angle), clockwise: true               
let intersection_area = CAShapeLayer()
intersection_area.path = intersection_Path.cgPath
intersection_area.borderColor = ...
intersection_area.strokeColor = ...
intersection_area.fillColor = ...
self.view.layer.addSublayer(intersection_area)
jasperthedog
  • 129
  • 3
  • 9