| 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 |