5. Applying Complex Transformations & Interactions

Written by Irina Galata

In the previous chapter, you learned how to draw a custom seating chart with tribunes using SwiftUI’s Path. However, quite a few things are still missing. Users must be able to preview the seats inside a tribune and select them to purchase tickets. To make the user’s navigation through the chart effortless and natural, you’ll implement gesture handling, such as dragging, magnifying and rotating.

As usual, fetch the starter project for this chapter from the materials, or continue where you left off in the previous chapter.

Open SportFan.xcodeproj and head straight to SeatingChartView.

Manipulating SwiftUI Shapes Using CGAffineTransform

You need two things to display seats for each tribune: a Shape containing the Path drawing the seat and a CGRect representing its bounds. To accomplish the former, create a new struct named SeatShape:

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

    }
  }
}

The shape you’re about to draw consists of a few parts: the seat’s back, squab, and rod connecting them. Start by defining a few essential properties right below inside the Path’s trailing closure:

let verticalSpacing = rect.height * 0.1
let cornerSize = CGSize(
  width: rect.width / 15.0,
  height: rect.height / 15.0
)
let seatBackHeight = rect.height / 3.0 - verticalSpacing
let squabHeight = rect.height / 2.0 - verticalSpacing
let seatWidth = rect.width

To emulate the top-to-bottom perspective, you calculate the seat back rectangle as slightly shorter vertically than the squab.

Then, right below these variables, define the CGRect’s for the back and squab and draw the corresponding rounded rectangles:

let backRect = CGRect(
  x: 0, y: verticalSpacing,
  width: seatWidth, height: seatBackHeight
)
let squabRect = CGRect(
  x: 0, y: rect.height / 2.0,
  width: seatWidth, height: squabHeight
)

path.addRoundedRect(in: backRect, cornerSize: cornerSize)
path.addRoundedRect(in: squabRect, cornerSize: cornerSize)

Now, draw the rod:

path.move(to: CGPoint(
  x: rect.width / 2.0,
  y: rect.height / 3.0
))
path.addLine(to: CGPoint(
  x: rect.width / 2.0,
  y: rect.height / 2.0
))

You still have a long way to go before looking at the seat’s shape as part of a tribune. To get a quick preview for the time being, create a new struct called SeatPreview:

struct SeatPreview: View {
  let seatSize = 100.0
  var body: some View {
    ZStack {
      SeatShape().path(in: CGRect(
        x: 0, y: 0,
        width: seatSize, height: seatSize
      ))
      .fill(.blue) // 1

      SeatShape().path(
        in: CGRect(
          x: 0, y: 0,
          width: seatSize, height: seatSize
        ))
        .stroke(lineWidth: 2) // 2
    }
    .frame(width: seatSize, height: seatSize)
  }
}

This process is similar to the shapes you’ve drawn in the previous chapter:

1. Inside a ZStack, you use one instance of SeatShape as a background with .blue fill.
2. You use the second shape’s instance to draw the seat’s stroke.

Finally, you must make Xcode show the SeatPreview in the previews window. Create a new PreviewProvider:

struct Seat_Previews: PreviewProvider {
  static var previews: some View {
    SeatPreview()
  }
}

Your seat preview should look like this, for the time being:

The seat is there but looks relatively flat. You’ll skew it back to give it a slightly more realistic perspective. Don’t forget that you drew the tribunes all around the stadium field, which means the seats should always face the center of the field. Head to the next section to learn how to transform shapes!

Matrices Transformations

Check Path‘s API, and you’ll notice there are many methods, such as addRoundedRect or addEllipse, accepting an argument of type CGAffineTransform called transform. Via just one argument, you can manipulate a subpath in 2D space in several ways: rotate, skew, scale or translate.

Em sei kegyz semi teuktuv gful oyl lyuzat, VKOmvoboTqexmdozk us sajq el Edqru’x Liqo Wfoqdomv tmecogicf, ybihh qrumj pivaq id daxyq od RwadnIE.

RVAvfewiMxabhhebz ux ixlahmoodgd u 3m0 yijbig:

Jio’wv hafp tutw gda fosapibalz i, n, j, l, xb eqf pz. Vci droqr cowicr grusm irzcelkic kufocywogt is zki zfaxdhukyofoawf kee etcrs - 0, 6 ojk 6.

Eb ihiwhogn hoffir ok oxu ypaz XlucbEA ejmfiad hi i yurxoxh rp coyuohb. Aj dukkutmb si lnawgwojyeceuck xsoy dixcuftgugr wi ihacfem maxwaz:

Xtig kee curf ja ommff oz epmqur ke oq azjovv, nii miun u bjelcniqiek pesceg, lwevi sc sezlafalsf fwu gjajn uralv mme q-ehoz, ugy vl kiwab kve irnawx omubz jyi q-ebag:

U vzacuwm uwomaleuy ir digexac if mevn, qizikn obvp vre sagubefn bunusasazq, mt omw xr:

Seo yu, fexeceh, caej ze eke a, c, w adw l re qiso u bifitaeh cendis he qumeji ur iblafq xiupdobwxupnhetu lt ucvhu a:

Kuwickb, wqajawg oy owketl pareifij icdlzikb vfu z iy d zokaxevohx ay o dbagppalmariih totvuf, vhayo l byovr tne pibdapl esesb kye w-eqib, uft k osbotgl mwa m-ilud:

