改变 CAShapeLayer 的边界尺寸高度不会改变实际尺寸，而是改变其位置。

huangapple
go评论86阅读模式
英文:

Changing a CAShapeLayer's bounds size height doesn't change the actual size, it changes it's position

问题

A CAShapeLayer is added as a sublayer of a view in a certain position:

// 使用贝塞尔路径创建矩形形状
let barRect = CGRect(x: 0, y: 0, width: 10, height: 100)
let barPath = UIBezierPath(rect: barRect)
let bar = CAShapeLayer()
bar.path = barPath.cgPath
bar.lineWidth = 0.5
// 将锚点放在矩形的左下角
bar.anchorPoint = CGPoint(x: 0, y: 1)
bar.bounds = CGRect(origin: CGPoint.zero, size: barRect.size)
// 在视图中定位矩形
bar.position = CGPoint(x: 0, y: 200)
layer.addSublayer(bar)

Later on, an action attempts to increase the height of the rectangle:

bar.bounds.size.height = 150

When this action is executed, the rectangle changes its position in the view, but not its height. The top of the rectangle moves to where the rectangle should be if the height is increased, but the bottom of the rectangle also moves up, maintaining the original height of the rectangle. What is the problem here? Thanks

英文:

A CAShapeLayer is added as a sublayer of a view in a certain position:

  1. // Use Bezier Path to create a rectangle shape
  2. let barRect = CGRect(x: 0, y: 0, width: 10, height: 100)
  3. let barPath = UIBezierPath(rect: barRect)
  4. let bar = CAShapeLayer()
  5. bar.path = barPath.cgPath
  6. bar.lineWidth = 0.5
  7. // Place anchor on lower left corner of the rectangle
  8. bar.anchorPoint = CGPoint(x: 0, y: 1)
  9. bar.bounds = CGRect(origin: CGPoint.zero, size: barRect.size)
  10. // Position bar in view
  11. bar.position = CGPoint(x: 0, y: 200)
  12. layer.addSublayer(bar)

Later on, an action attempts to increase the height of the rectangle:

  1. bar.bounds.size.height = 150

When this action is executed, the rectangle changes it's position in the view, but not it's height. The top of the rectangle moves to where the rectangle should be if the height is increased, but the bottom of the rectangle also moves up, maintaining the original height of the rectangle. What is the problem here? Thanks

答案1

得分: 2

Changing the layer's bounds does not change the layer's .path.

If your goal is simple rectangles, you can use CALayer instead of CAShapeLayer with a path.

Here's a quick example:

  1. class BarView: UIView {
  2.     
  3.     let bar1 = CAShapeLayer()
  4.     let bar2 = CALayer()
  5.     
  6.     override init(frame: CGRect) {
  7.         super.init(frame: frame)
  8.         commonInit()
  9.     }
  10.     required init?(coder: NSCoder) {
  11.         super.init(coder: coder)
  12.         commonInit()
  13.     }
  14.     func commonInit() -> Void {
  15.         
  16.         let barRect = CGRect(x: 0, y: 0, width: 10, height: 100)
  17.         let barPath = UIBezierPath(rect: barRect)
  18.         bar1.path = barPath.cgPath
  20.         bar1.lineWidth = 0.5
  21.         // Place anchor on the lower-left corner of the rectangle
  22.         bar1.anchorPoint = CGPoint(x: 0, y: 1)
  23.         bar1.bounds = CGRect(origin: CGPoint.zero, size: barRect.size)
  24.         // Position bar in view
  25.         bar1.position = CGPoint(x: 0, y: 200)
  26.         layer.addSublayer(bar1)
  27.         
  28.         bar2.borderWidth = 0.5
  29.         // Place the anchor on the lower-left corner of the rectangle
  30.         bar2.anchorPoint = CGPoint(x: 0, y: 1)
  31.         bar2.bounds = CGRect(origin: CGPoint.zero, size: barRect.size)
  32.         // Position the bar in view
  33.         bar2.position = CGPoint(x: 40, y: 200)
  34.         layer.addSublayer(bar2)
  36.         bar1.fillColor = UIColor.red.cgColor
  37.         bar1.strokeColor = UIColor.cyan.cgColor
  38.         
  39.         bar2.backgroundColor = UIColor.cyan.cgColor
  40.         bar2.borderColor = UIColor.red.cgColor
  42.         self.backgroundColor = .yellow
  43.         
  44.     }
  45.     
  46.     override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
  47.         // This does not change the layer's PATH
  48.         bar1.bounds.size.height = bar1.bounds.size.height == 150 ? 100 : 150
  49.         bar2.bounds.size.height = bar2.bounds.size.height == 150 ? 100 : 150
  50.     }
  51.     
  52. }

