通过用户触摸和拖动事件旋转CAShapeLayer，并钉牢CAShapeLayer的中心点

问题描述

这是我的演示：

可以看到，线的尖端没有旋转。我要实现的目标：

我如何绘制原始线条：在屏幕上点击时，我得到了CGPoint并在此之上绘制所有内容

func drawWholeRuler(originalPoint:CGPoint){ //Draw a whole ruler with every components
        
        endPoint = CGPoint(x: originalPoint.x - 70,y: originalPoint.y)
        startPoint = CGPoint(x: originalPoint.x + 70,y: originalPoint.y)
        dotStartPointX = CGPoint(x: startPoint!.x,y: startPoint!.y - dotLinesize)
        dotStartPointY = CGPoint(x: startPoint!.x,y: startPoint!.y + dotLinesize)
        dotEndPointX = CGPoint(x: endPoint!.x,y: endPoint!.y - dotLinesize)
        dotEndPointY = CGPoint(x: endPoint!.x,y: endPoint!.y + dotLinesize)
        
        let path = drawLineFromPoint(start: startPoint!,toPoint: endPoint!,ofColor: fillColor,inView: self)
        
        
        let dotStart = drawLineFromPoint(start: dotStartPointX!,toPoint: dotStartPointY!,inView: self)
        let dotEnd = drawLineFromPoint(start: dotEndPointX!,toPoint: dotEndPointY!,inView: self)
        
        
        let circleStart = drawCircle(point: startPoint!)
        let circleEnd = drawCircle(point: endPoint!)
        let newPath:bezierPathStruct = bezierPathStruct(startPoint: startPoint!,endPoint: endPoint!,dotStartPointX: dotStartPointX!,dotStartPointY: dotStartPointY!,dotEndPointX: dotEndPointX!,dotEndPointY: dotEndPointY!,path: path,dotStart: dotStart,dotEnd: dotEnd,circleStart: circleStart,circleEnd:circleEnd)
        bezierPathArray.append(newPath)
    }

现在是我处理longPress并延长线的方式，实际上就是删除触摸的线并在触摸移动时分别重画所有内容（中线，2条垂直线，2个气泡）

@objc func handleLongPress(recognizer: UIGestureRecognizer) {
        var startPointOfTouchedRuler:CGPoint = .zero
        let zeroPoint:CGPoint = .zero
        
        let currentPanPoint = longTapRecognizer.location(in: self)
       // print("here",currentPanPoint)
        if let sublayers = self.layer.sublayers as? [CAShapeLayer]{ //get all CAShape and stored as an array
            for layer in sublayers{ // go through each CAShape
                if let path = layer.path,path.contains(currentPanPoint) { // if there is a path at that point then return,else create a path
                    startPointOfTouchedRuler = detectWhichRuler(layer: layer)
                    if startPointOfTouchedRuler != zeroPoint{
                        //  drawCircle(point: startPointOfTouchedRuler)
                        break
                    }else{
                    }
                }
            }
        }
        let linePath = UIBezierPath()
        var circlePath = UIBezierPath()
        var circlePath2 = UIBezierPath()
        
        let verticalLinePath1 = UIBezierPath()
        let verticalLinePath2 = UIBezierPath()

        switch longTapRecognizer.state {
        case .began:
            tapGestureStartPoint = startPointOfTouchedRuler
            if tapGestureStartPoint == zeroPoint {return}
            self.layer.addSublayer(lineshape)
            self.layer.addSublayer(shapeLayer1)
            self.layer.addSublayer(shapeLayer2)
            self.layer.addSublayer(verticalLineshape)
            self.layer.addSublayer(verticalLineshape2)
            shapeLayer1.anchorPoint = startPointOfTouchedRuler
     
            verticalLinePath1.move(to: CGPoint(x: startPointOfTouchedRuler.x,y: startPointOfTouchedRuler.y - dotLinesize ))
            verticalLinePath1.addLine(to: CGPoint(x: startPointOfTouchedRuler.x,y: startPointOfTouchedRuler.y + dotLinesize))
            
            verticalLinePath2.move(to: CGPoint(x: currentPanPoint.x,y: currentPanPoint.y - dotLinesize))
            verticalLinePath2.addLine(to: CGPoint(x: currentPanPoint.x,y: currentPanPoint.y + dotLinesize))
            verticalLineshape.path = verticalLinePath1.cgPath
            verticalLineshape2.path = verticalLinePath2.cgPath

            linePath.move(to: tapGestureStartPoint)
            linePath.addLine(to: currentPanPoint)
            circlePath = UIBezierPath(arcCenter: currentPanPoint,radius: 15.0,startAngle: CGFloat(0),endAngle: CGFloat(Double.pi * 2.0),clockwise: true)
            circlePath2 = UIBezierPath(arcCenter: startPointOfTouchedRuler,clockwise: true)
            shapeLayer2.path = circlePath2.cgPath
            shapeLayer1.path = circlePath.cgPath
            lineshape.path = linePath.cgPath

        case .changed:
//
            verticalLinePath2.move(to: CGPoint(x: currentPanPoint.x,y: currentPanPoint.y + dotLinesize))
            verticalLineshape2.path = verticalLinePath2.cgPath
            linePath.move(to: tapGestureStartPoint)
            linePath.addLine(to: currentPanPoint)
            circlePath = UIBezierPath(arcCenter: currentPanPoint,clockwise: true)
            shapeLayer1.path = circlePath.cgPath
            circlePath.move(to: tapGestureStartPoint)
            lineshape.path = linePath.cgPath
        
        case .ended:
            verticalLineshape.path = nil
            verticalLineshape2.path = nil
            verticalLineshape2.removeFromSuperlayer()
            verticalLineshape.removeFromSuperlayer()
            
            shapeLayer2.path = nil
            shapeLayer2.removeFromSuperlayer()
            lineshape.path = nil
            shapeLayer1.path = nil
            lineshape.removeFromSuperlayer()
            shapeLayer1.removeFromSuperlayer()
            if tapGestureStartPoint == zeroPoint {return}
            extendaline(startPoint: tapGestureStartPoint,currentPoint: currentPanPoint)
            shouldDeleteRuler = true
        default: print("default")
            break
        }
        
    }

现在，我要在用户按住并移动手指时在边缘旋转2条线。我尝试了CATransform3DRotate，但它没有任何改变。 我也尝试过

verticalLineshape.anchorPoint = startPointOfTouchedRuler
let degrees = 90.0
let radians = CGFloat(degrees * .pi / 180)
verticalLineshape.transform = CATransform3DMakeRotation(radians,0.0,1.0)
verticalLineshape.anchorPoint = startPointOfTouchedRuler

但是verticalLineshape消失了，没有旋转。

那么最好的方法是什么？

解决方法

我发现，除了旋转CAShapeLayer之外，我只需要在UIBezierPath之前旋转verticalLineShape.path = verticalLinePath1.cgPath 我做了什么：

extension UIBezierPath {
    func rotate(path:UIBezierPath,degree:CGFloat){
        let bounds:CGRect = path.cgPath.boundingBox
        let center:CGPoint = CGPoint(x: bounds.midX,y: bounds.midY)
        let radians:CGFloat = (degree/180 * .pi)
        var transform:CGAffineTransform = CGAffineTransform.identity
        transform = transform.translatedBy(x: center.x,y: center.y);
        transform = transform.rotated(by: radians);
        transform = transform.translatedBy(x: -center.x,y: -center.y);
        path.apply(transform)
    }
}

使用 verticalLinePath1.rotate(path: verticalLinePath1,degree: 30)