{"id":85,"date":"2022-07-30T11:54:29","date_gmt":"2022-07-30T10:54:29","guid":{"rendered":"https:\/\/techjourney.me\/?p=85"},"modified":"2022-07-30T11:54:29","modified_gmt":"2022-07-30T10:54:29","slug":"swiftui-shapes","status":"publish","type":"post","link":"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/","title":{"rendered":"SwiftUI Shapes"},"content":{"rendered":"\n<p>SwiftUI provides the <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/shape\" target=\"_blank\" rel=\"noreferrer noopener\">Shape<\/a> protocol which allows developers to create any customs shape they want. It also provides 5 concrete shapes out of the box.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Built-in Shapes<\/h2>\n\n\n\n<p>Lets start with the 5 shapes shipped in SwiftUI:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-swift\" data-file=\"ContentView.swift\" data-lang=\"Swift\"><code>struct ContentView: View {\n    var body: some View {\n        VStack {\n            Rectangle()\n\n            RoundedRectangle(cornerRadius: 12, style: .continuous)\n                .stroke(lineWidth: 5)\n\n            Ellipse()\n                .fill(.red)\n\n            Capsule()\n                .fill(gradient)\n\n            Circle()\n                .stroke(angularGradient, lineWidth: 5)\n        }\n        .padding()\n    }\n\n\u00a0\u00a0\u00a0\u00a0var gradient: LinearGradient {\n        LinearGradient(\n            colors: [.blue, .purple],\n            startPoint: .leading,\n            endPoint: .trailing\n        )\n    }\n\n    var angularGradient: AngularGradient {\n        AngularGradient(\n            colors: [.blue, .purple],\n            center: .center\n        )\n    }\n}<\/code><\/pre><\/div>\n\n\n\n<p>The important thing to note here are the configurable options and the default configurations that these shapes take on:<\/p>\n\n\n\n<ul><li>By default, all shapes in SwiftUI are filled with the foreground colour. In the code example above, we specify nothing but <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/rectangle\" target=\"_blank\" rel=\"noreferrer noopener\">Rectangle<\/a> gets filled with the foreground colour by default<\/li><li>For each shape we can choose between either filling the shape or stroking the shape as in the <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/roundedrectangle\" target=\"_blank\" rel=\"noreferrer noopener\">RoundedRectangle<\/a> example above. Please note that the stroke colour defaults to foreground colour when it&#8217;s not explicitly specified<\/li><li>You can specify a certain <code>Color<\/code> to be used to fill or stroke the shape as in the <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/ellipse\" target=\"_blank\" rel=\"noreferrer noopener\">Ellipse<\/a> example above where we filled it with red colour<\/li><li>The stroke and the fill methods take a <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/shapestyle\" target=\"_blank\" rel=\"noreferrer noopener\">ShapeStyle<\/a> as input param which means that the methods are not limited to <code>Color<\/code> but instead we can pass <code>Gradient<\/code> to it too. In the above example, we use gradients to fill the <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/capsule\" target=\"_blank\" rel=\"noreferrer noopener\">Capsule<\/a> and stroke the <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/circle\" target=\"_blank\" rel=\"noreferrer noopener\">Circle<\/a><\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00-473x1024.png\" alt=\"Screenshot of a built-in SwiftUI shapes vertically stacked. From top to bottom: Filled rectangle, rounded rectangle with black border, ellipse filled with red colour, capsule filled with blue and purple linear gradient and a circle with gradient as border\" class=\"wp-image-88\" width=\"237\" height=\"512\" srcset=\"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00-473x1024.png 473w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00-139x300.png 139w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00-768x1662.png 768w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00-710x1536.png 710w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00-946x2048.png 946w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00.png 1170w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><figcaption>Screenshot with SwiftUI built-in shapes<\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Custom Shape<\/h2>\n\n\n\n<p>Shape protocol allows us to create custom shapes that we can use exactly as we used the built-in shapes above. The only thing required to fulfill the Shape protocol is to provide an implementation of <code>func path(in rect: CGRect) -&gt; Path<\/code> which returns a Path that describes the shape we want to draw inside the passed in rect.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Checkmark<\/h3>\n\n\n\n<p>Let&#8217;s start with a very simple shape i.e. a checkmark as it only consists of 2 lines. Create a new file called <code>Checkmark.swift<\/code> as below:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-swift\" data-file=\"Checkmark.swift\" data-lang=\"Swift\"><code>import SwiftUI\n\nstruct Checkmark: Shape {\n    let startPoint = CGPoint(x: 0.0, y: 0.5)\n    let linePoints: [CGPoint] = [\n        .init(x: 0.3, y: 1.0),\n        .init(x: 1.0, y: 0.1)\n    ]\n\n    func path(in rect: CGRect) -&gt; Path {\n        let width = rect.size.width\n        let height = rect.size.height\n\n        var path = Path()\n        path.move(\n            to: .init(\n                x: startPoint.x * width,\n                y: startPoint.y * height\n            )\n        )\n\n        for linePoint in linePoints {\n            path.addLine(\n                to: .init(\n                    x: linePoint.x * width,\n                    y: linePoint.y * height\n                )\n            )\n        }\n        return path\n    }\n}\n\nstruct Checkmark_Previews: PreviewProvider {\n    static var previews: some View {\n        VStack {\n            Checkmark()\n                .stroke(lineWidth: 10.0)\n                .frame(width: 100, height: 100)\n                .padding()\n\n            Checkmark()\n                .stroke(\n                    style: .init(\n                        lineWidth: 10.0,\n                        lineCap: .round,\n                        lineJoin: .round\n                    )\n                )\n                .frame(width: 100, height: 100)\n                .padding()\n        }\n    }\n}<\/code><\/pre><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.28.26-473x1024.png\" alt=\"2 vertically stacked checkmarks \" class=\"wp-image-92\" width=\"237\" height=\"512\" srcset=\"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.28.26-473x1024.png 473w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.28.26-139x300.png 139w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.28.26-768x1662.png 768w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.28.26-710x1536.png 710w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.28.26-946x2048.png 946w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.28.26.png 1170w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><\/figure><\/div>\n\n\n<p>We first move to the point where we want to start drawing. The default starting point is (0, 0) i.e. top left. We move to the middle of leading edge above. Then we add 2 lines starting from that point. First one from middle of leading edge to the bottom edge and from there to almost to the top right corner of the rect. Note that we are taking into consideration the passed in rect so the shape will adapt to the frame the user may set on it. We have to set the Checkmark to be stroked explicitly because as we discussed in the last section that all shapes are filled by default.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Infinity<\/h3>\n\n\n\n<p>Let&#8217;s try to draw an infinity symbol which is only a tiny bit more complicated than checkmark. Create a new file called <code>Infinity.swift<\/code> and add the code below:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-swift\" data-file=\"Infinity.swift\" data-lang=\"Swift\"><code>struct InfinitySegment {\n    var toPoint: CGPoint\n    var controlPoint: CGPoint\n}\n\nstruct Infinity: Shape {\n\n    var segments: [InfinitySegment] = [\n        InfinitySegment(\n            toPoint: .init(x: 1.0, y: 0.5),\n            controlPoint: .init(x: 1.0, y: 0.0)\n        ),\n        InfinitySegment(\n            toPoint: .init(x: 0.5, y: 0.5),\n            controlPoint: .init(x: 1.0, y: 1.0)\n        ),\n        InfinitySegment(\n            toPoint: .init(x: 0.0, y: 0.5),\n            controlPoint: .init(x: 0.0, y: 0.0)\n        ),\n        InfinitySegment(\n            toPoint: .init(x: 0.5, y: 0.5),\n            controlPoint: .init(x: 0.0, y: 1.0)\n        )\n    ]\n\n    func path(in rect: CGRect) -&gt; Path {\n        let width = rect.size.width\n        let height = rect.size.height\n        let center = CGPoint(x: 0.5 * width, y: 0.5 * height)\n\n        var path = Path()\n        path.move(to: center)\n\n        for segment in segments {\n            path.addQuadCurve(\n                to: CGPoint(\n                    x: segment.toPoint.x * width,\n                    y: segment.toPoint.y * height\n                ),\n                control: CGPoint(\n                    x: segment.controlPoint.x * width,\n                    y: segment.controlPoint.y * height\n                )\n            )\n        }\n\n        return path\n    }\n}\n\n\nstruct Inifinity_Previews: PreviewProvider {\n    static var previews: some View {\n        VStack {\n            Infinity()\n                .stroke(Color.black, lineWidth: 10.0)\n                .frame(height: 300)\n                .padding()\n\n            Infinity()\n                .fill(\n                    LinearGradient(\n                        colors: [.blue, .purple],\n                        startPoint: .top,\n                        endPoint: .bottom\n                    )\n                )\n        }\n    }\n}<\/code><\/pre><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.36.29-473x1024.png\" alt=\"2 vertically stacked infinity symbols. First with black stroke and second filled with gradients\" class=\"wp-image-95\" width=\"237\" height=\"512\" srcset=\"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.36.29-473x1024.png 473w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.36.29-139x300.png 139w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.36.29-768x1662.png 768w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.36.29-710x1536.png 710w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.36.29-946x2048.png 946w, https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-12.36.29.png 1170w\" sizes=\"(max-width: 237px) 100vw, 237px\" \/><\/figure><\/div>\n\n\n<p>We start drawing at the centre of the rect and then add 4 quad curves from centre to middle of trailing edge, back to centre, from centre to middle of leading edge and back to centre again. Quad curves require a control point that dictates the shape of the curve. The curve does not actually touch the control point, it impacts the shape of the curve by pulling the curve towards control point. The control points we use here are in the 4 corners. It is a good exercise to play with these data points to learn the impact of these values on the resulting shape<\/p>\n","protected":false},"excerpt":{"rendered":"<p>SwiftUI provides the Shape protocol which allows developers to create any customs shape they want. It also provides 5 concrete shapes out of the box. Built-in Shapes Lets start with the 5 shapes shipped in SwiftUI: The important thing to note here are the configurable options and the default configurations that these shapes take on: &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;SwiftUI Shapes&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3],"tags":[5,4],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>SwiftUI Shapes - techjourney.me<\/title>\n<meta name=\"description\" content=\"In this post we discuss the built-in shapes provided by SwiftUI and how to use them before learning how to draw custom shapes with examples\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SwiftUI Shapes - techjourney.me\" \/>\n<meta property=\"og:description\" content=\"In this post we discuss the built-in shapes provided by SwiftUI and how to use them before learning how to draw custom shapes with examples\" \/>\n<meta property=\"og:url\" content=\"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/\" \/>\n<meta property=\"og:site_name\" content=\"techjourney.me\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-30T10:54:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00-473x1024.png\" \/>\n<meta name=\"author\" content=\"Nouman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nouman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/\",\"url\":\"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/\",\"name\":\"SwiftUI Shapes - techjourney.me\",\"isPartOf\":{\"@id\":\"https:\/\/techjourney.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00-473x1024.png\",\"datePublished\":\"2022-07-30T10:54:29+00:00\",\"dateModified\":\"2022-07-30T10:54:29+00:00\",\"author\":{\"@id\":\"https:\/\/techjourney.me\/#\/schema\/person\/dc72e40cd681565aad629ba8742b04b2\"},\"description\":\"In this post we discuss the built-in shapes provided by SwiftUI and how to use them before learning how to draw custom shapes with examples\",\"breadcrumb\":{\"@id\":\"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/#primaryimage\",\"url\":\"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00.png\",\"contentUrl\":\"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00.png\",\"width\":1170,\"height\":2532},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/techjourney.me\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SwiftUI Shapes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/techjourney.me\/#website\",\"url\":\"https:\/\/techjourney.me\/\",\"name\":\"techjourney.me\",\"description\":\"Journey through iOS, Swift and SwiftUI\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/techjourney.me\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/techjourney.me\/#\/schema\/person\/dc72e40cd681565aad629ba8742b04b2\",\"name\":\"Nouman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/techjourney.me\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6bfec975c1f5016797501c89a00ca3f1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6bfec975c1f5016797501c89a00ca3f1?s=96&d=mm&r=g\",\"caption\":\"Nouman\"},\"sameAs\":[\"https:\/\/techjourney.me\"],\"url\":\"https:\/\/techjourney.me\/index.php\/author\/nouman\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SwiftUI Shapes - techjourney.me","description":"In this post we discuss the built-in shapes provided by SwiftUI and how to use them before learning how to draw custom shapes with examples","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/","og_locale":"en_GB","og_type":"article","og_title":"SwiftUI Shapes - techjourney.me","og_description":"In this post we discuss the built-in shapes provided by SwiftUI and how to use them before learning how to draw custom shapes with examples","og_url":"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/","og_site_name":"techjourney.me","article_published_time":"2022-07-30T10:54:29+00:00","og_image":[{"url":"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00-473x1024.png"}],"author":"Nouman","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nouman","Estimated reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/","url":"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/","name":"SwiftUI Shapes - techjourney.me","isPartOf":{"@id":"https:\/\/techjourney.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/#primaryimage"},"image":{"@id":"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/#primaryimage"},"thumbnailUrl":"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00-473x1024.png","datePublished":"2022-07-30T10:54:29+00:00","dateModified":"2022-07-30T10:54:29+00:00","author":{"@id":"https:\/\/techjourney.me\/#\/schema\/person\/dc72e40cd681565aad629ba8742b04b2"},"description":"In this post we discuss the built-in shapes provided by SwiftUI and how to use them before learning how to draw custom shapes with examples","breadcrumb":{"@id":"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/#primaryimage","url":"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00.png","contentUrl":"https:\/\/techjourney.me\/wp-content\/uploads\/2022\/07\/Simulator-Screen-Shot-iPhone-13-2022-07-30-at-11.59.00.png","width":1170,"height":2532},{"@type":"BreadcrumbList","@id":"https:\/\/techjourney.me\/index.php\/2022\/07\/30\/swiftui-shapes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/techjourney.me\/"},{"@type":"ListItem","position":2,"name":"SwiftUI Shapes"}]},{"@type":"WebSite","@id":"https:\/\/techjourney.me\/#website","url":"https:\/\/techjourney.me\/","name":"techjourney.me","description":"Journey through iOS, Swift and SwiftUI","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/techjourney.me\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/techjourney.me\/#\/schema\/person\/dc72e40cd681565aad629ba8742b04b2","name":"Nouman","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/techjourney.me\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6bfec975c1f5016797501c89a00ca3f1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6bfec975c1f5016797501c89a00ca3f1?s=96&d=mm&r=g","caption":"Nouman"},"sameAs":["https:\/\/techjourney.me"],"url":"https:\/\/techjourney.me\/index.php\/author\/nouman\/"}]}},"_links":{"self":[{"href":"https:\/\/techjourney.me\/index.php\/wp-json\/wp\/v2\/posts\/85"}],"collection":[{"href":"https:\/\/techjourney.me\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techjourney.me\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techjourney.me\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techjourney.me\/index.php\/wp-json\/wp\/v2\/comments?post=85"}],"version-history":[{"count":11,"href":"https:\/\/techjourney.me\/index.php\/wp-json\/wp\/v2\/posts\/85\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/techjourney.me\/index.php\/wp-json\/wp\/v2\/posts\/85\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/techjourney.me\/index.php\/wp-json\/wp\/v2\/media?parent=85"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techjourney.me\/index.php\/wp-json\/wp\/v2\/categories?post=85"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techjourney.me\/index.php\/wp-json\/wp\/v2\/tags?post=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}