[英]Triangular UIView or UIImageView
I have requirement like below image. 我有如下图所示的要求。
But, i'm confused about how to achieve this? 但是,我对如何实现这一点很困惑? Can i achieved it by using 3
UIImageViews
or UIViews
. 我可以通过使用3个
UIImageViews
或UIViews
来实现它。 If both then, which one is better? 如果两者都有,哪一个更好? Finally, i have to combine three images & make one from that three images.
最后,我必须结合三个图像并从三个图像中制作一个。 I should be able to get touch of image too.
我也应该能够触摸到图像。 I have no idea about this.
我不知道这个。 Thanks.
谢谢。
Every UIView
has a backing CALayer
(accessible by aview.layer
). 每个
UIView
都有一个支持CALayer
(可由aview.layer
访问)。
Every CALayer
has a mask
property, which is another CALayer
. 每个
CALayer
都有一个mask
属性,这是另一个CALayer
。 A mask allows to define a see-through shape for the layer, like a stencil. 掩模允许为图层定义透视图形状,如模板。
So you need three UIImageView
s, each of them has a different .layer.mask
, each of these masks is a different CAShapeLayer
whose .path
are triangular CGPath
s. 所以你需要三个
UIImageView
,每个都有一个不同的.layer.mask
,这些掩码中的每一个都是一个不同的CAShapeLayer
其.path
是三角形CGPath
。
// Build a triangular path
UIBezierPath *path = [UIBezierPath new];
[path moveToPoint:(CGPoint){0, 0}];
[path addLineToPoint:(CGPoint){40, 40}];
[path addLineToPoint:(CGPoint){100, 0}];
[path addLineToPoint:(CGPoint){0, 0}];
// Create a CAShapeLayer with this triangular path
// Same size as the original imageView
CAShapeLayer *mask = [CAShapeLayer new];
mask.frame = imageView.bounds;
mask.path = path.CGPath;
// Mask the imageView's layer with this shape
imageView.layer.mask = mask;
Repeat three times. 重复三次。
UIBezierPath
and CAShapeLayer
to achieve this UIBezierPath
和CAShapeLayer
来实现此目的 TrImageView.swift TrImageView.swift
import UIKit
protocol TriImageViewDelegate: class {
func didTapImage(image: UIImage)
}
class TriImageView:UIView {
//assumption: view width = 2 x view height
var images = [UIImage]()
var delegate:TriImageViewDelegate?
override func awakeFromNib() {
super.awakeFromNib()
//add imageviews
for i in 1...3 {
let imageView = UIImageView()
imageView.tag = i
imageView.userInteractionEnabled = true
self.addSubview(imageView)
}
//add gesture recognizer
self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(TriImageView.handleTap(_:))))
}
//override drawRect
override func drawRect(rect: CGRect) {
super.drawRect(rect)
let width = rect.size.width
let height = rect.size.height
let frame = CGRect(x: 0, y: 0, width: width, height: height)
let pointA = CGPoint(x: 0, y: 0)
let pointB = CGPoint(x: width * 0.79, y: 0)
let pointC = CGPoint(x: width, y: 0)
let pointD = CGPoint(x: width * 0.534,y: height * 0.29)
let pointE = CGPoint(x: 0, y: height * 0.88)
let pointF = CGPoint(x: 0, y: height)
let pointG = CGPoint(x: width * 0.874, y: height)
let pointH = CGPoint(x: width, y: height)
let path1 = [pointA,pointB,pointD,pointE]
let path2 = [pointE,pointD,pointG,pointF]
let path3 = [pointB,pointC,pointH,pointG,pointD]
let paths = [path1,path2,path3]
for i in 1...3 {
let imageView = (self.viewWithTag(i) as! UIImageView)
imageView.image = images[i - 1]
imageView.frame = frame
addMask(imageView, points: paths[i - 1])
}
}
//Add mask to the imageview
func addMask(view:UIView, points:[CGPoint]){
let maskPath = UIBezierPath()
maskPath.moveToPoint(points[0])
for i in 1..<points.count {
maskPath.addLineToPoint(points[i])
}
maskPath.closePath()
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.CGPath
view.layer.mask = maskLayer
}
//handle tap
func handleTap(recognizer:UITapGestureRecognizer){
let point = recognizer.locationInView(recognizer.view)
for i in 1...3 {
let imageView = (self.viewWithTag(i) as! UIImageView)
let layer = (imageView.layer.mask as! CAShapeLayer)
let path = layer.path
let contains = CGPathContainsPoint(path, nil, point, false)
if contains == true {
delegate?.didTapImage(imageView.image!)
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.