How would I modify an already drawn Path? - swiftui

So I have a view of lines. The number of lines are determined by the user's input. I know about creating lines and how to render those lines with different effects.. but how would I modify a line that has already been created.
So for example I would like to make the second drawn line have a break in the middle after maybe a button tap from the user..
Here is some minimally reproduced code..
import SwiftUI
struct ContentView: View {
#State private var path = Path()
#State private var horizontalLines = 0
var body: some View {
GeometryReader { geo in
VStack {
Draw(path: $path)
.stroke()
.clipped()
.padding()
HorizontalLine(path: $path, horizontalLines: $horizontalLines, rect: geo.frame(in: .local))
}
}
}
private func addLine() {
path.addEllipse(in: path.boundingRect)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Draw: Shape {
#Binding var path: Path
func path(in rect: CGRect) -> Path {
var path = path
path.addRect(rect)
return path
}
}
struct HorizontalLine: View {
#Binding var path: Path
#Binding var horizontalLines: Int
let rect: CGRect
var verticalOffset: CGFloat {
let height = rect.size.height
let tenths = height / 10
return tenths * CGFloat(horizontalLines)
}
var body: some View {
Button("Add Horizontal Lines") {
path = addHLine()
}
}
private func addHLine() -> Path {
var path = path
path.move(to: CGPoint(x: rect.minX + 50, y: verticalOffset))
path.addLine(to: CGPoint(x: rect.maxX - 75 , y: verticalOffset))
self.horizontalLines += 1
return path
}
}

Related

How I can add a drawing function in SwiftUI?

I can't draw. Unfortunately I don't know where the problem is, colour selection works and the canva is also created, only the drawing doesn't work. I have also checked that the size of the canva is correct and that the path is defined correctly. here is my code:
//
import SwiftUI
struct ContentView: View {
#State private var lines: [Line] = []
#State private var strokeColor: Color = Color.black
var body: some View {
ZStack {
Color.white
.edgesIgnoringSafeArea(.all)
VStack {
Canvas(lines: $lines, strokeColor: $strokeColor)
HStack {
Button(action: clearDrawing) {
Text("Clear")
}
ColorPicker("Stroke Color", selection: $strokeColor)
}
.padding()
}
}
}
func clearDrawing() {
lines.removeAll()
}
}
//
Here I have created the Canva and the button to delete the drawing
//
struct Canvas: View {
#Binding var lines: [Line]
#Binding var strokeColor: Color
var body: some View {
GeometryReader { geometry in
Path { path in
for line in self.lines {
path.move(to: line.points[0])
path.addLines(line.points)
}
}
.stroke(self.strokeColor, lineWidth: 3)
.frame(width: geometry.size.width, height: geometry.size.height)
.gesture(
DragGesture(minimumDistance: 0.1)
.onChanged({ value in
var lastLine = self.lines.last!
let currentPoint = value.location
lastLine.points.append(currentPoint)
})
.onEnded({ value in
self.lines.append(Line())
})
)
}
}
}
struct Line: Identifiable {
var id: UUID = UUID()
var points: [CGPoint] = []
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
//
And here I have made it so that you should actually draw by touch, and that there is a colour selection

Why can't I create multiple paths with a for loop

in this simple reproduced code I abstracted a problem that I was experiencing in a bigger project.
What I am trying to do is create a Rectangle (successful) and draw multiple ellipses, each one bigger than the last, inside of the Rectangle (failure). Below is code that is ready to be copied and pasted... What am I doing wrong?
Updated code to fix unrelated issue
import SwiftUI
struct ContentView: View {
var body: some View {
MyShape()
.stroke()
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct MyShape: Shape {
#State private var horizontalMultiplier: CGFloat = 0.5
#State private var verticalMultiplier: CGFloat = 0.5
func path(in rect: CGRect) -> Path {
var path = Path()
path.addRect(rect)
var newPath = Path()
for _ in 0...5 {
let transform = CGAffineTransform(scaleX: 1 * horizontalMultiplier, y: 1 * verticalMultiplier)
newPath.addEllipse(in: rect, transform: transform)
path.addPath(newPath)
horizontalMultiplier += 0.25
verticalMultiplier += 0.25
}
return path
}
}
Move the declarations of the variables you're trying increment outside your loop -- they're getting recreated (and thus stay 0) each time right now.
Update, after edit: there doesn't appear to be a reason to try to use #State here -- just define the variables within path. If you do need mutable state over time, store it in the parent view and pass it through via parameters
struct MyShape: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.addRect(rect)
var newPath = Path()
var horizontalMultiplier: CGFloat = 0.5
var verticalMultiplier: CGFloat = 0.5
for _ in 0...5 {
let transform = CGAffineTransform(scaleX: 1 * horizontalMultiplier, y: 1 * verticalMultiplier)
newPath.addEllipse(in: rect, transform: transform)
path.addPath(newPath)
horizontalMultiplier += 0.25
verticalMultiplier += 0.25
}
return path
}
}

How to create synced ScrollViews in SwiftUI

I am trying to create two synced ScrollViews in SwiftUI such that scrolling in one will result in the same scrolling in the other.
I am using the ScrollViewOffset class shown at the bottom for getting a scrollView offset value but having trouble figuring out how to scroll the other view.
I seem to be able to 'hack' it by preventing scrolling in one view and setting the content position() on the other - is there any way to actually scroll the scrollView content to a position - I know ScrollViewReader seems to allow scrolling to display content items but I can't seem to find anything that will scroll the contents to an offset position.
The problem with using position() is that it does not actually change the ScrollViews scroller positions - there seems to be no ScrollView.scrollContentsTo(point: CGPoint).
#State private var scrollOffset1: CGPoint = .zero
HStack {
ScrollViewOffset(onOffsetChange: { offset in
scrollOffset1 = offset
print("New ScrollView1 offset: \(offset)")
}, content: {
VStack {
ImageView(filteredImageProvider: self.provider)
.frame(width: imageWidth, height: imageHeight)
}
.frame(width: imageWidth + (geometry.size.width - 20) * 2, height: imageHeight + (geometry.size.height - 20) * 2)
.border(Color.white)
.id(0)
})
ScrollView([]) {
VStack {
ImageView(filteredImageProvider: self.provider, showEdits: false)
.frame(width: imageWidth, height: imageHeight)
}
.frame(width: imageWidth + (geometry.size.width - 20) * 2, height: imageHeight + (geometry.size.height - 20) * 2)
.border(Color.white)
.id(0)
.position(x: scrollOffset1.x, y: scrollOffset1.y + (imageHeight + (geometry.size.height - 20) * 2)/2)
}
}
//
// ScrollViewOffset.swift
// ZoomView
//
//
import Foundation
import SwiftUI
struct ScrollViewOffset<Content: View>: View {
let onOffsetChange: (CGPoint) -> Void
let content: () -> Content
init(
onOffsetChange: #escaping (CGPoint) -> Void,
#ViewBuilder content: #escaping () -> Content
) {
self.onOffsetChange = onOffsetChange
self.content = content
}
var body: some View {
ScrollView([.horizontal, .vertical]) {
offsetReader
content()
.padding(.top, -8)
}
.coordinateSpace(name: "frameLayer")
.onPreferenceChange(ScrollOffsetPreferenceKey.self, perform: onOffsetChange)
}
var offsetReader: some View {
GeometryReader { proxy in
Color.clear
.preference(
key: ScrollOffsetPreferenceKey.self,
value: proxy.frame(in: .named("frameLayer")).origin
)
}
.frame(width: 0, height: 0)
}
}
private struct ScrollOffsetPreferenceKey: PreferenceKey {
static var defaultValue: CGPoint = .zero
static func reduce(value: inout CGPoint, nextValue: () -> CGPoint) {}
}
Synced scroll views.
In this example, you can scroll the LHS scrollview and the RHS scrollview will be synchronised to the same position. In this example, the scrollview on the RHS is disabled, and the position is simply synchronised by using an offset.
But using the same logic and code, you can make both the LHS and RHS scrollviews synced when either of them are scrolled.
import SwiftUI
struct ContentView: View {
#State private var offset = CGFloat.zero
var body: some View {
HStack(alignment: .top) {
// MainScrollView
ScrollView {
VStack {
ForEach(0..<100) { i in
Text("Item \(i)").padding()
}
}
.background( GeometryReader {
Color.clear.preference(key: ViewOffsetKey.self,
value: -$0.frame(in: .named("scroll")).origin.y)
})
.onPreferenceChange(ViewOffsetKey.self) { value in
print("offset >> \(value)")
offset = value
}
}
.coordinateSpace(name: "scroll")
// Synchronised with ScrollView above
ScrollView {
VStack {
ForEach(0..<100) { i in
Text("Item \(i)").padding()
}
}
.offset(y: -offset)
}
.disabled(true)
}
}
}
struct ViewOffsetKey: PreferenceKey {
typealias Value = CGFloat
static var defaultValue = CGFloat.zero
static func reduce(value: inout Value, nextValue: () -> Value) {
value += nextValue()
}
}
With the current API of ScrollView, this is not possible. While you can get the contentOffset of the scrollView using methods that are widely available on the internet, the ScrollViewReader that is used to programmatically scroll a ScrollView only allows you to scroll to specific views, instead of to a contentOffset.
To achieve this functionality, you are going to have to wrap UIScrollView. Here is an implementation, although it isn't 100% stable, and is missing a good amount of scrollView functionality:
import SwiftUI
import UIKit
public struct ScrollableView<Content: View>: UIViewControllerRepresentable {
#Binding var offset: CGPoint
var content: () -> Content
public init(_ offset: Binding<CGPoint>, #ViewBuilder content: #escaping () -> Content) {
self._offset = offset
self.content = content
}
public func makeUIViewController(context: Context) -> UIScrollViewViewController {
let vc = UIScrollViewViewController()
vc.hostingController.rootView = AnyView(self.content())
vc.scrollView.setContentOffset(offset, animated: false)
vc.delegate = context.coordinator
return vc
}
public func updateUIViewController(_ viewController: UIScrollViewViewController, context: Context) {
viewController.hostingController.rootView = AnyView(self.content())
// Allow for deaceleration to be done by the scrollView
if !viewController.scrollView.isDecelerating {
viewController.scrollView.setContentOffset(offset, animated: false)
}
}
public func makeCoordinator() -> Coordinator {
Coordinator(contentOffset: _offset)
}
public class Coordinator: NSObject, UIScrollViewDelegate {
let contentOffset: Binding<CGPoint>
init(contentOffset: Binding<CGPoint>) {
self.contentOffset = contentOffset
}
public func scrollViewDidScroll(_ scrollView: UIScrollView) {
contentOffset.wrappedValue = scrollView.contentOffset
}
}
}
public class UIScrollViewViewController: UIViewController {
lazy var scrollView: UIScrollView = UIScrollView()
var hostingController: UIHostingController<AnyView> = UIHostingController(rootView: AnyView(EmptyView()))
weak var delegate: UIScrollViewDelegate?
public override func viewDidLoad() {
super.viewDidLoad()
self.scrollView.delegate = delegate
self.view.addSubview(self.scrollView)
self.pinEdges(of: self.scrollView, to: self.view)
self.hostingController.willMove(toParent: self)
self.scrollView.addSubview(self.hostingController.view)
self.pinEdges(of: self.hostingController.view, to: self.scrollView)
self.hostingController.didMove(toParent: self)
}
func pinEdges(of viewA: UIView, to viewB: UIView) {
viewA.translatesAutoresizingMaskIntoConstraints = false
viewB.addConstraints([
viewA.leadingAnchor.constraint(equalTo: viewB.leadingAnchor),
viewA.trailingAnchor.constraint(equalTo: viewB.trailingAnchor),
viewA.topAnchor.constraint(equalTo: viewB.topAnchor),
viewA.bottomAnchor.constraint(equalTo: viewB.bottomAnchor),
])
}
}
struct ScrollableView_Previews: PreviewProvider {
static var previews: some View {
Wrapper()
}
struct Wrapper: View {
#State var offset: CGPoint = .init(x: 0, y: 50)
var body: some View {
HStack {
ScrollableView($offset, content: {
ForEach(0...100, id: \.self) { id in
Text("\(id)")
}
})
ScrollableView($offset, content: {
ForEach(0...100, id: \.self) { id in
Text("\(id)")
}
})
VStack {
Text("x: \(offset.x) y: \(offset.y)")
Button("Top", action: {
offset = .zero
})
.buttonStyle(.borderedProminent)
}
.frame(width: 200)
.padding()
}
}
}
}

How do you call a function from a subview in SwiftUI?

I have a child/subview which is a template for instances inside the parent view. This child view a is circle that can be moved around the screen by the user. The initial drag of this circle is supposed to call a function in the parent view, which appends a new instance of the child view. Basically, initially moving the circle from its starting position creates a new circle in that start position. Then when you initially move that new one, which was just created, another new circle is created at that starting position again, etc...
How do I call the addChild() function that's in ContentView from the Child view?
Thank you, I appreciate any help.
import SwiftUI
struct ContentView: View {
#State var childInstances: [Child] = [Child(stateBinding: .constant(.zero))]
#State var childInstanceData: [CGSize] = [.zero]
#State var childIndex = 0
func addChild() {
self.childInstanceData.append(.zero)
self.childInstances.append(Child(stateBinding: $childInstanceData[childIndex]))
self.childIndex += 1
}
var body: some View {
ZStack {
ForEach(childInstances.indices, id: \.self) { index in
self.childInstances[index]
}
ForEach(childInstanceData.indices, id: \.self) { index in
Text("y: \(self.childInstanceData[index].height) : x: \(self.childInstanceData[index].width)")
.offset(y: CGFloat((index * 20) - 300))
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
import SwiftUI
struct Child: View {
#Binding var stateBinding: CGSize
#State var isInitalDrag = true
#State var isOnce = true
#State var currentPosition: CGSize = .zero
#State var newPosition: CGSize = .zero
var body: some View {
Circle()
.frame(width: 50, height: 50)
.foregroundColor(.blue)
.offset(self.currentPosition)
.gesture(
DragGesture()
.onChanged { value in
if self.isInitalDrag && self.isOnce {
// Call function in ContentView here... How do I do it?
ContentView().addChild()
self.isOnce = false
}
self.currentPosition = CGSize(
width: CGFloat(value.translation.width + self.newPosition.width),
height: CGFloat(value.translation.height + self.newPosition.height)
)
self.stateBinding = self.currentPosition
}
.onEnded { value in
self.newPosition = self.currentPosition
self.isOnce = true
self.isInitalDrag = false
}
)
}
}
struct Child_Previews: PreviewProvider {
static var previews: some View {
Child(stateBinding: .constant(.zero))
}
}
Here is what I would do, I would create a function in the second view and invoke it under any circumstance, say when a button in the second view is pressed then invoke this function. And I would pass the function's callback in the main view.
Here is a code to demonstrate what I mean.
import SwiftUI
struct StackOverflow23: View {
var body: some View {
VStack {
Text("First View")
Divider()
// Note I am presenting my second view here and calling its function ".onAdd"
SecondView()
// Whenever this function is invoked inside `SecondView` then it will run the code in between these brackets.
.onAdd {
print("Run any function you want here")
}
}
}
}
struct StackOverflow23_Previews: PreviewProvider {
static var previews: some View {
StackOverflow23()
}
}
struct SecondView: View {
// Define a variable and give it default value
var onAdd = {}
var body: some View {
Button(action: {
// This button will invoke the callback stored in the variable, this can be invoked really from any other function. For example, onDrag call self.onAdd (its really up to you when to call this).
self.onAdd()
}) {
Text("Add from a second view")
}
}
// Create a function with the same name to keep things clean which returns a view (Read note 1 as why it returns view)
// It takes one argument which is a callback that will come from the main view and it will pass it down to the SecondView
func onAdd(_ callback: #escaping () -> ()) -> some View {
SecondView(onAdd: callback)
}
}
NOTE 1: The reason our onAdd function returns a view is because remember that swiftui is based on only views and every modifier returns a view itself. For example when you have a Text("test") and then add .foregroundColor(Color.white) to it, what essentially you are doing is that you are not modifying the color of the text but instead you are creating a new Text with a custom foregroundColor value.
And this is exactly what we are doing, we are creating a variable that can be initialized when calling SecondView but instead of calling it in the initializer we created it as a function modifier that will return a new instance of SecondView with a custom value to our variable.
I hope this makes sense. If you have any questions don't hesitate to ask.
And here is your code modified:
ContentView.swift
import SwiftUI
struct ContentView: View {
#State var childInstances: [Child] = [Child(stateBinding: .constant(.zero))]
#State var childInstanceData: [CGSize] = [.zero]
#State var childIndex = 0
func addChild() {
self.childInstanceData.append(.zero)
self.childInstances.append(Child(stateBinding: $childInstanceData[childIndex]))
self.childIndex += 1
}
var body: some View {
ZStack {
ForEach(childInstances.indices, id: \.self) { index in
self.childInstances[index]
.onAddChild {
self.addChild()
}
}
ForEach(childInstanceData.indices, id: \.self) { index in
Text("y: \(self.childInstanceData[index].height) : x: \(self.childInstanceData[index].width)")
.offset(y: CGFloat((index * 20) - 300))
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Child.swift
import SwiftUI
struct Child: View {
#Binding var stateBinding: CGSize
#State var isInitalDrag = true
#State var isOnce = true
#State var currentPosition: CGSize = .zero
#State var newPosition: CGSize = .zero
var onAddChild = {} // <- The variable to hold our callback
var body: some View {
Circle()
.frame(width: 50, height: 50)
.foregroundColor(.blue)
.offset(self.currentPosition)
.gesture(
DragGesture()
.onChanged { value in
if self.isInitalDrag && self.isOnce {
// Call function in ContentView here... How do I do it?
self.onAddChild() <- // Here is your solution
self.isOnce = false
}
self.currentPosition = CGSize(
width: CGFloat(value.translation.width + self.newPosition.width),
height: CGFloat(value.translation.height + self.newPosition.height)
)
self.stateBinding = self.currentPosition
}
.onEnded { value in
self.newPosition = self.currentPosition
self.isOnce = true
self.isInitalDrag = false
}
)
}
// Our function which will initialize our variable to store the callback
func onAddChild(_ callaback: #escaping () -> ()) -> some View {
Child(stateBinding: self.$stateBinding, isInitalDrag: self.isInitalDrag, isOnce: self.isOnce, currentPosition: self.currentPosition, newPosition: self.newPosition, onAddChild: callaback)
}
}
struct Child_Previews: PreviewProvider {
static var previews: some View {
Child(stateBinding: .constant(.zero))
}
}
Here's your answer within my code:
import SwiftUI
struct ContentView: View {
#State var childInstances: [Child] = []
#State var childInstanceData: [CGSize] = []
#State var childIndex = 0
func addChild() {
self.childInstanceData.append(.zero)
self.childInstances.append(Child(stateBinding: $childInstanceData[childIndex]))
self.childIndex += 1
}
var body: some View {
ZStack {
ForEach(childInstances.indices , id: \.self) { index in
self.childInstances[index]
.onAddChild {
print(self.childInstances.count)
self.addChild()
}
}
VStack {
ForEach(childInstanceData.indices, id: \.self) { index in
Text("\(index). y: \(self.childInstanceData[index].height) : x: \(self.childInstanceData[index].width)")
}
}
.offset(y: -250)
}
.onAppear {
self.addChild()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
import SwiftUI
struct Child: View {
#Binding var stateBinding: CGSize
var onAddChild = {} // <- The variable to hold our callback
#State var isInitalDrag = true
#State var isOnce = true
#State var currentPosition: CGSize = .zero
#State var newPosition: CGSize = .zero
var body: some View {
Circle()
.frame(width: 50, height: 50)
.foregroundColor(.blue)
.offset(self.currentPosition)
.gesture(
DragGesture()
.onChanged { value in
if self.isInitalDrag && self.isOnce {
// Call function in ContentView here:
self.onAddChild()
self.isOnce = false
}
self.currentPosition = CGSize(
width: CGFloat(value.translation.width + self.newPosition.width),
height: CGFloat(value.translation.height + self.newPosition.height)
)
self.stateBinding = self.currentPosition
}
.onEnded { value in
self.newPosition = self.currentPosition
self.isOnce = true
self.isInitalDrag = false
}
)
}
func onAddChild(_ callback: #escaping () -> ()) -> some View {
Child(stateBinding: self.$stateBinding, onAddChild: callback)
}
}
struct Child_Previews: PreviewProvider {
static var previews: some View {
Child(stateBinding: .constant(.zero))
}
}

In SwiftUI, how do I create a dynamic rectangle for a bar chart?

I'm trying to create a custom percentage bar chart like the one below
however, I'm unable to set the bar width programmatically, what am I doing wrong?
Setting .frame(width: UIScreen.main.bounds.width * percent, height:23) produces the following error : Ambiguous reference to member 'frame(width:height:alignment:)'
import SwiftUI
struct BarChartView : View {
#Binding var percent: Float
init(percentage: Binding<Float>){
self._percent = percentage
}
var body: some View {
ZStack {
Rectangle().fill(Color.yellow).frame(height: 30).border(Color.black, width:1)
HStack {
RoundedRectangle(cornerRadius: 5)
.fill(Color.green).frame(width: 300, height:23).padding(2)
Spacer()
}
HStack {
Text("Bar Chart View").padding (2)
Spacer()
Text("\(String(format: "%02.f", arguments: [self.percent]))%")
}
}
}
}
Is there a way to determine the width of the first rectangle in the ZStack and calc a percentage off of that. I would like this to automatically update in landscape mode too, if possible.
You could use GeometryReader to play with dimensions, but in this case I think using a shape is a much better fit:
import SwiftUI
struct BarChartView : View {
#Binding var percent: Float
init(percentage: Binding<Float>){
self._percent = percentage
}
var body: some View {
HStack {
Text("Bar Chart View").padding (5)
Spacer()
Text("\(String(format: "%02.f", arguments: [self.percent * 100]))%").padding(5)
}
.background(LeftPart(pct: CGFloat(percent)).fill(Color.green))
.background(RightPart(pct: CGFloat(percent)).fill(Color.yellow))
.padding(10)
}
struct LeftPart: Shape {
let pct: CGFloat
func path(in rect: CGRect) -> Path {
var p = Path()
p.addRoundedRect(in: CGRect(x: 0, y: 0, width: rect.size.width * pct, height: rect.size.height), cornerSize: .zero)
return p
}
}
struct RightPart: Shape {
let pct: CGFloat
func path(in rect: CGRect) -> Path {
var p = Path()
p.addRoundedRect(in: CGRect(x: rect.size.width * pct, y: 0, width: rect.size.width * (1-pct), height: rect.size.height), cornerSize: .zero)
return p
}
}
}
struct ContentView: View {
var body: some View {
BarChartView(percentage: .constant(0.75))
}
}