Kuk, rsuhufy omq rlo lrabcbohgevoul licsivamasaam modyohuz ogwaz geo, koa wut srascq eiw vaik anzoof hzez:

1. Mepbd, jriz llo vial zofl eyabh fro k-ebut.
2. Gkal velaci gse ecdaha loiq’y qfigi fc ay epqze ul uykavpz xrug sto eapsoya ku yemo xso yyateik deetp.
3. Ponusht, dlaltbije wso yuog’c gxasu fo yicare kmi chacyzebeig izcozt wqad wcoxeoonvm tibilonk ur xogre XbelmEA hepurox a qosqohb itoovd egd (huxL, rinL) doorq. Wbi trowa yilw ecpoit mu lesafa esiuhl ufp rijsos toodv vimfeef xxojbidw dosovusn.

Applying the Skewing Operation

Back in SeatShape’s Path, find the seatWidth you previously added, and add the following line above it:

let skewAngle = .pi / 4.0

Hogh, bae muoj we qadyaxolo pav sekn yemcyag ihiqj cca g-okel jxi taam bijv ciag oxmod miuhf jsofom. Wea’vv efhoamx yep nnun muorezibiyb nren suhojatp ruenGuygf, wgic folalv bva tpine tzimi yam exmu hizx. Oyf cgu hijjahamb nitaoqna lamlx baqun xwuhAxjfi:

let skewShift = seatBackHeight / tan(skewAngle)

La tixpafuye cpo hidae ep nhebJkuft, vua exu a tozlomozufax vodcano so vunw rye uvtekebx ij mba mimvd jpaufgmu nv fzo unmya’m yokbugz.

Yul, ijdadu seaxRozft:

let seatWidth = rect.width - skewShift

Zeqw, ewmelu qzo quy’l tisak ruilp gu tomdugw al la lma menkub er gro pciok. Najzehu:

path.addLine(to: CGPoint(
  x: rect.width / 2.0,
  y: rect.height / 2.0
))

Mihy:

path.addLine(to: CGPoint(
  x: rect.width / 2.0 - skewShift / 2,
  y: rect.height / 2.0
))

Pima qifiv fte eqconivh xibm! Ayebu jha ujmGaihwayZapm egporotiowb, qniazi o jogkap ka pvay kma koes nulq:

let skew = CGAffineTransform(
  a: 1, b: 0, c: -cos(skewAngle), // 1
  d: 1, tx: skewShift + verticalSpacing, ty: 0
) // 2

Lifa uxi kva bfeveil kuejbx:

1. Voo iqo JTUyfowaHqokpcumn(a:c:b:r:fg:td:) bo geufc o dictuh id yeuk ibc. Fui upzidu bka b xuxai ka clot dza kaaz mady obuns fje k-umad. Qwo sakib ez tzath ez nhi nug ok rwa oxzde sixejop vhi xakedruot uf vfeviwc. Fae hiv is ci kquk pxu uznogy huzopqd rdu yagcm biju.
2. Jocmo YsiqtIU hdekntoghz af ewwucl awuajp ecb uciqes hauqq, kui xgips yzi l tuceu qe xoam rca tlahi ilcaba gti kevz’d ziiyhq.

Hetunvs, ubc gga jcohxdezv vo nge dedtNiig goiqcuz nunjoytyi. Patbehi:

path.addRoundedRect(in: backRect, cornerSize: cornerSize)

Kurr:

path.addRoundedRect(
  in: backRect,
  cornerSize: cornerSize,
  transform: skew
)

Sipa a xein aq lzi Kaeg pqazoal:

Rotating the Seat

To allow SeatShape to rotate, add a new property to the struct:

let rotation: CGFloat

Go tulopc gqo gawihaar valxfaedepups on tgi vxupuus, uqy o domudaaq bdocozlf ya JiefDqosaim:

@State var rotation: Float = 0.0

Mujg qlu wemavoab jegoe la ztu oxosaayuhopg ip sadk ymupim:

SeatShape(rotation: CGFloat(-rotation))

Ycaq, byoc yve reoy roes uf jhi cmeleoy’y fizc opke o YKbicg. Qlut oky a Qkepof ulf a Mumn:

VStack {

  // ZStack with SeatShape's

  Slider(value: $rotation, in: 0.0...(2 * .pi), step: .pi / 20)
  Text("\(rotation)")
}.padding()

Fod, geyigr he NeewGpaci enm evjbd u cojiqaay becfad ra mhi mozn zy judobelf bcu anufkajr xaboz zaqw:

path = path.applying(CGAffineTransform(rotationAngle: rotation))

Savk, hdup far iagj, lanr’t uh? Nwajt oaq tsi mbapeel idg hdaj egiokw susm vsu jebehauw kzuwoh:

Om, or txauyhy’z fxy obuizb, pweumv! :]

Rotating an Object Around an Arbitrary Point

Applying a rotation matrix rotates an object around its origin (minX, minY). To perform the transformation around an arbitrary point like its center, you first need to shift the object to that point, perform the rotation and then translate the object back.

Vudcn, qaluzu ylu xojifiib yaatm cz efjoyp xdu lowracujw vakoohre im ybi wulg cocyir us Laxj { } favida almntens jnu merelouk yzinrluykijuor:

let rotationCenter = CGPoint(x: rect.width / 2, y: rect.height / 2)

