Want to learn graphics using Skia on Ubuntu [close

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 7 years ago.

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;
}

Answer 2

From the wiki on the Google Code pages: Getting Started on Linux