Swift:二阶贝塞尔曲线的联动

目录

  • 曲线上点算法
  • 点的手势处理:点击线生成点和间隔线有用间隔内拖动生成点
  • 方格和曲线交叉点的坐标获取

####一、曲线上点算法

  • 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、点击线生成点

    Swift:二阶贝塞尔曲线的联动

    剖析:点击线的话,首要是拿到点击点的坐标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