4/7/2023 0 Comments Ig text editor![]() ![]() Thanks to the SDK, creating our BrushViewController boils down to creating and wiring a BrushEditController and adding its view, color and size controls to the BrushViewControllers view. These are mainly responsible for managing the interface and adjusting the model accordingly, while the ‘real’ work is being done in the background by the PhotoEditPreviewController whenever the model gets updated. This is done within the EditViewController who is also responsible for presenting the view controllers that implement the different tools, StickerViewController, BrushViewController and TextViewController. The child view controllers may manage additional view controllers themselves, but we only need to manage the topmost objects and wire their interfaces together. The user facing controls are on the left, the root window is on the right. The view hierarchy within the EditViewController. A StickerSpriteEditController above the PhotoEditPreviewControllermanages selection and manipulation of stickers.A TextSpriteEditController above the PhotoEditPreviewController that allows selection and manipulation of text sprites.A PhotoEditPreviewController that handles the internal model and all rendering, as well as the rendering canvas itself.The root view controller, an EditViewController in this case, manages a series of child view controllers: To create such a hierarchy of tools, the PhotoEditor SDK makes heavy use of an iOS pattern called view controller containment. All tools add their own interface elements to allow modifications like adding stickers, text or brush strokes to the image. This is where the image with all operations applied is rendered and any changes are shown to the user. Architecture and OverviewĪny image editing interface is naturally centered around some sort of canvas or preview. You can follow along by downloading the accompanying code. This article presents our approach by starting with a general overview and then diving into the different view controllers to look at specific implementation details. So we grabbed our own docs and headed out to create a demo in which we recreate the Instagram Stories using components from the PhotoEditor SDK. By now, this ‘Story UI’ has become a popular way of quickly designing with different elements (stickers, brush and text) rather than enhancing and styling the image only. Here, we decided to build a UI similar to Instagram’s Stories or Snapchat using our SDK. ![]() As our SDK is used in many different use cases and contexts, we like to explore what’s possible with the PhotoEditor SDK and its included components. The SDK comes with it’s own customizable UI, but customization are of course limited to a certain extent. A common question we get asked from our customers, is whether they’ll be able to create an entirely different user interface using our PhotoEditor SDK. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |