主页 / coding / 问题 / 79133455
Accepted
swiftPunk
Asked: 2024-10-28 20:44:55 +0800 CST

为什么 strokeBorder 在 SwiftUI 中不尊重其边框？

  • 772

我的代码存在一个问题，即 strokeBorder 没有在 Border 内描边，如果我对 Shape 使用填充，它会保留并尊重边框，但 strokeBorder 却不会这样做，如何解决这个问题？

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        let myCustomInsettableShape = TestShape()
        
        ZStack {

            myCustomInsettableShape
                .fill(Color.white)

            myCustomInsettableShape
                .strokeBorder(Color.black.opacity(0.5), style: StrokeStyle(lineWidth: 50.0, lineCap: .round, lineJoin: .miter))
            
        }
        .background(Color.red)
        .padding(50)
    }
}

struct TestShape: InsettableShape {
    
    var insetAmount: CGFloat = .zero
    
    func path(in rect: CGRect) -> Path {
        
        // Adjust the rect to account for half the stroke width to ensure it stays inside
        let insetRect = rect.insetBy(dx: insetAmount, dy: insetAmount)
        
        // Create the path for the shape
        return Path { path in
            path.move(to: CGPoint(x: insetRect.minX, y: insetRect.midY))
            path.addLine(to: CGPoint(x: insetRect.midX, y: insetRect.minY))
            path.addLine(to: CGPoint(x: insetRect.maxX, y: insetRect.midY))
            path.addLine(to: CGPoint(x: insetRect.midX, y: insetRect.maxY))
            path.closeSubpath()
        }
        
    }
    
    func inset(by amount: CGFloat) -> some InsettableShape {
        var myShape = self
        myShape.insetAmount += amount
        return myShape
    }
    
}

在此处输入图片描述

swift

1 个回答

  1. Best Answer

    当您使用时.strokeBorder，它依赖于.inset正常工作，如文档中所述：

    返回通过 style.lineWidth / 2 插入自身、用样式描边生成的形状、然后填充内容的结果视图。

    TestShape我认为创建时应用插入的方式path可能太原始了。让我们尝试一下测试：

    ZStack {
    TestShape()
        .stroke()

    TestShape()
        .inset(by: 50)
        .stroke()
}
.padding(50)

    截屏

    我原本期望看到一个较小的菱形，其边缘与较大的菱形平行。

    因此，我们path先修复该函数。这需要使用一点毕达哥拉斯和三角函数：

    图表

    func path(in rect: CGRect) -> Path {
    Path { path in
        let dx: CGFloat
        let dy: CGFloat
        if insetAmount > 0 && rect.width > 0 && rect.height > 0 {
            let diagonal = sqrt((rect.width * rect.width) + (rect.height * rect.height))
            let cosAlpha = rect.height / diagonal
            dx = insetAmount / cosAlpha
            let sinAlpha = rect.width / diagonal
            dy = insetAmount / sinAlpha
        } else {
            dx = 0
            dy = 0
        }
        path.move(to: CGPoint(x: rect.minX + dx, y: rect.midY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.minY + dy))
        path.addLine(to: CGPoint(x: rect.maxX - dx, y: rect.midY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY - dy))
        path.closeSubpath()
    }
}

    再次尝试测试：

    截屏

    看起来好多了。现在让我们strokeBorder用原始代码再试一次：

    截屏

    问题解决了！

    • 2

相关问题