2018年3月26日

tint.qml 

tint.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12

Window {
    visible: true

    minimumWidth: topLayout.implicitWidth
    minimumHeight: topLayout.implicitHeight

    color: "white"

    ColumnLayout {
        id: topLayout

        anchors.fill: parent

        spacing: 14

        Item { height: 8 }

        RowLayout {
            Layout.leftMargin: 20
            Layout.rightMargin: 20

            spacing: 20

            ColorSampler {
                id: baseColor

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignCenter

                name: "base"
                color: "#f0ffff00"
            }

            ColorSampler {
                id: tintColor

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignCenter

                name: "tint"
                color: Qt.rgba(0.5, 1.0, 1.0, tintAlphaSlider.value)
            }

            ColorSampler {
                id: resultColor

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignCenter

                name: "result"
                color: Qt.tint(baseColor.color, tintColor.color)
            }
        }

        Slider {
            id: tintAlphaSlider

            Layout.fillWidth: true
            Layout.leftMargin: 40
            Layout.rightMargin: 40

            value: 0.4
        }

        Item { height: 8 }
    }
}

ColorSampler.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
import "utils.js" as Utils

Item {
    id: root

    property string name
    property alias color: colorRect.color

    implicitWidth: 100
    implicitHeight: 100

    Rectangle {
        id: colorRect

        anchors.fill: parent

        border.color: "darkgrey"
        radius: 4

        Text {
            anchors.verticalCenter: parent.verticalCenter

            leftPadding: 14
            text: `${name}: \n${Utils.colorName(parent.color)}`
        }
    }
}

スライダーでアルファ値を変化させると色合いがどのように付くかがわかる。

tint.qml の実行結果

参照コード

on 0 件のコメント:

Qt

モジュール

QtQml 2.3

プロパティー

application: QtObject = QQuickApplication()
inputMethod: QtObject = QInputMethod()
platform: QtObject = QQmlPlatform()
styleHints: QtObject = QStyleHints()

関数

string atob(Object encodedData)
QQmlBindingFunction binding(FunctionObject function)
string btoa(Object data)
void callLater(FunctionObject function, argument1, argument2, ...)
void callLater(FunctionObject function)
bool colorEqual(color|string lhs, color|string rhs)
Component createComponent(string url, Component.CompilationMode mode, Object parent)
QtObject createQmlObject(string qml, Object parent, string filepath)
color darker(color|string baseColor, real factor)
void exit(int retCode)
font font(Object fontSpecifier)
QmlSequence<string> fontFamilies()
string formatDate(datetime date, string|Number format)
string formatDateTime(datetime dateTime, string|Number format)
string formatTime(datetime time, string|Number format)
color hsla(double hue, double saturation, double lightness, double alpha)
color hsva(double hue, double saturation, double value, double alpha)
Object include(string url, FunctionObject callback)
bool isQtObject(Object object)
color lighter(color|string baseColor, real factor)
Locale locale(string name)
Matrix4x4 matrix4x4(real m11, real m12, real m13, real m14, real m21, real m22, real m23, real m24, real m31, real m32, real m33, real m34, real m41, real m42, real m43, real m44)
Matrix4x4 matrix4x4(Object jsarray)
string md5(data)
bool openUrlExternally(url target)
point point(double x, double y)
quaternion quaternion(real scalar, real x, real y, real z)
void quit()
rect rect(double x, double y, double width, double height)
url resolvedUrl(url url)
color rgba(double red, double green, double blue, double alpha = 1.0)
size size(double width, double height)
color tint(color|string baseColor, color|string tintColor)
vector2d vector2d(float x, float y)
vector3d vector3d(float x, float y, float z)
vector4d vector4d(float x, float y, float z, float w)

列挙

省略

説明


Qt は大域オブジェクトで、プロパティー、関数、列挙、定数が定義されている。Qt プリフィックスを付けて Qt.rgba(141/255, 192/255, 48/255) のようにして使う。参考情報のリファレンスにはプリフィックスを付けないものも混ざっていて別に分けた。

プロパティーの説明

application: QtObject

