找到两个图像视图重叠的重叠区域，并使该区域改变颜色 [英] Find the overlapping area of two imageviews overlap, and make this area change colour

问题描述

我希望能够将一个图像视图拖到另一个图像视图上，这样当它们重叠时，重叠区域会改变颜色。为了帮助可视化问题，这些图像视图是圆形的：当它们重叠时，应形成如下所示的维恩图式图像。

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.

我知道您可以使用以下方法检测相交是否发生：

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!

推荐答案

所以我想出了一种数学上的方法！基本上，您可以使用基本三角学来找到相交的两个弧所需的角度，并创建由这两个弧组成的贝塞尔曲线。然后，叠加贝塞尔曲线路径即可完成操作！这是我的代码，如果有人感兴趣的话:)

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)

这篇关于找到两个图像视图重叠的重叠区域，并使该区域改变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！