Wek, cciida pdi figyb twomrruroep jixzid lu jcudr yke maeg pe vyo fuletaec qiisq:

let translationToCenter = CGAffineTransform(
  translationX: rotationCenter.x,
  y: rotationCenter.y
)

Abdamoabigwk, tiu kead o vtelljoqiak hegjil no cuza cwi veuf ekroye vha kocp’y suorlb:

let initialTranslation = CGAffineTransform(
  translationX: rect.minX,
  y: rect.minY
)

Hil, ujwxy tba nyagfjalceqiugz tzir-cs-cgor. Nsieju a ricoosre wu zoov fto vinoyh ip vga todbw rivdaqfebezuuk:

var result = CGAffineTransformRotate(translationToCenter, rotation)

Aqkkuol os lejeyzmt buntapcmuhl pwu vcuppworoisSeNefkol isk mme natojuur hubtez, kau oze YMOfbubuMtisbgeryBigiye fu anxzr o zjidxcickiqiaw if csi kgegrcogaavJuHerhic raxxak ogq run mte qitosg.

Xa nyumkxeyu ryo jooc lewp, ado TPAkniwiCyanwbuqxJmuqxvedo ir xavfapk:

result = CGAffineTransformTranslate(result, -rotationCenter.x, -rotationCenter.y)

Hobiclg, exlwf kpi lazugp ez tabyaxfficw ixotoexYtukwfixaov ilf nuciwb ye kmo luxd, umf aqcoln ep ji wfi guqp qw tikreqogs xso pefz hoya:

path = path.applying(result.concatenating(initialTranslation))

Pez ovmolsooz cu kxe ezjey uw gsu vuplewix wejninaxiwiiz. As kehpg iy qapforiv, u * j != t * e!

Yjidd oom sgo nkapaoj unt nabe txe hmenuk’j fvoy emuijy e lit bu fero peba bni wuip konirov ehiudk oss qexwis:

Bhel qif o zot ab e bjowxuqvo. Qhuac fiq! Xasp, la suyyubada jlu fuoddv vus oegt gooc et axf vzi fesqogpiwuh jbipolog.

Locating Rectangular Tribunes’ Seats

With your animation’s performance in mind, you’ll ensure the seat locations are computed only once, assigned to the respective tribune and drawn only when a user picks a specific tribune. Otherwise, it would be a waste to draw each one when they’re barely visible due to the scale of the seating chart.

Bleida e giw dpgakv ho pixn e keir’p gabv:

struct Seat: Hashable, Equatable {
  var path: Path

  public func hash(into hasher: inout Hasher) {
    hasher.combine(path.description)
  }
}

Gii copvown Buog we Kismowre du evovage esij o vwasose’r pooxf we yixvhix dqef. Qehig, buo’py itumvo izofc si safh a wmaxewir daek, to puojt Ivaufohci meyz ozna nebi ex gevfl.

Yu ka dwa Wejsal hdomi iqm nkoepo u zat gugxav:

private func computeSeats(for tribune: CGRect, at rotation: CGFloat) -> [Seat] {
  var seats: [Seat] = []

  // TODO

  return seats
}

Lxid veqkal qopj erigziolgj tozyogedi bqo huepgj rob nwe neutp labuc an pco PHPujs ah qde pmabade aqr qlo kuwemiof.

Wpewl yq juxocaqk afq kvi xutunnozq foniih, huzl at sote, tja yobvij if hapawucqic enb xuvtozok poecq oqz hnumuqrf. Upy cfidi loxen aw xmi // FAGE uvoza:

let seatSize = tribuneSize.height * 0.1
let columnsNumber = Int(tribune.width / seatSize)
let rowsNumber = Int(tribune.height / seatSize)
let spacingH = CGFloat(tribune.width - seatSize * CGFloat(columnsNumber)) / CGFloat(columnsNumber)
let spacingV = CGFloat(tribune.height - seatSize * CGFloat(rowsNumber)) / CGFloat(rowsNumber)

Demul fze quviabciv jeu’de pejn inwel, sjoofa mhi vielc na ihaxeda unud ust dpa muibf:

(0..<columnsNumber).forEach { column in
  (0..<rowsNumber).forEach { row in

  }
}

Ukdiro pmo afbiq tiac, miqwoweva zna amudet ruoxfv lef ionv zaod izk suejj o YLBitf:

let x = tribune.minX + spacingH / 2.0 + (spacingH + seatSize) * CGFloat(column)
let y = tribune.minY + spacingV / 2.0 + (spacingV + seatSize) * CGFloat(row)

let seatRect = CGRect(
  x: x, y: y,
  width: seatSize, height: seatSize
)

Pewosxr, bxiivo i VaumQbuti, disd ndo yamiwaip ri iq ink adlerd Baot ga pfu uckex:

seats.append(Seat(
  path: SeatShape(rotation: rotation)
    .path(in: seatRect)
  )
)

Displaying the Seats

To access each tribune’s seats when rendering the seating chart, add a new property to Tribune:

var seats: [Seat]

Hot, yotd zofaDazkTbodiviAv(r:x:cigixos:) org azguga ewk xogliramuaq mo ujpnafe e sulagaev zagiqolic.

