aboutsummaryrefslogtreecommitdiffstats
path: root/site/user/sample/hello.md
blob: f4c83e0dde879c2de30dfb444a58a2ad4086df5f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
Creating a Skia "Hello World!"
==============================

This tutorial will guide you through the steps to create a Hello World Desktop
application in Skia.

Who this tutorial is for:
-------------------------

This will be useful to you if you want to create a window that can receive
events and to which you can draw with Skia.

Step 1: Check out and build Skia
--------------------------------

Follow the instructions for: Linux, Mac OS X or Windows. The framework that we
will be using does not currently support other platforms.

Once you have a working development environment, we can move on to the next step.

Step 2: Build the included HelloSkia Example
--------------------------------------------

We will be using the "SkiaExamples" framework. You can find it in the
experimental/SkiaExamples directory. There is an included HelloWorld example,
and we will start by building it before we go ahead and create our own.

### On Mac OS X

Run `GYP_GENERATORS="ninja" ./gyp_skia`
This will generate a ninja target, and `ninja -C out/Debug SkiaExamples` will create `SkiaExamples.app`

### On Linux:
Run `GYP_GENERATORS="ninja" ./gyp_skia`

Build the SkiaExamples target:

    ninja -C out/Release SkiaExamples

The SkiaExamples binary should be in `out/Release/SkiaExamples`

### On Windows

Run `./gyp_skia`

There should be a Visual Studio project `out/gyp/SkiaExamples.vcproj`  with
which you can build the SkiaExamples binary.

### Run the SkiaExamples.

You should see a window open displaying rotating text and some geometry.

Step 3: Create your own Sample
------------------------------

Create a file `experimental/SkiaExamples/Tutorial.cpp` within the Skia tree.  Copy the following code:

<!--?prettify lang=cc?-->

~~~~
#include "SkExample.h"
#include "SkDevice.h"

class HelloTutorial : public SkExample {
    public:
        HelloTutorial(SkExampleWindow* window)
            : SkExample(window)
        {
            fName = "Tutorial";  // This is how Skia will find your example.

            fWindow->setupBackend(SkExampleWindow::kGPU_DeviceType);
           // Another option is the CPU backend:  fWindow->setupBackend(kRaster_DeviceType);
        }

    protected:
        void draw(SkCanvas* canvas) override {
            // Clear background
            canvas->drawColor(SK_ColorWHITE);

            SkPaint paint;
            // Draw a message with a nice black paint.
            paint.setFlags(SkPaint::kAntiAlias_Flag);
            paint.setColor(SK_ColorBLACK);
            paint.setTextSize(SkIntToScalar(20));

            static const char message[] = "Hello World!";

            // Translate and draw the text:
            canvas->save();
            canvas->translate(SkIntToScalar(50), SkIntToScalar(100));
            canvas->drawText(message, strlen(message), SkIntToScalar(0), SkIntToScalar(0), paint);
            canvas->restore();

            // If you ever want to do animation. Use the inval method to trigger a redraw.
            this->fWindow->inval(NULL);
        }
};

static SkExample* MyFactory(SkExampleWindow* window) {
    return new HelloTutorial(window);
}
static SkExample::Registry registry(MyFactory);
~~~~


Step 4: Compile and run SkiaExamples with your Sample
-----------------------------------------------------

Here is what you have to do to compile your example. There will be
functionality to make this easier, but for now, this is what you have to do:

*   Open `gyp/experimental.gyp` and look for the `SkiaExamples` target.

*   In the 'sources' section of the SkiaExampels target, add
    `../experimental/SkiaExamples/Tutorial.cpp` to the list of sources.

*   Repeat Step 2 to update our gyp targets and build our example.

*   Run the SkiaExamples, specifying the name of our new example:

        $> out/Release/SkiaExamples --match Tutorial

Step 5: How to iterate through multiple examples
------------------------------------------------

If you did not specify an example with the `--match` flag, or if your match
string matches more than one example, you can use the *n* key to iterate
through all of the examples registered.