| Index: site/user/sample/hello.md
|
| diff --git a/site/user/sample/hello.md b/site/user/sample/hello.md
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..324ff6b240cbd9b31aa4375614769a848f57aa40
|
| --- /dev/null
|
| +++ b/site/user/sample/hello.md
|
| @@ -0,0 +1,123 @@
|
| +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:
|
| +
|
| +~~~~
|
| +
|
| +#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:
|
| + virtual void draw(SkCanvas* canvas) SK_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.
|
| +
|
|
|