![]() 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. You simply create your art in PatinCode in non-Retina sizes, and the code takes care of creating the Retina-sized assets. If your delegate implements the drawLayer(_:, inContext:) (Objective-C: drawLayer:inContext:) method, CoreAnimation provides the context and you just need to call your drawing method from StyleKit (don't forget to call UIGraphicsPushContext(context) and UIGraphicsPopContext() before and after calling StyleKit drawing method).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. If your delegate implements the displayLayer: method, you are responsible for creating a bitmap and assigning it to the layer's contents property. You can use a delegate object to provide and update layer content when needed. How can I use the drawing code generated by PaintCode with a CALayer? CALayer's delegate
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |