404

Создание RGBA изображения при помощи Python на Ubuntu Touch

[исходный код проекта можно скачать здесь]

Создадим новый проект в Clickable, в терминале вводим команду:

clickable create

Выбираем тип проекта Python и заполняем:
Title [App Title]: Rendering RGBA
App Name [appname]: example-RGBA

В файл Main.qml удаляем Python объект, а объект Page приводим к виду:

Page {
        anchors.fill: parent
        header: PageHeader {
            id: header
            title: i18n.tr('Rendering RGBA')
        }

        Image {
        id: image
        fillMode: Image.PreserveAspectFit
        anchors {
            top: header.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }

            Python {
                Component.onCompleted: {
                addImportPath(Qt.resolvedUrl('../src/'));
                importModule('example', function () {
                    image.source = 'image://python/image-id-passed-from-qml';
                });
                }

                onError: console.log('Python error: ' + traceback)
            }
        }
    }

Таким образом на слое Page мы создали объект Image.
Внутри этого Image был создан объект обработки кода Python, который сработает при инициализации родителя(Image) и вернет ему срендеренное изображение.

Теперь папке проекта находим каталог src и изменим example.py.

import pyotherside
import math

def render(image_id, requested_size):
    print('image_id: "{image_id}", size: {requested_size}'.format(**locals()))

    # width and height will be -1 if not set in QML
    if requested_size == (-1, -1):
        requested_size = (300, 300)

    width, height = requested_size

    # center for circle
    cx, cy = width/2, 10

    pixels = []
    for y in range(height):
        for x in range(width):
            pixels.extend(reversed([
                255, # alpha
                int(10 + 10 * ((x - y * 0.5) % 20)), # red
                20 + 10 * (y % 20), # green
                int(255 * abs(math.sin(0.3*math.sqrt((cx-x)**2 + (cy-y)**2)))) # blue
            ]))
    return bytearray(pixels), (width, height), pyotherside.format_argb32

pyotherside.set_image_provider(render)

модули math и pyotherside уже по умолчанию установлены в Ubuntu Touch.

pyothersid позволяет нашему коду создавать и возвращать QML объекты.
Таким образом render вернет нам побайтовое изображение в формате pyotherside.format_argb32.
В ходе функции мы создаем двумерный массив байтов pixels, где каждый элемент содержит 4 байта - Альфа прозрачность(0-255), значение красного(0-255), зеленого(0-255) и синего(0-255) пикселя. При помощи математический вычислений мы можем генерировать текстуры, и редактировать изображения.

Все что нам осталось, это открыть терминал в папке с проектом, подключить телефон и запустить компиляцию командой:

clickable

ubuntu_toch_python4.jpg

И на по следок еще одна функция генерации градиента:

def render(image_id, requested_size):
    print('image_id: "{image_id}", size: {requested_size}'.format(**locals()))

    # width and height will be -1 if not set in QML
    if requested_size == (-1, -1):
        requested_size = (300, 300)

    width, height = requested_size

    pixels = []
    for y in range(height):
        for x in range(width):
            pixels.extend(reversed([
                255, # alpha
                int(round(255/width*x)), # red
                int(round((255-255/width*x)*(1-y/width))), # green
                int(round(255/height*y)) # blue
            ]))
    return bytearray(pixels), (width, height), pyotherside.format_argb32
@pavelprosto