site/user/sample/hello.md

   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 create `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.  Copy 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) SK_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), SkIntToScalar(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