xcode SwiftUI可由用户调整大小的带角矩形

我正试图使一个文本扫描功能，我需要一个矩形，用户可以通过拖动其角落调整大小。这个想法和photomath是一样的。
我有这个矩形用户界面的代码，但我不知道如何让用户调整它的大小。
它应该看起来像这样，并且可以调整大小：

下面是我的代码：

import SwiftUI

struct ViewCamera: View {
        var body: some View {
            GeometryReader { geometry in
                let cutoutWidth: CGFloat = min(geometry.size.width, geometry.size.height) / 1.5

                ZStack {
                    Rectangle()
                        .fill(Color.black.opacity(0.5))
                        
                    RoundedRectangle(cornerRadius: 20)
                        .fill(Color.black)
                        .frame(width: cutoutWidth, height: cutoutWidth, alignment: .center)
                        .blendMode(.destinationOut)
                }.compositingGroup()
                
                Path { path in
                    
                    let left = (geometry.size.width - cutoutWidth) / 2.0
                    let right = left + cutoutWidth
                    let top = (geometry.size.height - cutoutWidth) / 2.0
                    let bottom = top + cutoutWidth
                    
                    path.addPath(
                        createCornersPath(
                            left: left, top: top,
                            right: right, bottom: bottom,
                            cornerRadius: 40, cornerLength: 20
                        )
                    )
                }
                .stroke(Color("AccentColor2"), lineWidth: 8)
                .frame(width: cutoutWidth, height: cutoutWidth, alignment: .center)
                .aspectRatio(1, contentMode: .fit)
            }
        }
        
        private func createCornersPath(
            left: CGFloat,
            top: CGFloat,
            right: CGFloat,
            bottom: CGFloat,
            cornerRadius: CGFloat,
            cornerLength: CGFloat
        ) -> Path {
            var path = Path()

            // top left
            path.move(to: CGPoint(x: left, y: (top + cornerRadius / 2.0)))
            path.addArc(
                center: CGPoint(x: (left + cornerRadius / 2.0), y: (top + cornerRadius / 2.0)),
                radius: cornerRadius / 2.0,
                startAngle: Angle(degrees: 180.0),
                endAngle: Angle(degrees: 270.0),
                clockwise: false
            )

            path.move(to: CGPoint(x: left + (cornerRadius / 2.0), y: top))
            path.addLine(to: CGPoint(x: left + (cornerRadius / 2.0) + cornerLength, y: top))

            path.move(to: CGPoint(x: left, y: top + (cornerRadius / 2.0)))
            path.addLine(to: CGPoint(x: left, y: top + (cornerRadius / 2.0) + cornerLength))

            // top right
            path.move(to: CGPoint(x: right - cornerRadius / 2.0, y: top))
            path.addArc(
                center: CGPoint(x: (right - cornerRadius / 2.0), y: (top + cornerRadius / 2.0)),
                radius: cornerRadius / 2.0,
                startAngle: Angle(degrees: 270.0),
                endAngle: Angle(degrees: 360.0),
                clockwise: false
            )

            path.move(to: CGPoint(x: right - (cornerRadius / 2.0), y: top))
            path.addLine(to: CGPoint(x: right - (cornerRadius / 2.0) - cornerLength, y: top))

            path.move(to: CGPoint(x: right, y: top + (cornerRadius / 2.0)))
            path.addLine(to: CGPoint(x: right, y: top + (cornerRadius / 2.0) + cornerLength))

            // bottom left
            path.move(to: CGPoint(x: left + cornerRadius / 2.0, y: bottom))
            path.addArc(
                center: CGPoint(x: (left + cornerRadius / 2.0), y: (bottom - cornerRadius / 2.0)),
                radius: cornerRadius / 2.0,
                startAngle: Angle(degrees: 90.0),
                endAngle: Angle(degrees: 180.0),
                clockwise: false
            )
            
            path.move(to: CGPoint(x: left + (cornerRadius / 2.0), y: bottom))
            path.addLine(to: CGPoint(x: left + (cornerRadius / 2.0) + cornerLength, y: bottom))

            path.move(to: CGPoint(x: left, y: bottom - (cornerRadius / 2.0)))
            path.addLine(to: CGPoint(x: left, y: bottom - (cornerRadius / 2.0) - cornerLength))

            // bottom right
            path.move(to: CGPoint(x: right, y: bottom - cornerRadius / 2.0))
            path.addArc(
                center: CGPoint(x: (right - cornerRadius / 2.0), y: (bottom - cornerRadius / 2.0)),
                radius: cornerRadius / 2.0,
                startAngle: Angle(degrees: 0.0),
                endAngle: Angle(degrees: 90.0),
                clockwise: false
            )
            
            path.move(to: CGPoint(x: right - (cornerRadius / 2.0), y: bottom))
            path.addLine(to: CGPoint(x: right - (cornerRadius / 2.0) - cornerLength, y: bottom))

            path.move(to: CGPoint(x: right, y: bottom - (cornerRadius / 2.0)))
            path.addLine(to: CGPoint(x: right, y: bottom - (cornerRadius / 2.0) - cornerLength))

            return path
        }
    }

struct ViewCamera_Previews: PreviewProvider {
    static var previews: some View {
        ViewCamera()
    }
}

尝试创建一个自定义视图，显示具有大小和位置属性的矩形，然后添加DragGesture，以便在用户调整矩形大小时调整矩形大小

struct ResizableRectangle: View {
@State private var size = CGSize(width: 200, height: 200)
@State private var startPosition: CGPoint = .zero
@State private var resizing = false

var body: some View {
    Rectangle()
        .fill(Color.blue.opacity(0.3))
        .frame(width: size.width, height: size.height)
        .gesture(
            DragGesture()
                .onChanged { value in
                    if !resizing {
                        startPosition = value.location
                        resizing = true
                    }
                    let delta = CGSize(
                        width: value.location.x - startPosition.x,
                        height: value.location.y - startPosition.y
                    )
                    size = CGSize(
                        width: max(50, size.width + delta.width),
                        height: max(50, size.height + delta.height)
                    )
                    startPosition = value.location
                }
                .onEnded { _ in
                    resizing = false
                }
        )
        .cornerRadius(10)
        .border(Color.blue)
}

}

xcode SwiftUI可由用户调整大小的带角矩形

1条答案

相关问题

热门标签

最新问答