And a sample controller:

  1. class BarLayerVC: UIViewController {
  2.     
  3.     let someView = BarView()
  4.     
  5.     override func viewDidLoad() {
  6.         super.viewDidLoad()
  7.         
  8.         view.backgroundColor = UIColor(white: 0.95, alpha: 1.0)
  9.         
  10.         someView.translatesAutoresizingMaskIntoConstraints = false
  11.         view.addSubview(someView)
  12.         
  13.         let g = view.safeAreaLayoutGuide
  14.         NSLayoutConstraint.activate([
  15.             
  16.             someView.widthAnchor.constraint(equalToConstant: 100.0),
  17.             someView.centerXAnchor.constraint(equalTo: g.centerXAnchor),
  18.             
  19.             someView.heightAnchor.constraint(equalToConstant: 200.0),
  20.             someView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
  21.             
  22.         ])
  23.         
  24.     }
  25.     
  26. }

Tapping the yellow "BarView" will toggle the bar bounds heights between 100 and 150. Red bar is your original CAShapeLayer, and Cyan bar is a CALayer.

英文:

Changing the layer's bounds does not change the layer's .path.

If your goal is simple rectangles, you can use CALayer instead of CAShapeLayer with a path.

Here's a quick example:

  1. class BarView: UIView {
  2. 	
  3. 	let bar1 = CAShapeLayer()
  4. 	let bar2 = CALayer()
  5. 	
  6. 	override init(frame: CGRect) {
  7. 		super.init(frame: frame)
  8. 		commonInit()
  9. 	}
  10. 	required init?(coder: NSCoder) {
  11. 		super.init(coder: coder)
  12. 		commonInit()
  13. 	}
  14. 	func commonInit() -&gt; Void {
  15. 		
  16. 		let barRect = CGRect(x: 0, y: 0, width: 10, height: 100)
  17. 		let barPath = UIBezierPath(rect: barRect)
  18. 		bar1.path = barPath.cgPath
  20. 		bar1.lineWidth = 0.5
  21. 		// Place anchor on lower left corner of the rectangle
  22. 		bar1.anchorPoint = CGPoint(x: 0, y: 1)
  23. 		bar1.bounds = CGRect(origin: CGPoint.zero, size: barRect.size)
  24. 		// Position bar in view
  25. 		bar1.position = CGPoint(x: 0, y: 200)
  26. 		layer.addSublayer(bar1)
  27. 		
  28. 		bar2.borderWidth = 0.5
  29. 		// Place anchor on lower left corner of the rectangle
  30. 		bar2.anchorPoint = CGPoint(x: 0, y: 1)
  31. 		bar2.bounds = CGRect(origin: CGPoint.zero, size: barRect.size)
  32. 		// Position bar in view
  33. 		bar2.position = CGPoint(x: 40, y: 200)
  34. 		layer.addSublayer(bar2)
  36. 		bar1.fillColor = UIColor.red.cgColor
  37. 		bar1.strokeColor = UIColor.cyan.cgColor
  38. 		
  39. 		bar2.backgroundColor = UIColor.cyan.cgColor
  40. 		bar2.borderColor = UIColor.red.cgColor
  42. 		self.backgroundColor = .yellow
  43. 		
  44. 	}
  45. 	
  46. 	override func touchesBegan(_ touches: Set&lt;UITouch&gt;, with event: UIEvent?) {
  47. 		// this does not change the layer&#39;s PATH
  48. 		bar1.bounds.size.height = bar1.bounds.size.height == 150 ? 100 : 150
  49. 		bar2.bounds.size.height = bar2.bounds.size.height == 150 ? 100 : 150
  50. 	}
  51. 	
  52. }

and a sample controller:

  1. class BarLayerVC: UIViewController {
  2. 	
  3. 	let someView = BarView()
  4. 	
  5. 	override func viewDidLoad() {
  6. 		super.viewDidLoad()
  7. 		
  8. 		view.backgroundColor = UIColor(white: 0.95, alpha: 1.0)
  9. 		
  10. 		someView.translatesAutoresizingMaskIntoConstraints = false
  11. 		view.addSubview(someView)
  12. 		
  13. 		let g = view.safeAreaLayoutGuide
  14. 		NSLayoutConstraint.activate([
  15. 			
  16. 			someView.widthAnchor.constraint(equalToConstant: 100.0),
  17. 			someView.centerXAnchor.constraint(equalTo: g.centerXAnchor),
  18. 			
  19. 			someView.heightAnchor.constraint(equalToConstant: 200.0),
  20. 			someView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
  21. 			
  22. 		])
  23. 		
  24. 	}
  25. 	
  26. }

