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 ~~~~ |
| 59 |
| 60 #include "SkExample.h" |
| 61 #include "SkDevice.h" |
| 62 |
| 63 class HelloTutorial : public SkExample { |
| 64 public: |
| 65 HelloTutorial(SkExampleWindow* window) |
| 66 : SkExample(window) |
| 67 { |
| 68 fName = "Tutorial"; // This is how Skia will find your example. |
| 69 |
| 70 fWindow->setupBackend(SkExampleWindow::kGPU_DeviceType); |
| 71 // Another option is the CPU backend: fWindow->setupBackend(kRaster_
DeviceType); |
| 72 } |
| 73 |
| 74 protected: |
| 75 virtual void draw(SkCanvas* canvas) SK_OVERRIDE { |
| 76 // Clear background |
| 77 canvas->drawColor(SK_ColorWHITE); |
| 78 |
| 79 SkPaint paint; |
| 80 // Draw a message with a nice black paint. |
| 81 paint.setFlags(SkPaint::kAntiAlias_Flag); |
| 82 paint.setColor(SK_ColorBLACK); |
| 83 paint.setTextSize(SkIntToScalar(20)); |
| 84 |
| 85 static const char message[] = "Hello World!"; |
| 86 |
| 87 // Translate and draw the text: |
| 88 canvas->save(); |
| 89 canvas->translate(SkIntToScalar(50), SkIntToScalar(100)); |
| 90 canvas->drawText(message, strlen(message), SkIntToScalar(0), SkIntTo
Scalar(0), paint); |
| 91 canvas->restore(); |
| 92 |
| 93 // If you ever want to do animation. Use the inval method to trigger
a redraw. |
| 94 this->fWindow->inval(NULL); |
| 95 } |
| 96 }; |
| 97 |
| 98 static SkExample* MyFactory(SkExampleWindow* window) { |
| 99 return new HelloTutorial(window); |
| 100 } |
| 101 static SkExample::Registry registry(MyFactory); |
| 102 |
| 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 * Open `gyp/experimental.gyp` and look for the `SkiaExamples` target. |
| 112 * In the 'sources' section of the SkiaExampels target, add |
| 113 `../experimental/SkiaExamples/Tutorial.cpp` to the list of sources. |
| 114 * Repeat Step 2 to update our gyp targets and build our example. |
| 115 * Run the SkiaExamples, specifying the name of our new example: `$> out/Releas
e/SkiaExamples --match Tutorial` |
| 116 |
| 117 Step 5: How to iterate through multiple examples |
| 118 ------------------------------------------------ |
| 119 |
| 120 If you did not specify an example with the --match flag, or if your match |
| 121 string matches more than one example, you can use the *n* key to iterate |
| 122 through all of the examples registered. |
| 123 |
OLD | NEW |