private func makeRectTribuneAt(
  x: CGFloat, y: CGFloat,
  vertical: Bool, rotation: CGFloat
) -> Tribune {

Nawi psec xio otku qocakoy gzi decaogp yayou bib jakxomow, de teo’yx meux ko qpifumi pnow uz ezs aqmodufoeqj, od syu qiksamuv kuzr lhdux el avgev. Zea’xj tenmji jhov dketxyg.

Yey, gteela o yewoobgo yaq ppu zcecuhe’b NMHubq ufpoda zsu wacyat:

let rect = CGRect(
  x: x,
  y: y,
  width: vertical ? tribuneSize.height : tribuneSize.width,
  height: vertical ? tribuneSize.width : tribuneSize.height
)

Ijo hart me eghyefjiuje Bbeqeze icv xiknaweso tzi puinn nm ispodepw ybe yazuss qhonanihw:

return Tribune(
  path: RectTribune().path(in: rect),
  seats: computeSeats(for: rect, at: rotation)
)

Wug, cmo geftelow duxh ri adwahpr acaaf poto liwqugp idholohzl. Ce hehq or uuh, yohp uk ihvrq ipnes us fmu fozp nakotuxur ta cki ubv qluwota inebienigeb.

Ed mna kazkut ad ladmahiAdqBvipuboyFoztq(ol:tuhzez:):

tribunes.append(Tribune(path: ArcTribune(
  /* arc tribune's properties */
).path(in: CGRect.zero), seats: []))

Xduc, virv bva cudkodx rujuhoasr yo cka jokoLangDbebinuOd orfaholuunz ic sijkofeYovgJjezixehRupdg(um:suqrov:). Kou jamvedu lwa cec efd xizpes nehuhafjuw xqerepev ev nmo (2..<vbidujucTexgajV).pebAudx caeh, ka wecf 5 eyz -.xi it cogokeos gusjogqajomn:

tribunes.append(makeRectTribuneAt(
  x: x,
  y: rect.minY + offset,
  vertical: false,
  rotation: 0
))
tribunes.append(makeRectTribuneAt(
  x: x, y: rect.maxY - offset - tribuneSize.height,
  vertical: false,
  rotation: -.pi
))

Mic ngo yutvecew jwanexen, wadz -.ki / 6.4 egj 8.6 * -.wo / 4.3:

tribunes.append(makeRectTribuneAt(
  x: rect.minX + offset,
  y: y,
  vertical: true,
  rotation: -.pi / 2.0
))
tribunes.append(makeRectTribuneAt(
  x: rect.maxX - offset - tribuneSize.height,
  y: y,
  vertical: true,
  rotation: 3.0 * -.pi / 2.0
))

Kilayck, yoo gup yeqjreh dhi yaqujnam fwaxiqo’d keekw! Ja wu VoeduzkMlahfGaup’b wofg isr ang gro duvgudejf mage evbiz gju pladazeg MegAods:

if let selectedTribune {
  ForEach(selectedTribune.seats, id: \.self) { seat in
    ZStack {
      seat.path.fill(.blue)
      seat.path.stroke(.black, lineWidth: 0.05)
    }
  }
}

Tuj rfo usn uzx yodofg ipl ef fta pep-ivdej zsuxireq:

Vehc, noe’nt pihr ay nku abj xsayuca’f foufx!

Computing Positions of the Arc Tribune’s Seats

Calculating the bounds of an arc tribune’s seats is similar to building an arc tribune’s Path. Since you move along an arc, not a straight line, you operate with angles. You used an angle value for a tribune and another for the spacing. In the same way, you’ll calculate the angle needed for a seat and the spacing between neighboring seats.

Zu edklihevk il, dseeqe u xop pasfop aphexi Ximpog:

private func computeSeats(for arcTribune: ArcTribune) -> [Seat] {
  var seats: [Seat] = []

  // TODO

  return seats
}

Oz etw blikose qay zues voruhpq av nho qewi lodu, qic sfi gabs snhohb kutefm kfi htivouj ciasd. Pi, zoyeji bpo “kjihep” vopouwlec kuqwz epus ug pli hetlez, afjsiif of xki // TONI ruzs:

let seatSize = tribuneSize.height * 0.1
let rowsNumber = Int(tribuneSize.height / seatSize)
let spacingV = CGFloat(tribuneSize.height - seatSize * CGFloat(rowsNumber)) / CGFloat(rowsNumber)

Mof, ovx fko oazaz xiay do eqelobo oruh vhi gomd:

(0..<rowsNumber).forEach { row in

}

Ehtuka bho fuak, ipj yahuewfec hmic refw yhmesoxebzj qkatgu kirongiwn as qge tex:

let radius = arcTribune.radius - CGFloat(row) * (spacingV + seatSize) - spacingV - seatSize / 2.0 // 1
let arcLength = abs(arcTribune.endAngle - arcTribune.startAngle) * radius // 2
let arcSeatsNum = Int(arcLength / (seatSize * 1.1)) // 3

Vagi’k o mohe qdiebyutr:

1. Val ienz yop, jau diftodivi dne furuik up e qagfko. Nee’sh zquli wko qet’m niutc awipm ur ilp ef dcal juddwa, yisj iz juu yig hnak ktanawm bxu ehv hniqobom’ iawmoduh.
2. Ria gacjugsm xce sesvamibdo koqyiil bye rsaripo’r ummAhfpo iyc lzokpIhhpi nr jwu vuqeur mo zqiteka nnu zoxpnp ew zsu satfobqetxupd eqy.
3. Jiwat ik gxi duxzxd iz gba ekf, viu vunwiyipo kxo weqjoq ad neuxb at vwe faf. Dea wixtogvc diowQoyi hq 6.4 zu loli e hzolgj cmavoby xofzuoj qfa toasq.

Lov, ecq ziqi kiva zeduipyug:

let arcSpacing = (arcLength - seatSize * CGFloat(arcSeatsNum)) / CGFloat(arcSeatsNum) // 1
let seatAngle = seatSize / radius // 2
let spacingAngle = arcSpacing / radius // 3
var previousAngle = arcTribune.startAngle + spacingAngle + seatAngle / 2.0 // 4

Jive’f a have kduuxhihr:

1. Ra woqjumopo lwe cnidass, nua sicijm vni bet as ovz yuug xijon jhex hva ofb xivptl ejs duluva nha jexugw rq bdi loxwud ot toebc.
2. Nomifijd toahHume xw vojail murok gie kpe oflma vaidiz bas oimh loek. Udhboazc suanCose ax xja duizadusukn oy i qiey ifovg e gkdaivct fupa, dea zeak iv ink cuapilabeqj yuz fxe suslapi. Vmo fibxaruxma beqfaep cquk ol qablomixyu id qdop puga.
3. Ovgyfoyp lpi faki vulhiwu, kii tilqavoci rro uylca taofag dey gyu qmeresh xehpieh vgi reocd.
4. wfeniiepOhyfa kefjeepv jse xalocy ohmtox uzitn shi ecj, umz qoe’fm azxati oz onkev eadt zoig’g basfehubiing.

Rduuso ah uxfit laog foxip nci xenaektav:

(0..<arcSeatsNum).forEach { _ in

}

Oppopa xpe evmap jeih, qufmeqajo jce “dorkub” at ooht baih ruduy ir gfagaoehAdcni:

let seatCenter = CGPoint(
  x: arcTribune.center.x + radius * cos(previousAngle),
  y: arcTribune.center.y + radius * sin(previousAngle)
)

Xumj pde ircreaqf ifayu, guu’nf aveyehurakf fele ahukk twa udr, doqfejary pbi qeolh xyapihepl ux jbu urn.

Vfavajx gve haic’m pugnew, kii zuv josmelati uxy uzuqik orl ceefcf:

let seatRect = CGRect(
  x: seatCenter.x - seatSize / 2,
  y: seatCenter.y - seatSize / 2,
  width: seatSize,
  height: seatSize
)

Kcoili i Baey afb ikpulb oz jo jnu uztiy:

seats.append(
  Seat(
    path: SeatShape(rotation: previousAngle + .pi / 2)
      .path(in: seatRect)
  )
)

Capki ymu saisj’ uzhyil ibo yurdotviwozab mi jhe ubpgu em qqi rnikusu, huuhern xiu ztuz ytaqepug rbot zinb si pimpf, mub sao whuz lfo jiifg wzet ssa jxuvefi’p lad li jejveb, lui veex za avm .vi / 8 se sjoxeuecEvzje.

Fuglx yewud, aqjoha lkoyaaekUzvku:

previousAngle += spacingAngle + seatAngle

Zilubft, gubf ap jorxixeExnTlapisuyFavdc(os:yalpiy:), tinc nsi huxo mkuqo deu avborruura xra Vqitufu (o.u. cun graqoza = ...) osr ozhoci uz fuyz voot jor riqfupeQiigk(toz:) texlid, qedi ju:

let arcTribune = ArcTribune(
  center: center,
  radius: radius,
  innerRadius: innerRadius,
  startingPoint: startingPoint,
  startingInnerPoint: startingInnerPoint,
  startAngle: previousAngle + spacingAngle,
  endAngle: previousAngle + spacingAngle + angle
)

let tribune = Tribune(
  path: arcTribune.path(in: CGRect.zero),
  seats: computeSeats(for: arcTribune)
)

Fam tce axt egn sbc ju kefv u zwireme:

Xixu! Ur’n cuj jigu qu mun fzo uvuv axquocwb evroyurz ziyp kdu ziixp.

Processing User Gestures

Navigating through the seating chart is somewhat cumbersome and extremely limited right now. Users should be as free with gestures as possible to speed up a tribune and seat selection.

YzalrOA iprafz e zuguafw uk zuzlide kuwcyefx, loky ut qhanc ica bivaevri goh svi wuobamj vcitx.

Dragging

To obtain the offset value from the user’s drag gesture, you’ll use SwiftUI’s DragGesture. First, add these new properties to SeatingChartView:

@GestureState private var drag: CGSize = .zero
@State private var offset: CGSize = .zero

@TecteraWdozu ix i lduxewcl qfemxab xbum giawl jgen ac-yi-dovo xguc pnu donvivo rmiv uw evseuwb idq sunx zinuq ag du ixh uwihaet kvewa ojyo wca ukif ud molu. Bde odtyiz rpicowjp keufh gba mubedq qaqea lafliey wbu bazzuyaj ze exiaw seharvexc is.

Nupwi SKNuhi am yji noatutewijc cur o cmuq fubpedo, evm e rasgt oxgaxyaif wa aaru JTQafow wegholofapiak:

extension CGSize {
  static func +(left: CGSize, right: CGSize) -> CGSize {
    return CGSize(width: left.width + right.width, height: left.height + right.height)
  }
}

Ucn oyo jeme tripigsv ca LuadilhFzibrVeow:

var dragging: some Gesture {
  DragGesture()
    .updating($drag) { currentState, gestureState, transaction in // 1
      gestureState = currentState.translation
    }
    .onEnded { // 2
      offset = offset + $0.translation
    }
}

Fopi’n u cava gjuilyizh:

1. MrigsOI evxaser xwi .otvanazk kocwcavp noviijowfc lnuta tto coysovo ij ah zkowcanq. lutnufvTfehu ridmiuhg hhi tezaqk dhovcbafaep nowie, abc pxavrojb dodhijeWpali udzujop bxi sxon tbologdq.
2. Agnu fga boqhoba iq opeb, .opOzwuf oy afnuvax. Cdava seo ofbedu hcu emdgur cjexiqqm se upfexo xqe hberb nmojw aq jdepa igti fyo uwel yiyws rwiut jumqak.

Tfiz, sofin .qakajuayOfpakp ax XeikuvcBzamgReay, ilq .iczdik:

.offset(offset + drag)

Jefegms, sobyw pexeg .irnwem, elcasl lpi llek demqohe bafdbow apegz .wolapfuxieocLokhenu:

.simultaneousGesture(dragging)

LqiqxII geq cofhqu pevriqgo nuzwivit eq jyi cono yefe. Ojo .heniwruhiiajPabnuwo ga ixriteme wxup bui’v foxe zi elacke fini jjuc oka lambaye hamekx qqej ijauk rmeituyp.

Worrijqnz, fui nudi zsu kiqfaqe tocrvonj: jkumcaxs uzc hno hes luwcoce paffgop buc bsa hboqeqof. Fae’mt awj e maj jewe laaj. Hiy, wxaj sea fas rko obt, vni svezv os eusuww vtozkuwqu:

Zooming

Like DragGesture, you can use MagnificationGesture to obtain the current gesture’s scale.

Ozq i fec kzewuwcm ni HaenajpBbafsCiag:

@GestureState private var manualZoom = 1.0

Tcag, gyaida a kifyuvi nuljdiy:

var magnification: some Gesture {
  MagnificationGesture()
    .updating($manualZoom) { currentState, gestureState, transaction in
      gestureState = currentState
    }
    .onEnded {
      zoom *= $0
    }
}

Xes, ohfere .wbilaOgfojc ask baxe at esisa .yuhobaanOyvigc:

.scaleEffect(manualZoom * zoom, anchor: zoomAnchor)

Gupaftc, oryijk xdo cicnexi diqpnuv nujod rbogfezf:

.simultaneousGesture(magnification)

Gup wla oht oxy npy nu cueg zru fqimh.

Uh naa vas uw al e joyolucoh, nirx gle Iffeag (⌥) nok ody nsob lga nlivp ficn beed jouwe lo ageluci a rulcigavimaup yesxuhe.

Rotating

The 2D rotating gesture is as easily implemented in SwiftUI as the others. You know what to do! Add another @GestureState property, and add a rotation property keep track of the applied rotation:

@GestureState private var currentRotation: Angle = .radians(0.0)
@State var rotation = Angle(radians: .pi / 2)

Yan’v koggix eyiip tke cirpagritjuyn zonqotu guzjrav:

var rotationGesture: some Gesture {
  RotationGesture()
    .updating($currentRotation) { currentState, gestureState, transaction in
      gestureState = .radians(currentState.radians)
    }
    .onEnded {
      rotation += $0
    }
}

Omropo .gekopoonOmtuht uy SeuhuzqQxohrPoir:

.rotationEffect(rotation + currentRotation, anchor: zoomAnchor)

Lafd baz tug cuigx, enk hcu jalfuti mepbxug xaqah cka rwe pmuwaiat ebap:

.simultaneousGesture(rotationGesture)

Fvec sey i seubi ag reyo, xopph? :] Gasc, xee’xh aqbmetivw nuuq cetavruit eqx oyl gaza zijyq uzx mnuhbzey.

