主页 / coding / 问题 / 79081597
Accepted
swiftPunk
Asked: 2024-10-13 02:01:17 +0800 CST

如何使用 SwiftUI 中定义的路径解决大小和形状变形问题？

  • 772

我有一条带有以下代码和照片的六边形路径：

 struct HorizontalHexagon: InsettableShape {
    
    var insetAmount: CGFloat = CGFloat.zero

    func path(in rect: CGRect) -> Path {

        return Path { path in
            path.move(to: CGPoint(x: rect.minX + insetAmount, y: rect.midY))
            path.addLine(to: CGPoint(x: rect.maxX/4.0, y: rect.minY + insetAmount))
            path.addLine(to: CGPoint(x: rect.maxX - rect.maxX/4.0, y: rect.minY + insetAmount))
            
            path.addLine(to: CGPoint(x: rect.maxX - insetAmount, y: rect.midY))
            
            path.addLine(to: CGPoint(x: rect.maxX - rect.maxX/4.0, y: rect.maxY - insetAmount))
            path.addLine(to: CGPoint(x: rect.maxX/4.0, y: rect.maxY - insetAmount))
   
            path.closeSubpath()
            
        }
    }
    
    func inset(by amount: CGFloat) -> some InsettableShape {
        var myShape: Self = self
        myShape.insetAmount += amount
        return myShape
    }
    
}

在此处输入图片描述

但是，当我使用此定义的路径构建另一个形状时，会出现大小和形状变形。我没有在代码中看到任何错误，但由于某些未知原因，出现了此问题。

struct FinalShape: InsettableShape {
    
    var insetAmount: CGFloat = CGFloat.zero

    let size1: Double = 4.0
    
    func path(in rect: CGRect) -> Path {
        return Path { path in
            
            let makeSize1: Double = rect.width/size1
            let makeSize2: Double = rect.width - makeSize1
            let horizontalHexagon = HorizontalHexagon(insetAmount: insetAmount)

            path.addPath(horizontalHexagon.path(in: CGRect(origin: CGPoint(x: rect.minX + makeSize1/2, y: rect.minY), size: CGSize(width: makeSize2, height: makeSize1))))
            path.addPath(horizontalHexagon.path(in: CGRect(origin: CGPoint(x: rect.minX + makeSize1/2, y: rect.midY - makeSize1/2), size: CGSize(width: makeSize2, height: makeSize1))))
            path.addPath(horizontalHexagon.path(in: CGRect(origin: CGPoint(x: rect.minX + makeSize1/2, y: rect.maxY - makeSize1), size: CGSize(width: makeSize2, height: makeSize1))))
 
        }
    }
    
    func inset(by amount: CGFloat) -> some InsettableShape {
        var myShape: Self = self
        myShape.insetAmount += amount
        return myShape
    }
}

在此处输入图片描述

我的 ContentView 代码：

struct ContentView: View {
    var body: some View {
        
        FinalShape()
            .strokeBorder(style: StrokeStyle(lineWidth: 5, lineCap: .round, lineJoin: .round))
            .background(Color.purple)
            .cornerRadius(5.0)
            .padding()

    }
}

更新：

struct HorizontalHexagon: InsettableShape {
    
    var insetAmount: CGFloat = CGFloat.zero

    func path(in rect: CGRect) -> Path {

        return Path { path in
            path.move(to: CGPoint(x: rect.minX + insetAmount, y: rect.midY))
            path.addLine(to: CGPoint(x: rect.width/4, y: rect.minY + insetAmount))
            path.addLine(to: CGPoint(x: rect.maxX - rect.width/4, y: rect.minY + insetAmount))
            
            path.addLine(to: CGPoint(x: rect.maxX - insetAmount, y: rect.midY))
            
            path.addLine(to: CGPoint(x: rect.maxX - rect.width/4, y: rect.maxY - insetAmount))
            path.addLine(to: CGPoint(x: rect.width/4, y: rect.maxY - insetAmount))
   
            path.closeSubpath()
            
        }
    }
    
    func inset(by amount: CGFloat) -> some InsettableShape {
        var myShape: Self = self
        myShape.insetAmount += amount
        return myShape
    }
    
}
swiftui

1 个回答

  1. Best Answer

    在实施时Shape，不要假设rect.origin == .zero。

    SwiftUIrect(in:)几乎总是使用零原点矩形进行调用，但在这种情况下rect(in:)，您使用具有非零原点的矩形进行调用。

    所以

    • rect.maxX / 4应该是rect.minX + rect.width / 4
    • rect.maxX - rect.maxX / 4应该是rect.maxX - rect.width / 4

    maxX/minX是矩形内的点，因此划分它们几乎没有意义。

    func path(in rect: CGRect) -> Path {

   return Path { path in
       path.move(to: CGPoint(x: rect.minX + insetAmount, y: rect.midY))
       path.addLine(to: CGPoint(x: rect.minX + rect.width / 4.0, y: rect.minY + insetAmount))
       path.addLine(to: CGPoint(x: rect.maxX - rect.width / 4.0, y: rect.minY + insetAmount))
       
       path.addLine(to: CGPoint(x: rect.maxX - insetAmount, y: rect.midY))
       
       path.addLine(to: CGPoint(x: rect.maxX - rect.width / 4.0, y: rect.maxY - insetAmount))
       path.addLine(to: CGPoint(x: rect.minX + rect.width / 4.0, y: rect.maxY - insetAmount))

       path.closeSubpath()
   }
}

    话虽如此，我发现这种形状的嵌入方式相当奇怪，垂直部分比两侧嵌入“更多”。请参阅此帖子以获取一些想法。

    • 2

相关问题