效果图
目录
- 曲线上点算法
- 点的手势处理：点击线生成点和距离线有效距离内拖动生成点
- 方格和曲线交叉点的坐标获取
一、曲线上点算法
1.1、思路：根据坐标上的点，计算控制点，从而再通过控制点之间分割成100个点(具体的控制点之间点的个数可以自己定义)，通过每个控制点之间的计算生成点，最后串起来就是上图看到的曲线
-
1.2、部分代码
//MARK: 通过已知点绘制path private func calculate(pointList: [CGPoint]) { allPointList.removeAll() let path = CGMutablePath() // 曲线斜率 let sharpenRatio = 1.0 if (pointList.count < 3) { path.addLines(between: pointList) drawPath(path: path) return } var pMidOfLm = CGPoint() var pMidOfMr = CGPoint() var cache: CGPoint? = nil var startPoint = pointList[0] for i in 0...pointList.count - 3 { let pL = pointList[I] let pM = pointList[i + 1] let pR = pointList[i + 2] pMidOfLm.x = (pL.x + pM.x) / 2.0 pMidOfLm.y = (pL.y + pM.y) / 2.0 pMidOfMr.x = (pM.x + pR.x) / 2.0 pMidOfMr.y = (pM.y + pR.y) / 2.0 let lengthOfLm = distanceBetweenPoints(pL, pM) let lengthOfMr = distanceBetweenPoints(pR, pM) var ratio = lengthOfLm / (lengthOfLm + lengthOfMr) * sharpenRatio let oneMinusRatio = (1 - ratio) * sharpenRatio let dx = pMidOfLm.x - pMidOfMr.x let dy = pMidOfLm.y - pMidOfMr.y var cLeft = CGPoint() cLeft.x = pM.x + dx * ratio cLeft.y = pM.y + dy * ratio var cRight = CGPoint() cRight.x = pM.x + -dx * oneMinusRatio cRight.y = pM.y + -dy * oneMinusRatio if (i == 0) { let pMidOfLCLeft = CGPoint(x: (pL.x + cLeft.x) / 2.0, y: (pL.y + cLeft.y) / 2.0) let pMidOfCLeftM = CGPoint(x: (cLeft.x + pM.x) / 2.0, y: (cLeft.y + pM.y) / 2.0) let length1 = distanceBetweenPoints(cLeft, pL) let length2 = distanceBetweenPoints(cLeft, pM) ratio = length1 / (length1 + length2) * sharpenRatio var first = CGPoint() first.x = cLeft.x + (pMidOfLCLeft.x - pMidOfCLeftM.x) * ratio first.y = cLeft.y + (pMidOfLCLeft.y - pMidOfCLeftM.y) * ratio addPoint(startPoint, first, cLeft, pM) startPoint = pM } else { // bezierPath.move(to: startPoint) if let weakCache = cache { // bezierPath.addCurve(to: pM, control1: weakCache, control2: cLeft) addPoint(startPoint, weakCache, cLeft, pM) startPoint = pM } } cache = cRight if (i == pointList.count - 3) { let pMidOfMCRight = CGPoint(x: (pM.x + cRight.x) / 2.0, y: (pM.y + cRight.y) / 2.0) let pMidOfCRightR = CGPoint(x: (pR.x + cRight.x) / 2.0, y: (pR.y + cRight.y) / 2.0) let length1 = distanceBetweenPoints(cRight, pM) let length2 = distanceBetweenPoints(pR, cRight) ratio = length2 / (length1 + length2) * sharpenRatio var last = CGPoint() last.x = cRight.x + (pMidOfCRightR.x - pMidOfMCRight.x) * ratio last.y = cRight.y + (pMidOfCRightR.y - pMidOfMCRight.y) * ratio // startPoint = pM // bezierPath.move(to: startPoint) // bezierPath.addCurve(to: pR, control1: cRight, control2: last) addPoint(startPoint, cRight, last, pR) } } path.addLines(between: allPointList) drawPath(path: path) }
二、点的手势处理
-
2.1、点击线生成点
点击线生成点分析：点击线的话，首先是拿到点击点的坐标p0，根据这个坐标，获取这个点与线垂直和水平交叉点的坐标p1和p2，看这个两个点到p0距离
代码示例：//MARK: 父视图点击手势 /// 父视图点击手势 /// - Parameter panGesture: 手势 @objc func superTapGester(gesture: UITapGestureRecognizer) { guard let currentPath, isCanUserInteractionEnabled, points.count < maxCircleViewNumber else { return } let tapLocation = gesture.location(in: self) debugPrint("Tap location in parent view: \(tapLocation)") // 1、点击点首先要在 左右两个点的矩形内，如果不在不生点 var previousPoint: CGPoint = CGPoint() var nextPoint: CGPoint = CGPoint() /// 要插入的index var insertIndex: Int = 0 for (index, item) in points.enumerated() { if tapLocation.x < item.x { insertIndex = index // 找到后面的点 nextPoint = item break } previousPoint = item } guard tapLocation.x > previousPoint.x && tapLocation.y < previousPoint.y && tapLocation.x < nextPoint.x && tapLocation.y > nextPoint.y else { debugPrint("❌不在矩形范围内", "previousPoint：\(previousPoint) nextPoint：\(nextPoint)") return } // 在矩形的范围内，确定添加的点事垂直点还是水平点 // 垂直点 let vPoint = getPointXY(xy: tapLocation.x, path: currentPath) // 水平点 let hPoint = getPointXY(xy: tapLocation.y, path: currentPath, isX: false) // 垂直长度 let vLength: CGFloat = abs(tapLocation.y - vPoint.y) // 水平长度 let hLength: CGFloat = abs(tapLocation.x - hPoint.x) guard vLength < effectiveDistance || hLength < effectiveDistance else { debugPrint("✅在矩形范围内 ❌：不在有效距离：\(effectiveDistance) 内， 垂直距离：\(vLength) 水平距离：\(hLength)") return } // 在有效的范围内 var point: CGPoint = CGPoint() if vLength < hLength { point = vPoint debugPrint("✅在矩形范围内：取值垂直的点") } else { point = hPoint debugPrint("✅在矩形范围内：取值水平的点") } // 2、在矩形内，生成一个点 let view = CircleView() view.layer.cornerRadius = 7.5 view.clipsToBounds = false view.backgroundColor = .randomColor view.layer.borderWidth = 3 view.layer.borderColor = UIColor.white.cgColor view.tag = insertIndex + 100 self.addSubview(view) // 插入视图 circleViews.insert(view, at: insertIndex) // 插入生成的点 points.insert(point, at: insertIndex) // 改变其他视图的tag for index in (insertIndex + 1)...(circleViews.count - 1) { circleViews[index].tag = index + 100 } let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(panGester)) view.addGestureRecognizer(panGestureRecognizer) view.snp.makeConstraints { make in make.center.equalTo(point) make.size.equalTo(CGSize(width: 15, height: 15)) } // 加震动 let generator = UINotificationFeedbackGenerator() generator.notificationOccurred(.success) let param = getParamPointArray() dataClosure?(param.cmd_state, param.auxiliary_curve) } -
2.2、距离线有效距离内拖动生成点
分析：拖动的话，首先是拿到点拖动起点的坐标p0，根据p0的坐标xy，分别获取曲线上的点p1和p2，同2.1一样拿到p0与两点的距离，看是否在有效距离effectiveDistance内，如果在看谁距离很近，近的则是点生成点的起点，从而拖动中点跟着移动，这个是利用的父视图的拖动手势
代码示例：//MARK: 父视图拖动手势 /// 父视图拖动手势 /// - Parameter panGesture: 手势 @objc func superPanGester(panGesture: UIPanGestureRecognizer) { // 最多maxCircleViewNumber个点，包含两头的点 guard isCanUserInteractionEnabled, points.count < maxCircleViewNumber else { return } switch panGesture.state { case .began: let startPanLocation = panGesture.location(in: self) let result = isPointLine(point: startPanLocation) if result.isEffectivePoint { // 在拖动开始的位置生成一个点 superPanInserTag = 100 + result.insertIndex // 2、在矩形内，生成一个点 let view = CircleView() view.layer.cornerRadius = 7.5 view.clipsToBounds = false view.backgroundColor = .randomColor view.layer.borderWidth = 3 view.layer.borderColor = UIColor.white.cgColor view.tag = superPanInserTag self.addSubview(view) // 插入视图 circleViews.insert(view, at: result.insertIndex) // 插入生成的点 points.insert(startPanLocation, at: result.insertIndex) // 改变其他视图的tag for index in (result.insertIndex + 1)...(circleViews.count - 1) { circleViews[index].tag = index + 100 } let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(panGester)) view.addGestureRecognizer(panGestureRecognizer) view.snp.makeConstraints { make in make.center.equalTo(startPanLocation) make.size.equalTo(CGSize(width: 15, height: 15)) } setNeedsDisplay() // 加震动 let generator = UINotificationFeedbackGenerator() generator.notificationOccurred(.success) } debugPrint("super-拖动开始: \(startPanLocation) superPanInserTag:\(superPanInserTag)") case .changed: let tapLocation = panGesture.location(in: self) if superPanInserTag > 0 { debugPrint("super-拖动中: \(tapLocation) inserTag:\(superPanInserTag)") // 添加的点跟着移动 let panGestureRecognizerTag = superPanInserTag - 100 let previousPoint: CGPoint = points[panGestureRecognizerTag - 1] let nextPoint: CGPoint = points[panGestureRecognizerTag + 1] guard tapLocation.x > previousPoint.x && tapLocation.y < previousPoint.y && tapLocation.x < nextPoint.x && tapLocation.y > nextPoint.y else { debugPrint("❌不在矩形范围内", "previousPoint：\(previousPoint) nextPoint：\(nextPoint)") // 移除该点 points.remove(at: panGestureRecognizerTag) let view = circleViews[panGestureRecognizerTag] circleViews.remove(at: panGestureRecognizerTag) view.removeFromSuperview() for index in panGestureRecognizerTag...(circleViews.count - 1) { circleViews[index].tag = index + 100 } // 加震动 let generator = UINotificationFeedbackGenerator() generator.notificationOccurred(.success) superPanInserTag = 0 setNeedsDisplay() return } let view = circleViews[panGestureRecognizerTag] view.snp.updateConstraints { make in make.center.equalTo(tapLocation) } points[panGestureRecognizerTag] = tapLocation debugPrint("打印tag：\(panGestureRecognizerTag)") setNeedsDisplay() } case .ended: superPanInserTag = 0 debugPrint("super-拖动结束 新的value") default: debugPrint("super-其他") } } //MARK: 是否响应父视图拖动的手势 /// 是否响应拖动的手势：实现 gestureRecognizer(_:shouldReceive:) 方法 func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool { // 根据条件决定是否响应手势 if isCanUserInteractionEnabled { let location = touch.location(in: self) let result = isPointLine(point: location) return result.isEffectivePoint } else { return false } }
三、方格和曲线交叉点的坐标获取
-
3.1、方格
这个花方格就比较简单了，只需要两个for循环即可class GridView: UIView { override init(frame: CGRect) { super.init(frame: frame) } override func draw(_ rect: CGRect) { super.draw(rect) let width: CGFloat = rect.size.width let height: CGFloat = rect.size.height // 创建一个UIBezierPath对象 let path = UIBezierPath() // 设置线宽和颜色 UIColor.yellow.setStroke() path.lineWidth = 1.0 let lineVWidth: CGFloat = height / 10.0 // 绘制水平线 for i in 0...10 { path.move(to: CGPoint(x: 0, y: CGFloat(i) * lineVWidth)) path.addLine(to: CGPoint(x: width, y: CGFloat(i) * lineVWidth)) } // 绘制垂直线 let lineHWidth: CGFloat = width / 10.0 for i in 0...10 { path.move(to: CGPoint(x: CGFloat(i) * lineHWidth, y: 0)) path.addLine(to: CGPoint(x: CGFloat(i) * lineHWidth, y: height)) } // 将路径添加到视图中并绘制 path.stroke() } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } } -
3.2、方格和曲线交叉点的坐标获取
//MARK: - CGMutablePath曲线-根据x坐标获取y坐标 extension BezierCurveView { //MARK: 根据某个点的x坐标获取y坐标 /// 根据某个点的x坐标获取y坐标 /// - Parameters: /// - x: x / y坐标 /// - path: CGMutablePath /// - Returns: description private func getPointXY(xy: CGFloat, path: CGPath, isX: Bool = true) -> CGPoint { var value: CGFloat = 0.0 var prevPoint = CGPoint.zero path.applyWithBlock { element in switch element.pointee.type { case .moveToPoint: prevPoint = element.pointee.points[0] case .addLineToPoint: let startPoint = prevPoint let endPoint = element.pointee.points[0] if isX { if xy >= startPoint.x && xy <= endPoint.x { let t = (xy - startPoint.x) / (endPoint.x - startPoint.x) value = startPoint.y + t * (endPoint.y - startPoint.y) } } else { if xy <= startPoint.y && xy >= endPoint.y { let t = (xy - startPoint.y) / (endPoint.y - startPoint.y) value = startPoint.x + t * (endPoint.x - startPoint.x) } } prevPoint = endPoint default: break } } return isX ? CGPoint(x: xy, y: value) : CGPoint(x: value, y: xy) } }
demo地址
更多的扩展请参考另一个基础库JKSwiftExtension
