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