Im currently trying to develop a view that represents an overlay view over a detected page. The view will animate to the shape of the page every time the page's rectangle is detected. The problem i am facing is that the view's border width is not stable. I am currently using
Transforming a rectangle image into a quadrilateral using a CATransform3D swift answer created from @Joe Blow to do the transformations. It is a class extending the UIView, which from now on i will call JoshQuadView.
I added a border to the layer of the JoshQuadView and the result is as expected.
self.myView.layer.borderWidth = 1.2
self.myView.layer.borderColor = UIColor.white.cgColor
self.myView.layer.allowsEdgeAntialiasing = true
After applying the CATransformation3D with the JoshQuadView methods, the result is the one shown below after applying this code.
let point1 = CGPoint(x: 120, y:90)
let point2 = CGPoint(x: 250, y:100)
let point3 = CGPoint(x: 20, y:430)
let point4 = CGPoint(x: 310, y:440)
UIView.animate(withDuration: 1, animations: {
self.myView.transformToFitQuadTopLeft(tl: point1, tr: point2, bl: point3, br: point4)
}, completion:
{
finished in
self.myButton.isUserInteractionEnabled = true
})
As you can see the border line width is decreasing dramatically on the top border of the JoshQuadView and increases dramatically on the bottom border of that view. As for the side borders the size of the border is varying.
What i want to do is to have a steady border line width. I have tried using a UIBezierPath to draw the border of the JoshQuadView over it but i cannot do an animation to follow the JoshQuadView.
So the question is: Is there a way to have a steady line width for the view after the transformation?
I have done an extensive search and nothing seems to be solving my problem.