Tapping the yellow "BarView" will toggle the bar bounds heights between 100 and 150 ... Red bar is your original CAShapeLayer and Cyan bar is a CALayer:

改变 CAShapeLayer 的边界尺寸高度不会改变实际尺寸，而是改变其位置。 改变 CAShapeLayer 的边界尺寸高度不会改变实际尺寸，而是改变其位置。

Edit

Here's that same BarView class, but with a 3rd (green) bar. It uses a CAShapeLayer and updates its .path in layoutSubviews():

  1. class BarView: UIView {
  2. 	
  3. 	let bar1 = CAShapeLayer()
  4. 	let bar2 = CALayer()
  5. 	let bar3 = CAShapeLayer()
  6. 	
  7. 	override init(frame: CGRect) {
  8. 		super.init(frame: frame)
  9. 		commonInit()
  10. 	}
  11. 	required init?(coder: NSCoder) {
  12. 		super.init(coder: coder)
  13. 		commonInit()
  14. 	}
  15. 	func commonInit() -&gt; Void {
  16. 		
  17. 		let barRect = CGRect(x: 0, y: 0, width: 10, height: 100)
  18. 		let barPath = UIBezierPath(rect: barRect)
  19. 		bar1.path = barPath.cgPath
  21. 		bar1.lineWidth = 0.5
  22. 		// Place anchor on lower left corner of the rectangle
  23. 		bar1.anchorPoint = CGPoint(x: 0, y: 1)
  24. 		bar1.bounds = CGRect(origin: CGPoint.zero, size: barRect.size)
  25. 		// Position bar in view
  26. 		bar1.position = CGPoint(x: 0, y: 200)
  27. 		layer.addSublayer(bar1)
  28. 		
  29. 		bar2.borderWidth = 0.5
  30. 		// Place anchor on lower left corner of the rectangle
  31. 		bar2.anchorPoint = CGPoint(x: 0, y: 1)
  32. 		bar2.bounds = CGRect(origin: CGPoint.zero, size: barRect.size)
  33. 		// Position bar in view
  34. 		bar2.position = CGPoint(x: 40, y: 200)
  35. 		layer.addSublayer(bar2)
  37. 		bar1.fillColor = UIColor.red.cgColor
  38. 		bar1.strokeColor = UIColor.cyan.cgColor
  39. 		
  40. 		bar2.backgroundColor = UIColor.cyan.cgColor
  41. 		bar2.borderColor = UIColor.red.cgColor
  43. 		bar3.fillColor = UIColor.green.cgColor
  44. 		bar3.strokeColor = UIColor.blue.cgColor
  45. 		
  46. 		bar3.lineWidth = 0.5
  47. 		// Place anchor on lower left corner of the rectangle
  48. 		bar3.anchorPoint = CGPoint(x: 0, y: 1)
  49. 		bar3.bounds = CGRect(origin: CGPoint.zero, size: barRect.size)
  50. 		// Position bar in view
  51. 		bar3.position = CGPoint(x: 80, y: 200)
  52. 		layer.addSublayer(bar3)
  53. 		
  54. 		self.backgroundColor = .yellow
  55. 		
  56. 	}
  57. 	
  58. 	override func layoutSubviews() {
  59. 		super.layoutSubviews()
  60. 		
  61. 		let barRect = CGRect(x: 0, y: 0, width: 10, height: bar3.bounds.height)
  62. 		let barPath = UIBezierPath(roundedRect: barRect, cornerRadius: 4.0)
  64. 		bar3.path = barPath.cgPath
  65. 		
  66. 	}
  67. 	
  68. 	override func touchesBegan(_ touches: Set&lt;UITouch&gt;, with event: UIEvent?) {
  69. 		// this does not change the layer&#39;s PATH
  70. 		bar1.bounds.size.height = bar1.bounds.size.height == 150 ? 100 : 150
  71. 		bar2.bounds.size.height = bar2.bounds.size.height == 150 ? 100 : 150
  72. 		bar3.bounds.size.height = bar3.bounds.size.height == 150 ? 100 : 150
  73. 	}
  74. 	
  75. }

改变 CAShapeLayer 的边界尺寸高度不会改变实际尺寸，而是改变其位置。 改变 CAShapeLayer 的边界尺寸高度不会改变实际尺寸，而是改变其位置。

I changed the path for "bar3" to a roundedRect so we can see why we might want to use a CAShapeLayer.

huangapple
  • 本文由 发表于 2023年3月4日 02:11:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/75630530.html
  • cashapelayer
  • core-animation
  • ios
  • swift
  • uikit
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定