Merge pull request #11 from SwiftUIExtensions/grid-pattern

Grid pattern

Author: ay42

Examples/ShapesExamples iOS/ContentView.swift

@@ -22,6 +22,15 @@ struct ContentView: View {
                     }
                 }
                 .tag(1)
+            
+            PatternsView()
+                .tabItem {
+                    VStack {
+                        Image(systemName: "rectangle.split.3x3")
+                        Text("Patterns")
+                    }
+                }
+                .tag(2)
         }
     }
 }

Examples/ShapesExamples macOS/ContentView.swift

@@ -16,6 +16,12 @@ struct ContentView: View {
                     Text("Lines")
                 }
                 .tag(1)
+            
+            PatternsView()
+                .tabItem {
+                    Text("Patterns")
+                }
+                .tag(2)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
     }

Examples/ShapesExamples.xcodeproj/project.pbxproj

@@ -24,6 +24,8 @@
 		FABCDB7C2364E11F00842ED9 /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = FABCDB7B2364E11F00842ED9 /* Preview Assets.xcassets */; };
 		FABCDB7F2364E11F00842ED9 /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = FABCDB7D2364E11F00842ED9 /* Main.storyboard */; };
 		FABCDB872364E16500842ED9 /* Shapes in Frameworks */ = {isa = PBXBuildFile; productRef = FABCDB862364E16500842ED9 /* Shapes */; };
+		FAFBB70F2393106600E70575 /* PatternsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAFBB70E2393106600E70575 /* PatternsView.swift */; };
+		FAFBB7102393106600E70575 /* PatternsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAFBB70E2393106600E70575 /* PatternsView.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -46,6 +48,7 @@
 		FABCDB7E2364E11F00842ED9 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
 		FABCDB802364E11F00842ED9 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		FABCDB812364E11F00842ED9 /* ShapesExamples_macOS.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = ShapesExamples_macOS.entitlements; sourceTree = "<group>"; };
+		FAFBB70E2393106600E70575 /* PatternsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PatternsView.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -145,6 +148,7 @@
 			children = (
 				FA86726D238DE61500226819 /* RegularPolygonsView.swift */,
 				FA867270238DE6CD00226819 /* LinesView.swift */,
+				FAFBB70E2393106600E70575 /* PatternsView.swift */,
 			);
 			path = ShapesExamples;
 			sourceTree = "<group>";
@@ -264,6 +268,7 @@
 				FABCDB5B2364DF8400842ED9 /* SceneDelegate.swift in Sources */,
 				FABCDB5D2364DF8400842ED9 /* ContentView.swift in Sources */,
 				FA86726E238DE61500226819 /* RegularPolygonsView.swift in Sources */,
+				FAFBB70F2393106600E70575 /* PatternsView.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -274,6 +279,7 @@
 				FA86726F238DE61500226819 /* RegularPolygonsView.swift in Sources */,
 				FA867272238DE6CD00226819 /* LinesView.swift in Sources */,
 				FABCDB772364E11E00842ED9 /* ContentView.swift in Sources */,
