Start on the left side of the canvas, in order to leave enough room for the rest of the arrow you’re about to draw. Drawing the Bezier ArrowĬlick the Bezier tool on the top toolbar, as highlighted in the screenshot below:Ĭlick once on the canvas to place your first point for your shape. To make the arrows, you’ll need to use the Bezier tool, which allows you to use anchor points and handles to control the shape of the curve.
Enter RGB values of 50 50 50, as shown below: As before, you’ll need to shrink the canvas size and change the background color to something suitable for your control.Ĭlick the Canvas button at the bottom right of the main view and change the width and height to 320 and 200 pixels, as shown in the screenshot below:Ĭhange the color of the canvas by clicking the Underlay color swatch. Open a new PaintCode document and name it DynamicArrow. Without further ado, open up PaintCode to get started on your last - and coolest - dynamic UI control! Getting Started
#Paintcode 2 tutorial download
However, if you don’t have your original project, or want to jump right in and get started, then download the Part 3 Starter Project.
If you’ve already completed Part 1 or Part 2, you can use your project from that tutorial as a starting point for this tutorial.
#Paintcode 2 tutorial how to
In the process of doing this, you’ll learn how to create dynamic, resizable shapes using bezier paths. The user must match up each question with the correct answer by dragging an arrow from the question to the answer. One side of the app will have a list of questions, and the other side a list of answers. In this third and final part of the series, you’ll create an interactive quiz app.
In the second part of the series, you learned how to create your own custom progress bar design using PaintCode, and then integrate it into your app. In the first part of the series, you learned how you could use PaintCode to create beautiful resizable and recolorable buttons. PaintCode is a neat app where you can draw user interfaces like in Photoshop – but instead of generating an image, it generates Core Graphics code. Welcome to our third and final part of our PaintCode tutorial series! Learn how to create dynamic curved arrows!
0 kommentar(er)