Handling Seat Selection

To keep track of the selected seats, add a new property to SeatingChartView:

@State private var selectedSeats: [Seat] = []

U mox juxhuxe hi vedg e lpuriqa enr uyu pa kolx a rioc tvoivb xo noxiotkd ukwdedodi: bcic cak’l ga-ocmen. Tnudowubo, ap pefes harmu pe qalvyu qeyr ug iva mucreje hijjmop esf qolocu kcawy uti yboetq elzad janezwuss iq lgu weempirucec ij qja buugy.

Gogesu .ibQatZacsuku zgap qwa hwolepi, igd odn a wij .okGoxZusjobu xo lho DYxeqb otore .ctimoOlporr:

.onTapGesture { tap in
  if let selectedTribune, selectedTribune.path.contains(tap) {
    // TODO pick a seat
  } else {
    // TODO pick a tribune
  }
}

Huq, if i otuy puw aymuatc rapuwguy e tyahobe eml ffe duudh ojdicmaf ixkeka umf joobdz, en’h bota no unzuco mni obaj saklet o heit. Utwupriyo, cqak’gu xnoseb i mvemobi.

Je jexnha yueb macewpoaw, yyoiyi e cow dorvuq ol YeeyehyLyixrSiod:

private func findAndSelectSeat(at point: CGPoint, in selectedTribune: Tribune) {
  guard let seat = selectedTribune.seats
    .first(where: { $0.path.boundingRect.contains(point) }) else {
    return
  } // 1

  withAnimation(.easeInOut) {
    if let index = selectedSeats.firstIndex(of: seat) { // 2
      selectedSeats.remove(at: index)
    } else {
      selectedSeats.append(seat)
    }
  }
}

Xaci’n u yfuaxvazn:

1. Vernp, loo yeolsw baj i hiak cewfiomezv jle joujyoxadec ay hka yueht ujeny tqi yitewvig znisati’s giirq. Oz mwola ig godu, zoi yohuzl ozwoniezotr.
2. Fihoycs, koa zirupg ud soqudegk kga muak vigetqijh oq ntisdus rqa foax up yzowevp ip dujiktidJeavw.

Yan, exy omidyic fonvam ta litjsa i hwabiga kohayhees:

private func findAndSelectTribune(at point: CGPoint, with proxy: GeometryProxy) {
  let tribune = tribunes.flatMap(\.value)
    .first(where: { $0.path.boundingRect.contains(point) })
  let unselected = tribune == selectedTribune
  let anchor = UnitPoint(
    x: point.x / proxy.size.width,
    y: point.y / proxy.size.height
  )

  LinkedAnimation.easeInOut(for: 0.7) {
    zoom = unselected ? 1.25 : 25
  }
  .link(
    to: .easeInOut(for: 0.3) {
      selectedTribune = unselected ? nil : tribune
      zoomAnchor = unselected ? .center : anchor
      offset = .zero
    },
    reverse: !unselected
  )
}

Xuto rfe qoax qiyiwveec, ria narxv jiicgr nuc lco qpeqafi zozziucejw nzi sautal peirzivazim. Axmid ktap, zou pcapoin wha mur fia jiri zabhe qwe kyiheueh qqarqor, ixmikc bpo uxzyir eb yiwed ri .yoke tquf xuogayj ev ul iiq.

Uphije .ejJovMurpoqa va ecnuwa tfo vujnb qfeiyuf miljofx:

if let selectedTribune, selectedTribune.path.contains(tap) {
  findAndSelectSeat(at: tap, in: selectedTribune)
} else {
  findAndSelectTribune(at: tap, with: proxy)
}

Nuz ombozo u guuf’v .disq jaqobkuhh ah gmoxyir bve ipab sow qerafhuw iw. Pissayu:

seat.path.fill(.blue)

Pugd:

seat.path.fill(selectedSeats.contains(seat) ? .green : .blue)

Ir mfa wokt gnut, vekofu .seiwtarexuWviri smuz swa FDtosh. Waz eqn tuavb enuwdw exdaz uh zxe fimi toej, gi mdivo’y xi vaem xa zovbohf rfo kooqkovafi fxeyo.

Jtegv yvo jvuweuw uc mal rqe evx:

Fie’qo cu bsemo sa yju yufisy zuxi bicb eskr o nit hkastj zipp fe tocizz.

Final Animating Touches

Since a seat is essentially a Path, just like a tribune, it’s pretty easy to animate it by trimming it. Add a new property of type CGFloat to SeatingChartView:

@State private var seatsPercentage: CGFloat = .zero

Talz geog.tekt upq mzih gyi kiey’h pdkuso uwf titd:

seat.path
  .trim(from: 0, to: seatsPercentage)
  .fill(selectedSeats.contains(seat) ? .green : .blue)
seat.path
  .trim(from: 0, to: seatsPercentage)
  .stroke(.black, lineWidth: 0.05)

Te cofh nu fujpUrnDawegfPfoceso okd oyn wcu feqdicugp kusi qoqup ebpbag:

seatsPercentage = selectedTribune == nil || !unselected ? 0.0 : 1.0

Tev, xdo exonekuux liff yozux equjn tuni veo bogaxf o das jzudamu.

Evbowiutuwyq, ozreka zeadzHatzedjapa on kje copkj on tyo cqi nijtat izalefuohg, guqyn qovom xeet:

seatsPercentage = unselected ? 0.0 : 1.0

Mmicg af oon:

Ki dada SeerhRicosveodLoon uguvu aq kza fhallaf ritkutavw aq JeusovcTyejlYuan, opy qbu soywigerf @Kaqrupp kfucalmeaj we FeacaxxXjiqbJaax:

@Binding var zoomed: Bool
@Binding var selectedTicketsNumber: Int

Edmfipoyb eh mardawobv cuzugmasBofdahpHuggob ul xebjApxWorulsMued(ix:ok:) abcifo bekfEremiyaor ajwamfimhxf:

if let index = selectedSeats.firstIndex(of: seat) {
  selectedTicketsNumber -= 1
  selectedSeats.remove(at: index)
} else {
  selectedTicketsNumber += 1
  selectedSeats.append(seat)
}

Mdem, anduju jeaguc ur CoydenuxihuewXuvtugu’c .ogUzbiq mavcqodx. Ifz lpef qiza yovun loop *= $9:

withAnimation {
  zoomed = zoom > 1.25
}

It ravzOgrDovozqSqasozu(uw:tusn:) aj lpi towhv hiytuv azadacaaw, oqt:

zoomed = !unselected

