使用用户触摸和拖动事件旋转 CAShapeLayer，并确定 CAShapeLayer 的中心点

Question

这是我的演示：

如您所见，线的尖端没有旋转。这是我想要实现的目标：

我如何绘制原始线：当我点击屏幕时，我得到一个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!, ofColor: fillColor, inView: self)
        let dotEnd = drawLineFromPoint(start: dotEndPointX!, toPoint: dotEndPointY!, ofColor: fillColor, 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)
    }

现在是我如何处理长按和延长线，这实际上只是删除点击的线并在触摸移动时单独重绘所有内容（中线，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, radius: 15.0, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi * 2.0), 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))
            verticalLinePath2.addLine(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, radius: 15.0, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi * 2.0), 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, 0.0, 1.0)
verticalLineShape.anchorPoint = startPointOfTouchedRuler

但是verticalLineShape 没有旋转而是消失了。

那么最好的解决方法是什么？

Answer 1

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

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)