OLD | NEW |
| (Empty) |
1 Creating a Skia "Hello World!" | |
2 ============================== | |
3 | |
4 This tutorial will guide you through the steps to create a Hello World Desktop | |
5 application in Skia. | |
6 | |
7 Who this tutorial is for: | |
8 ------------------------- | |
9 | |
10 This will be useful to you if you want to create a window that can receive | |
11 events and to which you can draw with Skia. | |
12 | |
13 Step 1: Check out and build Skia | |
14 -------------------------------- | |
15 | |
16 Follow the instructions for: Linux, Mac OS X or Windows. The framework that we | |
17 will be using does not currently support other platforms. | |
18 | |
19 Once you have a working development environment, we can move on to the next step
. | |
20 | |
21 Step 2: Build the included HelloSkia Example | |
22 -------------------------------------------- | |
23 | |
24 We will be using the "SkiaExamples" framework. You can find it in the | |
25 experimental/SkiaExamples directory. There is an included HelloWorld example, | |
26 and we will start by building it before we go ahead and create our own. | |
27 | |
28 ### On Mac OS X | |
29 | |
30 Run `GYP_GENERATORS="ninja" ./gyp_skia` | |
31 This will generate a ninja target, and `ninja -C out/Debug SkiaExamples` will cr
eate `SkiaExamples.app` | |
32 | |
33 ### On Linux: | |
34 Run `GYP_GENERATORS="ninja" ./gyp_skia` | |
35 | |
36 Build the SkiaExamples target: | |
37 | |
38 ninja -C out/Release SkiaExamples | |
39 | |
40 The SkiaExamples binary should be in `out/Release/SkiaExamples` | |
41 | |
42 ### On Windows | |
43 | |
44 Run `./gyp_skia` | |
45 | |
46 There should be a Visual Studio project `out/gyp/SkiaExamples.vcproj` with | |
47 which you can build the SkiaExamples binary. | |
48 | |
49 ### Run the SkiaExamples. | |
50 | |
51 You should see a window open displaying rotating text and some geometry. | |
52 | |
53 Step 3: Create your own Sample | |
54 ------------------------------ | |
55 | |
56 Create a file `experimental/SkiaExamples/Tutorial.cpp` within the Skia tree. Co
py the following code: | |
57 | |
58 <!--?prettify lang=cc?--> | |
59 | |
60 ~~~~ | |
61 #include "SkExample.h" | |
62 #include "SkDevice.h" | |
63 | |
64 class HelloTutorial : public SkExample { | |
65 public: | |
66 HelloTutorial(SkExampleWindow* window) | |
67 : SkExample(window) | |
68 { | |
69 fName = "Tutorial"; // This is how Skia will find your example. | |
70 | |
71 fWindow->setupBackend(SkExampleWindow::kGPU_DeviceType); | |
72 // Another option is the CPU backend: fWindow->setupBackend(kRaster_
DeviceType); | |
73 } | |
74 | |
75 protected: | |
76 void draw(SkCanvas* canvas) override { | |
77 // Clear background | |
78 canvas->drawColor(SK_ColorWHITE); | |
79 | |
80 SkPaint paint; | |
81 // Draw a message with a nice black paint. | |
82 paint.setFlags(SkPaint::kAntiAlias_Flag); | |
83 paint.setColor(SK_ColorBLACK); | |
84 paint.setTextSize(SkIntToScalar(20)); | |
85 | |
86 static const char message[] = "Hello World!"; | |
87 | |
88 // Translate and draw the text: | |
89 canvas->save(); | |
90 canvas->translate(SkIntToScalar(50), SkIntToScalar(100)); | |
91 canvas->drawText(message, strlen(message), SkIntToScalar(0), SkIntTo
Scalar(0), paint); | |
92 canvas->restore(); | |
93 | |
94 // If you ever want to do animation. Use the inval method to trigger
a redraw. | |
95 this->fWindow->inval(NULL); | |
96 } | |
97 }; | |
98 | |
99 static SkExample* MyFactory(SkExampleWindow* window) { | |
100 return new HelloTutorial(window); | |
101 } | |
102 static SkExample::Registry registry(MyFactory); | |
103 ~~~~ | |
104 | |
105 | |
106 Step 4: Compile and run SkiaExamples with your Sample | |
107 ----------------------------------------------------- | |
108 | |
109 Here is what you have to do to compile your example. There will be | |
110 functionality to make this easier, but for now, this is what you have to do: | |
111 | |
112 * Open `gyp/experimental.gyp` and look for the `SkiaExamples` target. | |
113 | |
114 * In the 'sources' section of the SkiaExampels target, add | |
115 `../experimental/SkiaExamples/Tutorial.cpp` to the list of sources. | |
116 | |
117 * Repeat Step 2 to update our gyp targets and build our example. | |
118 | |
119 * Run the SkiaExamples, specifying the name of our new example: | |
120 | |
121 $> out/Release/SkiaExamples --match Tutorial | |
122 | |
123 Step 5: How to iterate through multiple examples | |
124 ------------------------------------------------ | |
125 | |
126 If you did not specify an example with the `--match` flag, or if your match | |
127 string matches more than one example, you can use the *n* key to iterate | |
128 through all of the examples registered. | |
129 | |
OLD | NEW |