首页 > 解决方案 > 在另一个形状上绘制形状

问题描述

问题 :

我不能在另一个形状上画一个形状。

我想要达到的目标:

在直线上画圆圈。

无论如何,圆圈正在改变路线。我没有找到一种方法来实现它,因为 swift UI 似乎相对较新。我目前正在学习 swift,我更喜欢 swift UI 评分器而不是故事板。

如果 circle 和 line 是不同的结构,这是因为我想稍后重用该形状。

有代码:

import SwiftUI

public var PointArray = [CGPoint]()
public var PointArrayInit:Bool = false

struct Arc: Shape {
    var startAngle: Angle
    var endAngle: Angle
    var clockwise: Bool
    var centerCustom:CGPoint

    func path(in rect: CGRect) -> Path {
        let rotationAdjustment = Angle.degrees(90)
        let modifiedStart = startAngle - rotationAdjustment
        let modifiedEnd = endAngle - rotationAdjustment

        var path = Path()
        path.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: 20, startAngle: modifiedStart, endAngle: modifiedEnd, clockwise: !clockwise)

        return path
    }
}

struct CurveCustomInit: Shape {
    private var Divider:Int = 10
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let xStep:CGFloat = DrawingZoneWidth / CGFloat(Divider)
        let yStep:CGFloat = DrawingZoneHeight / 2
        var xStepLoopIncrement:CGFloat = 0
        path.move(to: CGPoint(x: 0, y: yStep))

        for _ in 0...Divider {
            let Point:CGPoint = CGPoint(x: xStepLoopIncrement, y: yStep)
            PointArray.append(Point)
            path.addLine(to: Point)
            xStepLoopIncrement += xStep
        }

        PointArrayInit = true
        return (path)
    }
}

struct TouchCurveBasic: View {

    var body: some View {
        if !PointArrayInit {
            
            Arc(startAngle: .degrees(0), endAngle: .degrees(360), clockwise: true, centerCustom: CGPoint(x: 50, y: 400))
                .stroke(Color.blue, lineWidth: 4)

            CurveCustomInit()
                .stroke(Color.red, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
                .frame(width: 300, height: 300)
        } else {
            
        }
    }
}

struct TouchCurveBasic_Previews: PreviewProvider {
    static var previews: some View {
        TouchCurveBasic()
    }
}

这是我得到的: 在此处输入图像描述

标签: swiftswiftui

解决方案


这是您的另一种方式,您可以通过提供框架来限制绘图的大小,或者您可以使用可用的视图大小而不限制它,甚至您可以使用来自父级的当前限制并更新它,就像我在画线。我使用的方法是覆盖修饰符。

struct ContentView: View {
    
    var body: some View {
        
        ArcView(radius: 30.0)
            .stroke(lineWidth: 10)
            .foregroundColor(.blue)
            .frame(width: 60, height: 60)
            .overlay(LineView().stroke(lineWidth: 10).foregroundColor(.red).frame(width: 400))

    }
    
}

struct ArcView: Shape {
    
    let radius: CGFloat

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

        return Path { path in
            
            path.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: radius, startAngle: Angle(degrees: 0.0), endAngle: Angle(degrees: 360.0), clockwise: true)
            
        }

    }
}

struct LineView: Shape {

    func path(in rect: CGRect) -> Path {
        
        return Path { path in
            
            path.move(to: CGPoint(x: rect.minX, y: rect.midY))
            path.addLines([CGPoint(x: rect.minX, y: rect.midY), CGPoint(x: rect.maxX, y: rect.midY)])
 
        }

    }
}

结果:

在此处输入图像描述


推荐阅读