绘制一个带有一些阴影偏移的圆边平行四边形
Draw a round edge parallelogram with some shadow offset
我想画一个圆边的平行四边形。我希望它是可配置的,以便我可以将垂直边缘之一设为 90 度。
As you can see in the image that topLeft corner is not rounded with code below
func getParallelogram(width: CGFloat, height: CGFloat, radius: CGFloat) -> CGPath {
// Points of the parallelogram
var points = [
CGPoint(x: width * 0.05, y: 0),
CGPoint(x: width , y: 0),
CGPoint(x: width - width * 0.05, y: height),
CGPoint(x: 0, y: height)
]
let point1 = points[0]
let point2 = points[1]
let point3 = points[2]
let point4 = points[3]
let path = CGMutablePath()
path.move(to: point1)
path.addArc(tangent1End: point1, tangent2End: point2, radius: radius)
path.addArc(tangent1End: point2, tangent2End: point3, radius: radius)
path.addArc(tangent1End: point3, tangent2End: point4, radius: radius)
path.addArc(tangent1End: point4, tangent2End: point1, radius: radius)
return path
}
用法:
let customView = UIView(frame: CGRect(x: 20, y: 50, width: 320, height: 300))
customView.backgroundColor = UIColor.clear
view.addSubview(customView)
let shape = CAShapeLayer()
shape = UIColor.lightGray.cgColor
shape.path = getParallelogram(width: 200, height: 80, radius: 5)
shape.position = CGPoint(x: 10, y: 10)
shape.layer.addSublayer(triangle)
我在这里面临的问题是使用上述代码时左上角不是圆的。我将不胜感激任何帮助来实现这一目标。如果有任何其他替代或更简单的方法,也请指导我。谢谢!
注意:我正在使用此代码将三角形转换为平行四边形 UIBezierPath Triangle with rounded edges
改变
path.move(to: point1)
path.addArc(tangent1End: point1, tangent2End: point2, radius: radius)
path.addArc(tangent1End: point2, tangent2End: point3, radius: radius)
path.addArc(tangent1End: point3, tangent2End: point4, radius: radius)
path.addArc(tangent1End: point4, tangent2End: point1, radius: radius)
至
path.move(to: point1)
path.addArc(tangent1End: point2, tangent2End: point3, radius: radius)
path.addArc(tangent1End: point3, tangent2End: point4, radius: radius)
path.addArc(tangent1End: point4, tangent2End: point1, radius: radius)
path.addArc(tangent1End: point1, tangent2End: point2, radius: radius)
结果:
我想画一个圆边的平行四边形。我希望它是可配置的,以便我可以将垂直边缘之一设为 90 度。
As you can see in the image that topLeft corner is not rounded with code below
func getParallelogram(width: CGFloat, height: CGFloat, radius: CGFloat) -> CGPath {
// Points of the parallelogram
var points = [
CGPoint(x: width * 0.05, y: 0),
CGPoint(x: width , y: 0),
CGPoint(x: width - width * 0.05, y: height),
CGPoint(x: 0, y: height)
]
let point1 = points[0]
let point2 = points[1]
let point3 = points[2]
let point4 = points[3]
let path = CGMutablePath()
path.move(to: point1)
path.addArc(tangent1End: point1, tangent2End: point2, radius: radius)
path.addArc(tangent1End: point2, tangent2End: point3, radius: radius)
path.addArc(tangent1End: point3, tangent2End: point4, radius: radius)
path.addArc(tangent1End: point4, tangent2End: point1, radius: radius)
return path
}
用法:
let customView = UIView(frame: CGRect(x: 20, y: 50, width: 320, height: 300))
customView.backgroundColor = UIColor.clear
view.addSubview(customView)
let shape = CAShapeLayer()
shape = UIColor.lightGray.cgColor
shape.path = getParallelogram(width: 200, height: 80, radius: 5)
shape.position = CGPoint(x: 10, y: 10)
shape.layer.addSublayer(triangle)
我在这里面临的问题是使用上述代码时左上角不是圆的。我将不胜感激任何帮助来实现这一目标。如果有任何其他替代或更简单的方法,也请指导我。谢谢!
注意:我正在使用此代码将三角形转换为平行四边形 UIBezierPath Triangle with rounded edges
改变
path.move(to: point1)
path.addArc(tangent1End: point1, tangent2End: point2, radius: radius)
path.addArc(tangent1End: point2, tangent2End: point3, radius: radius)
path.addArc(tangent1End: point3, tangent2End: point4, radius: radius)
path.addArc(tangent1End: point4, tangent2End: point1, radius: radius)
至
path.move(to: point1)
path.addArc(tangent1End: point2, tangent2End: point3, radius: radius)
path.addArc(tangent1End: point3, tangent2End: point4, radius: radius)
path.addArc(tangent1End: point4, tangent2End: point1, radius: radius)
path.addArc(tangent1End: point1, tangent2End: point2, radius: radius)
结果: