Want to learn graphics using Skia on Ubuntu

Question

I want to learn graphics programming, and I want to use Skia as the library. How do I begin with it on Ubuntu?

Answer 1

Use the r1236 version. Newer versions of skia have issues on Linux.

svn checkout http://skia.googlecode.com/svn/trunk -r1236

// New URL: svn checkout http://skia.googlecode.com/svn/trunk_no_commit -r1236

cd trunk

Skia has font paths hard coded, so you want to change that.

Edit src/ports/SkFontHost_linux.cpp

Search "SK_FONT_FILE_PREFIX"

Change "/usr/share/fonts/truetype/msttcorefonts/" to "/usr/share/fonts/TTF/"

./gyp/gyp_skia

make

You should now have libskia.a.

#include "SkCanvas.h"
#include "SkGraphics.h"
#include "SkImageEncoder.h"
#include "SkString.h"
#include "SkTemplates.h"
#include "SkTypeface.h"

// g++ main.cpp -Wl,-rpath,./ -L. -lskia -Iinclude/core -Iinclude/config -Iinclude/images -lpthread -lfreetype -lpng -o main

int main (int argc, char * const argv[]) {

    //
    SkAutoGraphics ag;

    //Output filename
    SkString path("skhello.png");

    //Set Text To Draw
    SkString text("Hydra v0.0.1a");

    SkPaint paint;

    //Set Text ARGB Color
    paint.setARGB(255, 255, 255, 255);

    //Turn AntiAliasing On
    paint.setAntiAlias(true);
    paint.setLCDRenderText(true);
    paint.setTypeface(SkTypeface::CreateFromName("sans-serif", SkTypeface::kNormal));

    //Set Text Size
    paint.setTextSize(SkIntToScalar(40));

    //Set Image Width & Height
    int width = 500;
    int height = 600;

    SkBitmap bitmap;
    bitmap.setConfig(SkBitmap::kARGB_8888_Config, width, height);
    bitmap.allocPixels();

    //Create Canvas
    SkCanvas canvas(bitmap);
    canvas.drawARGB(255, 25, 25, 25);

    //Text X, Y Position Varibles
    int x = 80;
    int y = 60;

    canvas.drawText(text.c_str(), text.size(), x, y, paint);

    //Set Style and Stroke Width
    paint.setStyle(SkPaint::kStroke_Style);
    paint.setStrokeWidth(3);

    //Draw A Rectangle
    SkRect rect;
    paint.setARGB(255, 255, 255, 255);
    //Left, Top, Right, Bottom
    rect.set(50, 100, 200, 200);
    canvas.drawRoundRect(rect, 20, 20, paint);

    canvas.drawOval(rect, paint);

    //Draw A Line
    canvas.drawLine(10, 300, 300, 300, paint);

    //Draw Circle (X, Y, Size, Paint)
    canvas.drawCircle(100, 400, 50, paint);

    //Same Image  (file, bitmap, image_type, quality)
    SkImageEncoder::EncodeFile(path.c_str(), bitmap, SkImageEncoder::kPNG_Type, 0);

    return 0;
}

Here is an SFML2 and Skia example:

#include <SFML/Graphics.hpp>
#include "SkCanvas.h"
#include "SkGraphics.h"
#include "SkImageEncoder.h"
#include "SkString.h"
#include "SkTemplates.h"
#include "SkTypeface.h"

#include <iostream>

// g++ main.cpp -Wl,-rpath,./ -L. -lskia -Iinclude/core -Iinclude/config -Iinclude/images -lpthread -lfreetype -lpng -lsfml-window -lsfml-graphics -lsfml-system

using namespace std;

int main(int argc, char **argv) {

    int width = 800;
    int height = 600;

    // Create the main window
    sf::RenderWindow window(sf::VideoMode(width, height), "SFML window");
    sf::Image image;

    SkAutoGraphics ag;

    //Set Text To Draw
    SkString text("Hydra Skia v0.0.1a");

    SkPaint paint;

    //Set Text ARGB Color
    paint.setARGB(255, 255, 255, 255);

    //Turn AntiAliasing On
    paint.setAntiAlias(true);
    paint.setLCDRenderText(true);
    paint.setTypeface(SkTypeface::CreateFromName("sans-serif", SkTypeface::kNormal));

    //Set Text Size
    paint.setTextSize(SkIntToScalar(20));

    SkBitmap bitmap;
    bitmap.setConfig(SkBitmap::kARGB_8888_Config, width / 2, height);
    bitmap.allocPixels();

    //Create Canvas
    SkCanvas canvas(bitmap);
    canvas.drawARGB(100, 25, 25, 25);

    //Text X, Y Position Varibles
    int x = 80;
    int y = 60;

    canvas.drawText(text.c_str(), text.size(), x, y, paint);

    //Set Style and Stroke Width
    paint.setStyle(SkPaint::kStroke_Style);
    paint.setStrokeWidth(3);

    //Draw A Rectangle
    SkRect rect;
    paint.setARGB(255, 0, 0, 0);
    //Left, Top, Right, Bottom
    rect.set(50, 100, 200, 200);
    canvas.drawRoundRect(rect, 20, 20, paint);

    canvas.drawOval(rect, paint);

    //Draw A Line
    canvas.drawLine(10, 300, 300, 300, paint);

    //Draw Circle (X, Y, Size, Paint)
    canvas.drawCircle(100, 400, 50, paint);


    image.Create(bitmap.width(), bitmap.height(), reinterpret_cast<const sf::Uint8*>(bitmap.getPixels()));

    // Load a sprite to display
    sf::Texture texture;
    if (!texture.LoadFromImage(image))
            return EXIT_FAILURE;

    sf::Sprite sprite(texture);
    //sprite.SetPosition(100, 100);
    //sprite.Resize(400, 400);

    // Load a sprite to display
    sf::Texture tex;
    if (!tex.LoadFromFile("background.jpg"))
           return EXIT_FAILURE;
    sf::Sprite texs(tex);


    // Start the game loop
    while (window.IsOpened())
    {
        // Process events
        sf::Event event;
        while (window.PollEvent(event))
        {
            // Close window : exit
            if (event.Type == sf::Event::Closed)
                window.Close();
        }

        // Clear screen
        window.Clear();

        window.Draw(texs);
        window.Draw(sprite);

        // Update the window
        window.Display();
    }

    return EXIT_SUCCESS;
}