+				FAFBB7102393106600E70575 /* PatternsView.swift in Sources */,
 				FABCDB752364E11E00842ED9 /* AppDelegate.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;

Examples/ShapesExamples/PatternsView.swift

@@ -0,0 +1,38 @@
+import SwiftUI
+import Shapes
+
+struct PatternsView: View {
+    var body: some View {
+        ScrollView {
+            GridPattern(horizontalLines: 20, verticalLines: 40)
+                .stroke(Color.white.opacity(0.3), style: .init(lineWidth: 1, lineCap: .round))
+                .frame(height: 200)
+                .background(Color.blue)
+                .padding()
+            
+            
+            LinearGradient(gradient: Gradient(colors: [.orange, .red, .blue, .purple]), startPoint: .topLeading, endPoint: .bottomTrailing)
+                .frame(height: 200)
+                .clipShape(
+                    GridPattern(horizontalLines: 25, verticalLines: 25).inset(by: 1).stroke(lineWidth: 1)
+                )
+                .padding()
+            
+            LinearGradient(gradient: Gradient(colors: [.purple, .red, .orange]), startPoint: .topLeading, endPoint: .bottomTrailing)
+                .frame(height: 200)
+                .clipShape(
+                    GridPattern(horizontalLines: 10)
+                        .inset(by: 2)
+                        .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round, miterLimit: 2, dash: [10], dashPhase: 0))
+                )
+                .padding()
+            
+        }
+    }
+}
+
+struct PatternsView_Previews: PreviewProvider {
+    static var previews: some View {
+        PatternsView()
+    }
+}

README.md

@@ -27,6 +27,19 @@ QuadCurve(unitPoints: [
 .frame(height: 200)
 ```
 
+## Patterns
+<center>
+<img src="Resources/patterns.png"/>
+</center>
+
+```swift
+GridPattern(horizontalLines: 20, verticalLines: 40)
+    .stroke(Color.white.opacity(0.3), style: .init(lineWidth: 1, lineCap: .round))
+    .frame(height: 200)
+    .background(Color.blue)
+    .padding()
+```
+
 ## How to use
 
 Add this swift package to your project

Resources/patterns.png

@@ -0,0 +1,8 @@
+import SwiftUI
+
+public extension Path {
+    mutating func addLine(from p1: CGPoint, to p2: CGPoint) {
+        self.move(to: p1)
+        self.addLine(to: p2)
+    }
+}

Sources/Shapes/Path/Path+AddLineFromTo.swift

@@ -0,0 +1,54 @@
+import SwiftUI
+
+public struct GridPattern: InsettableShape {
+    private let inset: CGFloat
+    private let horizontalLines: Int
+    private let verticalLines: Int
+    
+    
+    public func inset(by amount: CGFloat) -> GridPattern {
+        GridPattern(inset: self.inset + amount, horizontalLines: self.horizontalLines, verticalLines: self.verticalLines)
+    }
+    
+    public func path(in rect: CGRect) -> Path {
+        let rect = rect.insetBy(dx: self.inset, dy: self.inset)
+        
+        return Path { path in
+            /// Horizontal Lines
+            if horizontalLines > 1 {
+                let unitDistanceBetweenHorizontalLines = 1.0 / CGFloat(horizontalLines - 1)
+                
+                (0..<horizontalLines).forEach { index in
+                    let unitY = unitDistanceBetweenHorizontalLines * CGFloat(index)
+                    let fromPoint = CGPoint(unitPoint: UnitPoint(x: 0, y: unitY), in: rect)
+                    let toPoint = CGPoint(unitPoint: UnitPoint(x: 1, y: unitY), in: rect)
+                    path.addLine(from: fromPoint, to: toPoint)
+                }
+            }
+            
+            if verticalLines > 1 {
+                let unitDistanceBetweenVerticalLines = 1.0 / CGFloat(verticalLines - 1)
+                
+                (0..<verticalLines).forEach { index in
+                    let unitX = unitDistanceBetweenVerticalLines * CGFloat(index)
+                    let fromPoint = CGPoint(unitPoint: UnitPoint(x: unitX, y: 0), in: rect)
+                    let toPoint = CGPoint(unitPoint: UnitPoint(x: unitX, y: 1), in: rect)
+                    path.addLine(from: fromPoint, to: toPoint)
+                }
+            }
+        }
+        .offsetBy(dx: inset, dy: inset)
+    }
+    
+    private init(inset: CGFloat, horizontalLines: Int, verticalLines: Int) {
+        self.inset = inset
+        self.horizontalLines = horizontalLines
+        self.verticalLines = verticalLines
+    }
+    
+    public init(horizontalLines: Int = 0, verticalLines: Int = 0) {
+        self.inset = 0
+        self.horizontalLines = horizontalLines
+        self.verticalLines = verticalLines
+    }
+}