带有用户触摸和拖动事件的旋转CAShapeLayer和CAShapeLayer的中心点被钉住
带有用户触摸和拖动事件的旋转CAShapeLayer和CAShapeLayer的中心点被钉住
提问于 2020-10-07 15:37:12
下面是我的演示：
正如您所看到的，线条的顶端并未旋转。这就是我想要实现的：
我如何绘制原始线:当我点击屏幕时，我得到了一个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)
}现在是我如何处理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, 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消失了，而不是旋转。
那么，如何才是实现这一目标的最佳方法呢？
Stack Overflow用户
发布于 2020-10-07 16:45:15
我想，我只需要在verticalLineShape.path = verticalLinePath1.cgPath之前旋转CAShapeLayer，而不是旋转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)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64239404
复制相关文章
相似问题
腾讯云开发者
