如何在 SwiftUI 中获取掩码金额或百分比?

How to get the mask amount or percentage in SwiftUI?

提问人:batman 提问时间:11/16/2023 最后编辑:batman 更新时间:11/16/2023 访问量:55

问:

应用蒙版修改器时,是否可以获得可见蒙版的数量或百分比?我正在尝试实现一个刮刮卡视图,我想在黄色内容视图显示 80% 可见后完全显示它。Canvas

enter image description here

这是我目前所拥有的:

struct ScratchCardView: View {
    @State var points = [CGPoint]()
    
    var body: some View {
        ZStack {
            // MARK: Scratchable overlay view
            RoundedRectangle(cornerRadius: 20)
                .fill(.red)
                .frame(width: 250, height: 250)

            // MARK: Hidden content view
            RoundedRectangle(cornerRadius: 20)
                .fill(.yellow)
                .frame(width: 250, height: 250)
                .mask(
                    Path { path in
                        path.addLines(points)
                    }.stroke(style: StrokeStyle(lineWidth: 50, lineCap: .round, lineJoin: .round))
                )
                .gesture(
                    DragGesture(minimumDistance: 0, coordinateSpace: .local)
                        .onChanged({ value in
                            points.append(value.location)
                        })
                        .onEnded({ _ in
                           // TODO: detect content view visibility
                        })
                )
        }
    }
}

任何帮助都是值得赞赏的。

iOS Swift SwiftUI

评论


答:

2赞 Sweeper 11/16/2023 #1

获得中风部分的面积将相当困难。我会通过对正方形内的一些点进行采样来近似这一点,看看在描边部分内有多少个点。从我所做的几次测试来看,我觉得这已经足够好了,特别是因为你有这么大的笔画宽度。

首先获取表示描边区域的:CGPath

let cgpath = Path { path in
    path.addLines(points)
}.cgPath
// remember to use the same parameters here as you did in the StrokeStyle!
let contourPath = cgpath.copy(strokingWithWidth: 50, lineCap: .round, lineJoin: .round, miterLimit: 10)

然后,在正方形中找到一些点进行采样。在这里,我将大正方形分成 5*5 个小正方形,并选择每个小正方形中心的点。

var count = 0
for i in 0..<5 {
    for j in 0..<5 {
        let point = CGPoint(x: 25 + i * 50, y: 25 + j * 50)
        if contourPath.contains(point) {
            count += 1
        }
    }
}
if count > 20 {
    print("More than 75%!")
}