ios - 绘制带有侧曲线 UIBezierPath 的对角线
问题描述
代码:
func drawCanvas1(frame: CGRect = CGRect(x: 0, y: 0, width: 240, height: 120)) {
//// Bezier Drawing
let bezierPath = UIBezierPath()
UIColor.black.setStroke()
bezierPath.lineWidth = 1
bezierPath.stroke()
//// Bezier 2 Drawing
let bezier2Path = UIBezierPath()
bezier2Path.move(to: CGPoint(x: frame.minX + 0.5, y: frame.minY + 103.42))
bezier2Path.addCurve(to: CGPoint(x: frame.minX + 12.17, y: frame.minY + 119.5), controlPoint1: CGPoint(x: frame.minX + 0.5, y: frame.minY + 103.42), controlPoint2: CGPoint(x: frame.minX + 0.5, y: frame.minY + 119.5))
bezier2Path.addCurve(to: CGPoint(x: frame.minX + 232.03, y: frame.minY + 26.23), controlPoint1: CGPoint(x: frame.minX + 23.85, y: frame.minY + 119.5), controlPoint2: CGPoint(x: frame.minX + 232.03, y: frame.minY + 26.23))
bezier2Path.addCurve(to: CGPoint(x: frame.minX + 237.87, y: frame.minY + 0.5), controlPoint1: CGPoint(x: frame.minX + 232.03, y: frame.minY + 26.23), controlPoint2: CGPoint(x: frame.minX + 243.7, y: frame.minY + 16.58))
UIColor.black.setStroke()
bezier2Path.lineWidth = 1
bezier2Path.lineCapStyle = .square
bezier2Path.stroke()
let layer1 = CAShapeLayer()
layer1.path = bezierPath.cgPath
let layer2 = CAShapeLayer()
layer2.path = bezier2Path.cgPath
imageCollectionView.layer.addSublayer(layer1)
imageCollectionView.layer.addSublayer(layer2)
}
输出:
正如您在输出中看到的那样,它填充了黑色,而我只给出了中风。我不太擅长贝塞尔路径。谁能帮我达到预期的效果
解决方案
也许使用 addArc 更容易?
func drawCanvas1(frame: CGRect = CGRect(x: 0, y: 0, width: 240, height: 120)) {
let rhsY:CGFloat = frame.minY + 60 // Please adjust this value depending on your need
let cornerRadius:CGFloat = 25
let angle = atan2(frame.maxY - rhsY, frame.width)
// upper left corner
let p1 = CGPoint(x: frame.minX, y: frame.minY)
// left point touching bottom left corner
let p2 = CGPoint(x: frame.minX, y: frame.maxY - cornerRadius)
let a = cornerRadius * cos(angle)
let o = cornerRadius * sin(angle)
// Center of bottom left round corner
let c1 = CGPoint(x: p2.x + a, y: p2.y - o)
let c1Start = CGFloat.pi - angle
let c1End = c1Start - (CGFloat.pi / 2)
// Center of bottom right round corner
let c2 = CGPoint(x: frame.maxX - cornerRadius, y: rhsY)
// bottom point touching bottom left corner
// let p3 = CGPoint(x: c1.x + o, y: c1.y + a)
// bottom point touching bottom right corner
let p4 = CGPoint(x: c2.x + o, y: c2.y + a)
// right point touching bottom right corner
// let p5 = CGPoint(x: frame.maxX, y: rhsY)
// upper right corner
let p6 = CGPoint(x: frame.maxX, y: frame.minY)
let path = UIBezierPath()
path.move(to: p1)
path.addLine(to: p2)
path.addArc(withCenter: c1, radius: cornerRadius, startAngle: c1Start, endAngle: c1End, clockwise: false)
path.addLine(to: p4)
path.addArc(withCenter: c2, radius: cornerRadius, startAngle: c1End, endAngle: 0, clockwise: false)
path.addLine(to: p6)
path.addLine(to: p1)
// I am guessing you are trying to use a mask to the top level image?
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
imageCollectionView.layer.mask = maskLayer
}
推荐阅读
- c++ - 通用 2D 点作为 C++ 中的输入
- linux - 如何仅在出错时中止功能,但不中止脚本?
- python - 在 Arch 上通过 pip 安装 webrtcvad 时出现问题
- sql-server - 所以我们将数据从 .mdb 迁移到 SQL Server
- c# - 在 VR Oculus Quest 中闪烁?
- javascript - node js设置间隔方法调用
- spring - 什么是最好的 Spring Rest 服务作为桥接或直接 Kafta 与其 Rest 接口集成?
- excel - 将数据从 SQl 服务器导出到 Excel 时出现格式问题
- php - SQL 查询返回 0 行,而 DB 中返回 2
- c# - Microsoft BOT Framework BOT 间歇性停止工作