0

我是 Swift 和 Core Animation 的新手。我想像这张图片一样在 CAShapeLayer 周围创建矩形框，但我不知道。

详细地说，我正在通过PocketSVG解析 SVG 图像并将其UIBezierPath转换为CAShapeLayer，然后我将这些层添加到UI Image View作为sublayer。

这是我将Path转换为CaShape Layer的代码。

fileprivate func createLayer(path: SVGBezierPath) -> CAShapeLayer {
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    if let any = path.svgAttributes["stroke"] {
        shapeLayer.strokeColor = (any as! CGColor)
    }
    
    if let any = path.svgAttributes["fill"] {
        shapeLayer.fillColor = (any as! CGColor)
    }
    return shapeLayer
}

下面是代码，我在其中将图层添加到 UIImage View (backgroundIV)

        for path in paths {
        path.apply(.init(scaleX: scale, y: scale))
        let layer = createLayer(path: path)
        layer.frame = self.backgroundIV.bounds
        self.backgroundIV.layer.addSublayer(layer)
    }

我还将TapGesture、RotateGesture、ScaleGesture 和 PanGesture 添加到 CA 形状图层，下面是代码。

    @objc func rotateLayer(_ sender: UIRotationGestureRecognizer) {
    selectedLayer?.setAffineTransform(CGAffineTransform(rotationAngle: sender.rotation))
}

@objc func selectLayer(_ sender: UITapGestureRecognizer) {
    let point = sender.location(in: self.backgroundIV)
    guard let layers = self.backgroundIV.layer.sublayers
    else { return }
    var hitLayers: [CAShapeLayer] = []
    
    selectedLayer?.lineWidth = CGFloat(0)
    
    for subLayer in layers {
        if let thisLayer = subLayer as? CAShapeLayer,
           let pth = thisLayer.path {
            let layerPoint: CGPoint = thisLayer.convert(point, from: self.backgroundIV.layer)
            if pth.contains(layerPoint) {
                hitLayers.append(thisLayer)
            }
        }
    }
    
    selectedLayer = hitLayers.last
    selectedLayer?.strokeColor = UIColor.red.cgColor
    selectedLayer?.lineWidth = CGFloat(3)
    selectedLayerRect = CGRect(origin: point, size: CGSize(width: 100, height: 100))
    showPopupMenu()
    
}

@objc func moveLayer(_ recognizer: UIPanGestureRecognizer) {
    let p = recognizer.location(in: self.backgroundIV)
    selectedLayer?.position = p
}

@objc func scaleLayer(_ sender: UIPinchGestureRecognizer) {
    selectedLayer?.transform = CATransform3DMakeScale(sender.scale, sender.scale, 1)
}

在SelectLayer方法的最后几行中，我通过增加其笔触宽度和颜色来突出显示所选图层。

selectedLayer?.strokeColor = UIColor.red.cgColor
selectedLayer?.lineWidth = CGFloat(3)

当我选择图层时，我只是将它的lineWidth值设置为 0，这不是一个好习惯。

有没有办法像这张图片一样创建矩形框？

4

4 回答 4

0

试试这个..
我希望这对你有帮助......

import UIKit
class ViewController : UIViewController {

let containerView: UIView = {
    let view = UIView()
    view.backgroundColor = .clear
    return view
}()

override func viewDidLoad() {
    super.viewDidLoad()
    
    containerView.frame = CGRect(x: view.frame.width/2 - 100, y: view.frame.height/2 - 100, width: 200, height: 200)
    view.addSubview(containerView)
    
    drawRectangle()
}

private func drawRectangle() {
    
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addLine(to: CGPoint(x: 200, y: 0))
    path.addLine(to: CGPoint(x: 200, y: 200))
    path.addLine(to: CGPoint(x: 0, y: 200))
    path.addLine(to: CGPoint(x: 0, y: 0))
    
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = UIColor.red.cgColor
    shapeLayer.fillColor = UIColor.black.cgColor
    shapeLayer.lineWidth = 3
    
    containerView.layer.addSublayer(shapeLayer)
    }
}
于 2021-11-04T08:06:23.260 回答
0

这是我的问题的答案

    var selectedLayer: CAShapeLayer! {
    didSet {
        guard let layer = selectedLayer else {return}
        box.frame = layer.path?.boundingBox ?? CGRect()
        box.borderWidth = layer.contentsScale * 3
        box.borderColor = UIColor.red.cgColor
        self.updateControlView()
        layer.addSublayer(box)
    }
    willSet {
        self.controlView.isHidden = true
        box.removeFromSuperlayer()
    }
}

输出

于 2021-12-13T06:24:24.690 回答
0

如果我理解正确，您的问题是“如何绘制虚线轮廓”？

如果是这样，您可以.lineDashPattern在形状图层上设置 。

例如：

    selectedLayer?.strokeColor = UIColor.red.cgColor
    selectedLayer?.lineWidth = 3.0
    
    // set the dash pattern for the stroke
    selectedLayer?.lineDashPattern = [10, 10]
于 2021-12-12T15:11:00.323 回答
-1

如果你想在图层的框架周围画一个框，这很容易。只需设置aLayer.borderWidth=1和aLayer.borderColor=UIColor.someColor.cgColor。

系统将为您在图层周围添加边框。

但是，如果您的图层的框架比它们包含的路径大，那么您的矩形可能会比您想要的大。

于 2021-11-03T12:23:34.800 回答