如何解决通过用户触摸和拖动事件旋转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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。