You can move the canvas around by clicking and dragging the title at the top of the canvas. In either case, select the first option in the list. In this tutorial choosing one over the other doesn’t make a lot of difference, but this demonstrates an easy way to create a new canvas with the same dimensions as another canvas: click on the canvas to select it, then right-click outside the canvas to create a new one. If the Stopwatch canvas wasn’t selected, you’d see the (200 x 200) Default option instead.
If you had the Stopwatch canvas selected when you right-clicked outside the window (you’d know this as the canvas would be outlined in blue rather than grey), you’d see the (250 x 250) Size of Stopwatch option. There are plenty of iOS device resolutions to choose from, but look at the top of the menu where you’ll see one of two things: either (200×200) Default, or (250×250) Size of Stopwatch: Select Add New Canvas, and you’ll see a menu pop up. Right-click anywhere outside of the current canvas in the central portion of your window. You’ll eventually place the second hand on a new canvas, but you’ll first create the hand on the old canvas so you can position it properly over the stopwatch.įirst, create the new canvas. :]Ĭreating a stopwatch hand would be the next logical step. You know what a stopwatch is without a second hand? Really inaccurate. Save your project before you move on: click File\Save or press Command-S, name your project PaintCodeTutorial and click Save. Zoom out so you can see the entire stopwatch it should look something like the following: Okay - that takes care of the main body and buttons of your stopwatch. Position the shape at X 200, Y 30, either manually or by setting the X and Y coordinates in the Inspector: Now click Union in the toolbar to combine the two rectangles into a single shape like so: Hold down Shift, and click on both the rectangle and the square to select them. Move the square so the upper right point of the square intersects the diagonal right side of the rectangle as shown below: Click on the rectangle to ensure it’s selected, then go to the Inspector and click on Transforms to expand the panel. Now you need to rotate the rectangle by -45 degrees. Now drag out another Rect, but hold down Shift to keep the aspect ratio 1:1 and drag out to a size of 10 x 10:Ĭlick the + button at the bottom right of the canvas area to see your rectangles up close you can also pan around by holding the spacebar and clicking and dragging your mouse. You should have something like the image below: Next, drag out another Rect on your Canvas that’s 30 wide and 20 - the exact position doesn’t matter right now. Your Canvas should now look like the following: Drag out a rough rectangle at the top of the circle, and modify the position and size of your Rectangle as follows: Next, go up to the Toolbar and choose Rect. In the resulting menu, change the name of your color to Base Color and the hex value to #118DDA:Ĭlick anywhere outside of the menu to close it.
This moves your object’s origin down and over a little to (15, 30) by default the origin of your object is at (0, 0).Ĭlick the Fill dropdown in the Inspector and select Add new Color…:
With the circle selected, head back to the Inspector and set both the width and height of your Oval to 220, the X position to 15 and the Y position to 30: Next, choose Oval from the Toolbar at the top of the screen:Ĭlick and drag a circle onto the canvas – the exact shape doesn’t matter as you’ll modify the values next.
#PAINTCODE SWIFT TUTORIAL CODE#
You simply create your art in PatinCode in non-Retina sizes, and the code takes care of creating the Retina-sized assets. Note: The top-left of your canvas is the master origin the locations of all object origins will be calculated from this point in pixels.
0 kommentar(er)