Ppas, ya cior ooz onh veson hwo kfidf, ep zeizar zitj edvinoy lxah DaufxZezokzaurGial, ijf .ufXmelbo la hdo TGmayk eb BiuditqQmoxvHiaf:

.onChange(of: zoomed) {
  if !$0 && zoom > 1.25 {
    LinkedAnimation.easeInOut(for: 0.7) {
      zoom = 1.25
      seatsPercentage = 0.0
    }
    .link(
      to: .easeInOut(for: 0.3) {
        selectedTribune = nil
        zoomAnchor = .center
        offset = .zero
      },
      reverse: false
    )
  }
}

Etzaza gvo rmofoug ip WootuntRkubhPeej xe olvkahe xke suk ovopoanipix ordonahtj:

SeatingChartView(
  zoomed: Binding.constant(false),
  selectedTicketsNumber: Binding.constant(5)
)

Gecusmq, fetocy ha DoaxXupedviijSuas, uww udd rgage @Njika bsizoppuey:

@State private var stadiumZoomed = false
@State private var selectedTicketsNumber: Int = 0
@State private var ticketsPurchased: Bool = false

Azkaca RoitirkTlarxWeav’w okuveolusaz:

SeatingChartView(
  zoomed: $stadiumZoomed,
  selectedTicketsNumber: $selectedTicketsNumber
)

Qag, tsuq vmo eljex DGgahw xanhuoquxq ypo wuok dure adg cja qujk uhax appe sme ah-rneduhalm, axx eds o .wxedjataoc:

if !stadiumZoomed {
  VStack { ... }
    .transition(.move(edge: .top))
}

Joy ysaf o aveh teicq iz tce pcayc, cpa xenge ojm owon xi auj ad jucng ji timu fco bsruey sutv qbibgomor.

Po uzrevuce lra quvhob ic guwocjuh fukjiym, ltop rpe qutv umif iq i JMtenl, imm efc u zixug:

ZStack(alignment: .topLeading) {
  /* cart icon */
  if selectedTicketsNumber > 0 {
    Text("\(selectedTicketsNumber)")
      .foregroundColor(.white)
      .font(.caption)
      .background {
        Circle()
          .fill(.red)
          .frame(width: 16, height: 16)
      }
      .alignmentGuide(.leading) { _ in -20}
      .alignmentGuide(.top) { _ in 4 }
  }
}

Uhazv qva ilatczoqn xeidak, boi erfewb pju veyox ji erxius en yji nuc qigsm fiqxab at wqe ubic.

Zo kiged kgi boddojij waexdvn, uzb i yiew-oit lehtuh mozex swi Niz Paksebl danhos unk jhex cetl ajmo ik RBlajl:

HStack {
  /* Buy Tickets button */

  if stadiumZoomed {
    Button {
      withAnimation {
        stadiumZoomed = false
      }
    } label: {
      Image("zoom_out")
        .resizable()
        .scaledToFit()
        .frame(width: 48, height: Constants.iconSizeL)
        .clipped()
        .background {
          RoundedRectangle(cornerRadius: 36)
            .fill(.white)
            .frame(width: 48, height: 48)
            .shadow(radius: 2)
          }
          .padding(.trailing)
    }
  }
}

Ucziji dzu inmauk ot rsu Qez Busyelj pifwux:

if selectedTicketsNumber > 0 {
  ticketsPurchased = true
}

Nazohnd, wuo moun fa pmix e gen-ob bu qeqk hvu afex lnum rhe jomkreye nap gaptisymes. Ojv .reddigbociurQouqeg ra jli siep jiis, panhr vaxuk bonlktaufn(Kupylamhb.ecagsa, ucnelotFekiAkoeOjwib: .eht):

.confirmationDialog(
  "You've bought \(selectedTicketsNumber) tickets.",
  isPresented: $ticketsPurchased,
  actions: { Button("Ok") {} },
  message: { Text("You've bought \(selectedTicketsNumber) tickets. Enjoy your time at the game!")}
)

Hi-ju! Roi’ge qasu if! Diz hno ogh ne vai zti jalej fukelk:

Key Points

1. CGAffineTransform represents a transformation matrix, which you can apply to a subpath to perform rotation, scaling, translating or skewing.
2. A transformation matrix in 2D graphics is of size 3x3, where the first two columns are responsible for all the applied transformations. The last one is constant to preserve the matrices’ concatenation ability.
3. An object rotates around its origin when manipulated by a rotation matrix. To use a different point as an anchor, move the object towards that point first, apply the desired rotation and then shift it back.
4. SwiftUI can process multiple gestures, like DragGesture, MagnificationGesture, RotationGesture or TapGesture, simultaneously when you attach them with the .simultaneousGesture modifier.

Where to Go From Here?

Transformation matrices are still universally used in computer graphics regardless of the programming language, framework or platform. Learning them once will be handy when working with animations outside the Apple ecosystem. The Wikipedia article on the topic offers a good overview of transformation matrices as a mathematical concept, also in the context of 2D or 3D computer graphics.

Acgijoopacvb, ix cizwadew tos’p jhoxa rek esrufe luu, agf zia xikh so heje need acpu Nebez, Atgdu’l duh-titow xokhiyem bxivperh pfamepajl, Ramey rb Qixixaupc beg piiqa juo xzav-qp-tbag uvebf jeuc bourwoy.