development30years 님의 블로그

실행 결과 미리보기 구현 목표텍스트에 대하여 글자 편집, bold, italic, underline, text color 변경 속성을 구현한다.설명 및 주요 소스 코드한 개의 item만 선택 가능하게 설계했으므로, 현재 선택된 item에서 처리할 속성을, 이미지인지 텍스트인지 구분없이 하나의 enum에서 처리할 수 있다. 그래서 enum ImageTextAttr에 brightness, contrast, bold, italic를 모두 넣고 처리한다.앞에서 언급없이 사용해 온 imageInfos 배열과 textInfos 배열, 그리고 이들을 모두 관리하는 items배열 구조는 1개의 items에서 ZoomState를 protocol로 설계해서 ImageInfo, TextInfo가 채택하게 하는 형식Conte..

실행 결과 미리보기  구현 목표이미지의  brightness, contrast 속성을 구현한다.속성값 변경은 CenterSlider를 만들어서 사용한다.설명 및 주요 소스 코드brightness 값의 범위는 -1 ~ 1이다. slider에서 값의 범위를 -100~100으로 하고 / 100하여 brightness 속성에 설정한다.contrast값의 범위는 0 ~ 2이다. slider 값의 범위를 -100~100으로 하고 /100 한 뒤, 1을 더하면 0~2 범위가 된다.CenterSlider는 중앙을 기준으로 슬라이딩하는 방식이다. 표준으로 제공되는 것은 없어서 대부분 개발자들은 인터넷을 참조해서, 하나 만들어서 사용한다. brightness, contrast 등을 동작하는게 무리가 없는 수준으로만 구현한..

구현 목표선택한 이미지나 텍스트를 삭제한다.설명 및 소스 코드선택된 이미지/텍스트가 있으면(activeId != nil) 이미지/텍스트를 배열에서 삭제한다.id를 UUID로 설정했기 때문에, imageInfos, textInfos, items 모두 id만을 비교해서 삭제하면 된다.아이콘 메뉴는 아래에 붙인다. ignoreSafeArea를 적용하되, 아래쪽의 ignoreSafeArea 영역만큼은UIApplication.shared.windows.first?.safeAreaInsets.bottom ?? 0 을 사용하여 padding 처리한다.ContentView.swiftimport SwiftUIstruct ZoomState: Identifiable { let id = UUID() var scal..

구현 목표편집할 대상을 명시하기 위하여 선택한 이미지/텍스트에 외곽선을 표시한다.최초 이미지/텍스트를 생성하면 생성된 이미지/텍스트가 자동 선택된다.설명 및 소스 코드개별 이미지와 텍스트는 자신이 선택되었는지를 판단하기 위하여, 고유 id(UUID)를 갖는다.선택은 1개만 가능하도록 한다.마지막으로 선택한 이미지/텍스트는 항상 외곽선을 표시한다.다른 이미지/텍스트를 선택할 수 있도록 canNewActive를 사용한다. 이 값은 확대/축소, 이동 작업이 끝나는 시점에 true로 활성화된다.ContentView.swiftimport SwiftUIstruct ZoomState: Identifiable { let id = UUID() var scale: CGFloat = 1.0 var offse..

구현 목표메뉴에서 이미지/텍스트 생성을 선택하면, 이미지/텍스트가 자동 생성된다.생성된 이미지/텍스트는 확대/축소, 이동이 가능하다.설명 및 소스 코드새로 만들어지는 이미지와 텍스트를 저장할 items 배열을 만든다. 이 배열은 화면에 생성되는 모든 이미지/텍스트를 순서대로 저장한다.이미지와 텍스트 각각의 정보를 저장할 ImageInfo, TextInfo 구조체를 만든다. 각 구조체는 확대/축소, 이동을 담당하는 ZoomState를 멤버변수로 갖는다. 또한, 추후 이미지 contrast, brightness, 텍스트 weight, fontName등의 정보를 추가한다.생성되는 이미지들은 imageInfos 배열에서, 텍스트들은 textInfos에서 관리한다.ContentView.swiftimport Swi..

개요이전 포스트들인 화면 범위내 이미지 확대 / 축소, 이동과 화면 범위내 텍스트 확대 / 축소, 이동을 통합한다.이미지와 텍스트 모두 공통으로 사용되는 scale, offset, gestureScale, gestureOffset, anchor를 가지고 있어서 이를 하나의 구조체로 통합한다. 구현 목표이미지와 텍스트에서 공통 사용할 ZoomState 구조체로 정의하여 단일화설명 및 소스 코드ZoomImage, ZoomText는 각각 이미지와 텍스트의 확대 / 축소, 이동 클래스이다.ZoomState 변수를 @Binding으로 받아서 수정하는 구조를 갖는다.ContentView.swiftimport SwiftUIstruct ZoomState { var scale: CGFloat = 1.0 var..

구현 목표손가락 두개로 텍스트 확대 /축소드래그로 이동컨테이너 영역 수준으로 텍스트 위치 제한설명 및 소스 코드SimultaneousGesture를 사용하여 DragGesture와 MagnifyGesture를 동시에 사용할 수 있도록 한다.GeometryReader로 이미지 컨테이너의 크기를 크기를 구한다.import SwiftUIstruct ContentView: View { @State private var offset: CGSize = .zero @State private var scale: CGFloat = 1.0 @State private var gestureOffset: CGSize = .zero @State private var gestureScale: CGFloat =..

시작에 앞서...Townket이라는 무료 광고 & 채팅 앱을 만들고 있다. 기존에는 포스트를 업로드할 때, 이미지와 몇 가지 텍스트 정보만을 업로드하는 기능으로 동작하게 했는데, 이미지와 텍스트를 추가/편집하는 기능을 넣으려고 한다.그 첫번째로 이미지 확대 / 축소, 이동부터 시작한다.구현 목표손가락 두개로 이미지 확대 / 축소드래그로 이동컨테이너 영역 수준으로 이미지 위치 제한설명 및 소스 코드SimultaneousGesture를 사용하여 DragGesture와 MagnifyGesture를 동시에 사용할 수 있도록 한다.GeometryReader로 이미지 컨테이너의 크기를 크기를 구한다.GeometryReader는 좌상단을 기준점으로 잡기 때문에, ZStack을 써서 frame(..., alignmen..