参照すると QQuickApplication のインスタンスが返る。

inputMethod: QtObject

参照すると QInputMethod のインスタンスが返る。

platform: QtObject

参照すると QQmlPlatform のインスタンスが返る。

styleHints: QtOject

参照すると QStyleHints のインスタンスが返る。

以降のプロパティーがある。
cursorFlashTime: int = 1000 readonly final
カーソル点滅間隔。
fontSmoothingGamma: real = 2 readonly constant final
keyboardAutoRepeatRate:  int = 30 readonly constant final
keyboardInputInterval: int = 400 readonly final
mouseQuickSelectionThreshold: int = 10 final
mouseDoubleClickInterval: int = 400 readonly final
mousePressAndHoldInterval: int = 800 readonly final
passwordMaskCharacter: QChar = • readonly constant final
passwordMaskDelay: int = 0 readonly final
setFocusOnTouchRelease: bool = false readonly constant final
showIsFullScreen: bool = false readonly constant final
showIsMaximized: bool = false readlonly constant final
showShortcutsInContextMenus: bool = false readonly constant final
singleClickActivation: bool = false readonly constant final
startDragDistance: int = 10 readonly constant final
ドラグ開始移動量。
startDragTime: int = 500 readonly final
startDragVelocity: int = 0 readonly constant final
tabFocusBehavior: Qt::TabFocusBehavior = Qt::TabFocusAllControls readonly final
useHoverEffects: bool = true final
useRtlExtensions: bool = false readonly constant final
wheelScrollLines: int = 3 readonly final
以降の通知シグナルがあり、connect() は利用できるがシグナルハンドラーを利用できるようになっていない。

void cursorFlashTimeChanged(int cursorFlashTime)
void keyboardInputIntervalChanged(int keyboardInputInterval)
void mouseDoubleClickIntervalChanged(int mouseDoubleClickInterval)
void mousePressAndHoldIntervalChanged(int mousePressAndHoldInterval)
void mouseQuickSelectionThresholdChanged(int threshold)
void startDragDistanceChanged(int startDragDistance)
void startDragTimeChanged(int startDragTime)
void tabFocusBehaviorChanged(Qt::TabFocusBehavior tabFocusBehavior)
void useHoverEffectsChanged(bool useHoverEffects)
void wheelScrollLinesChanged(int scrollLines)

関数の説明


JavaScript 関数として実装されている。リファレンスに記載されている戻り値や仮引数の型通りに扱われているとは限らない。型が間違っているものもある。実際の扱いに合わせて記述している。

string atob(Object encodedData)

encodedData に対して toString() を呼び出し、その Latin1 バイト列を Base64 でデコードした文字列を返す。
atob.qml:

import QtQml 2.8

QtObject {
    property var array: [1, 2, 3]

    Component.onCompleted: {
        var data;
        var encoded;

        data = "123";
        encoded = Qt.btoa(data);
        print(data, encoded);
        console.assert(data.toString() == Qt.atob(encoded));

        data = 123;
        encoded = Qt.btoa(data);
        print(data, encoded);
        console.assert(data.toString() == Qt.atob(encoded));

        data = array;
        encoded = Qt.btoa(array);
        print(data, encoded);
        console.assert(data.toString() == Qt.atob(encoded));

        Qt.quit();
    }
}
実行結果は以下のようになる。 
$ qml atob.qml
qml: 123 MTIz
qml: 123 MTIz
qml: [1,2,3] MSwyLDM=
$

QQmlBindingFunction binding(FunctionObject function)

string btoa(Object data)

data に対して toString() を呼び出し、その UTF-8 バイト列を Base64 でエンコードした文字列を返す。

void callLater(FunctionObject function, argument1, argument2, ...)

void callLater(FunctionObject function)

bool colorEqual(color|string lhs, color|string rhs)

Component createComponent(string url, Component.CompilationMode mode, Object parent)

QtObject createQmlObject(string qml, Object parent, string filepath)

color darker(color|string baseColor, real factor)

void exit(int retCode)

font font(Object fontSpecifier)

QmlSequence<string> fontFamilies()

string formatDate(datetime date, string|Number format)

string formatDateTime(datetime dateTime, string|Number format)

string formatTime(datetime time, string|Number format)

color hsla(double hue, double saturation, double lightness, double alpha)

color hsva(double hue, double saturation, double value, double alpha)

Object include(string url, FunctionObject callback)

bool isQtObject(Object object)

object が QtObject を継承したオブジェクトならば true を返し、それ以外の場合には false を返す。
isqtobject.qml:

import QtQuick 2.10

QtObject {
    property var qtObject: QtObject {}
    property var rectangle: Rectangle {}
    property var jsObject: Object({ family: "Times", pointSize: 24 })

    function func() {}

    Component.onCompleted: {
        print("qtObject:", Qt.isQtObject(qtObject));
        print("rectangle:", Qt.isQtObject(rectangle));
        print("jsObject:", Qt.isQtObject(jsObject));
        print("Qt.font(jsObject):", Qt.isQtObject(Qt.font(jsObject)));
        print("func:", Qt.isQtObject(func));

        Qt.quit();
    }
}
実行結果は以下のようになる。 
$ qml isqtobject.qml
qml: qtObject: true
qml: rectangle: true
qml: jsObject: false
qml: Qt.font(jsObject): false
qml: func: false
$

color lighter(color|string baseColor, real factor)

Locale locale(string name)

Matrix4x4 matrix4x4(real m11, real m12, real m13, real m14, real m21, real m22, real m23, real m24, real m31, real m32, real m33, real m34, real m41, real m42, real m43, real m44)

Matrix4x4 matrix4x4(Object jsarray)

string md5(data)

bool openUrlExternally(url target)

point point(int x, int y)

quaternion quaternion(real scalar, real x, real y, real z)

void quit()

rect rect(int x,  int y, int width, int height)

url resolvedUrl(url url)

color rgba(double red, double green, double blue, double alpha)

size size(int width, int height)

color tint(color|string baseColor, color|string tintColor)

以下のように tintColor のアルファ値 a を tintColor と baseColor に乗じて色合いを付ける。
r' = a*tintColor.r + (1 - a)*baseColor.r
g' = a*tintColor.g + (1 - a)*baseColor.g
b' = a*tintColor.b + (1 - a)*baseColor.b
a' = a + (1 - a)*baseColor.a
サンプルコード tint.qml を参照。

vector2d vector2d(real x, real y)

vector3d vector3d(real x, real y, real z)

vector4d vector4d(real x, real  y, real z, real w)

列挙の説明


多くの列挙がある。列挙値の総数は Qt 5.10 で 1099、Qt 5.11 で 1131、Qt 5.12 で 1132。ただし Qt.red などのように QML では使えないものも含まれる。

注意


用意されている 4 つのプロパティーに代入できるがエラーにはならず、プロパティーを参照すると同一インスタンスが返る。

新たにプロパティーや JavaScript 関数を定義してグローバルに使えてしまう。

問題


関数はリファレンスに記載されている戻り値や仮引数の型通りに扱われているとは限らず型が間違っているものもある。上記の説明では実際の扱いに合わせている。例えば、 Qt.point()、Qt.size()、Qt.rect() の仮引数の型が int とリファレンスに書かれているが実際には double になっている。

QStyleHints のリファレンスにプロパティーは読み込み専用と書かれているが useHoverEffects と mouseQuickSelectionThreshold  は読み書き可能になっている。

参考情報のリファレンスに以下の関数が書かれているが存在しない。
qsTrIdNoOp()
qsTrNoOp()
qsTranslateNoOp()
それぞれ以下の関数が正しい。また、これらの大域関数は Qt プリフィックスを付けないで使う。
QT_TRID_NOOP()
QT_TR_NOOP()
QT_TRANSLATE_NOOP()
リファレンスに以下の関数が書かれている。これらの大域関数は Qt プリフィックスを付けないで使う。
qsTr()
qsTrId()
qsTranslate()

参考情報

Qt QML Type
on 0 件のコメント:
登録: 投稿 (Atom)