{"id":3016,"date":"2020-08-27T19:39:42","date_gmt":"2020-08-27T19:39:42","guid":{"rendered":"http:\/\/4310.mynmi.net\/?page_id=3016"},"modified":"2026-03-21T22:01:22","modified_gmt":"2026-03-21T22:01:22","slug":"offset-and-label-the-green-slice","status":"publish","type":"page","link":"https:\/\/nmi.cool\/appdev\/offset-and-label-the-green-slice\/","title":{"rendered":"Homework 7: Offset and label the green slice"},"content":{"rendered":"\n<p>Mastering SwiftUI led you through a long lesson on creating a pie chart with arcs enveloped by a ZStack. The code to make the whole pie is provided below, and your job is to offset one slice of the pie (an arc of course) and overlay it with a label. Feel free to use the book&#8217;s code (pages 90-93) as a reference or simply type along with the code below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Complete Pie Chart Code<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>import SwiftUI\n\nstruct ContentView: View {\n    var body: some View {\n        ZStack {\n            Arc(startAngle: .degrees(0), endAngle: .degrees(90), clockwise: true)\n                .fill(Color.blue)\n            Arc(startAngle: .degrees(90), endAngle: .degrees(180), clockwise: true)\n                .fill(Color.red)\n            Arc(startAngle: .degrees(180), endAngle: .degrees(270), clockwise: true)\n                .fill(Color.green)\n            Arc(startAngle: .degrees(270), endAngle: .degrees(360), clockwise: true)\n                .fill(Color.orange)\n        }\n    }\n}\n\nstruct Arc: Shape {\n    var startAngle: Angle\n    var endAngle: Angle\n    var clockwise: Bool\n    func path(in rect: CGRect) -&gt; Path {\n        var p = Path()\n        p.addArc(center: CGPoint(x: rect.midX, y: rect.midY),\n                 radius: rect.width \/ 2,\n                 startAngle: startAngle,\n                 endAngle: endAngle,\n                 clockwise: clockwise)\n        p.addLine(to: CGPoint(x: rect.midX, y: rect.midY))\n        p.closeSubpath()\n        return p\n    }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Your Task<\/h2>\n\n\n\n<p>Your goal is two-fold: pop the green slice outward from the center of the pie, and label it with a text overlay.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/nmi.cool\/appdev\/wp-content\/uploads\/sites\/10\/2020\/08\/img_5f480bc2c1442.png\" alt=\"Target pie chart: green slice offset with label on top\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Offset the green slice<\/h3>\n\n\n\n<p>Add an <code>.offset()<\/code> modifier to the green <code>Arc<\/code> to push it away from the center. The green slice spans from 180\u00b0 to 270\u00b0, which puts its midpoint at 225\u00b0 \u2014 in the bottom-left direction. To push it outward, use a negative x value and a positive y value (e.g., <code>.offset(x: -20, y: 20)<\/code>). Adjust the values until the slice is clearly separated from the rest of the pie.<\/p>\n\n\n\n<p>\ud83d\udca1 <strong>Hint:<\/strong> Experiment with values between 10 and 40 for both x and y. A small offset looks subtle; a large one makes a dramatic effect.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Overlay a text label<\/h3>\n\n\n\n<p>Once the green slice is offset, add a <code>Text<\/code> label that appears on top of it. There are two approaches:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Wrap the offset arc in its own ZStack:<\/strong> Replace the green <code>Arc<\/code> line with a <code>ZStack<\/code> that contains the arc and a <code>Text<\/code> view layered on top. The label will automatically center over the arc.<\/li>\n\n\n\n<li><strong>Add a Text to the outer ZStack:<\/strong> Add a separate <code>Text<\/code> to the main <code>ZStack<\/code> and give it its own <code>.offset()<\/code> to position it near the offsetted slice.<\/li>\n<\/ul>\n\n\n\n<p>\ud83d\udca1 <strong>Hint:<\/strong> The inner ZStack approach is more self-contained. The Text will appear at the visual center of the arc \u2014 which may not be perfect, but it&#8217;s close enough. Use <code>.foregroundColor(.white)<\/code> and a <code>.font(.headline)<\/code> to make the label readable against the green background.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mastering SwiftUI led you through a long lesson on creating a pie chart with arcs enveloped by a ZStack. The code to make the whole pie is provided below, and your job is to offset one slice of the pie (an arc of course) and overlay it with a label. Feel free to use the &hellip; <a href=\"https:\/\/nmi.cool\/appdev\/offset-and-label-the-green-slice\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Homework 7: Offset and label the green slice<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3016","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/3016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/comments?post=3016"}],"version-history":[{"count":10,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/3016\/revisions"}],"predecessor-version":[{"id":4159,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/3016\/revisions\/4159"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/media?parent=3016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}