1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

QtWebService の画像対応

Last updated at Posted at 2017-12-16

はじめに

昨日は @task_jp さんによる Qt の値型のクラスで使われている Implicit Sharing 技術の紹介と実装 でした。

今日は勉強会中に参加する予定だったのですが、家族一同体調がわるくてキャンセルしてしまいました。。。

QtWebService とは?

qtwebservice.io が公式サイトです。
概要は Qt Advent Calendar 2017 5日目の QtWebService の紹介 をご覧ください。

QtWebService の画像対応

これまで様々な テキスト形式 のデータを QML で記述することを目指してきた QtWebService ですが、諸事情により画像の動的生成に対応しました。

hello.qml
import QtWebService.Image 1.0

Image {
    id: root
    width: 100
    height: 100
    contentType: 'image/png'
    source: './qt-logo.png'

    Text {
        y: 70
        text: 'Hello World'
    }
}

こんな QML を書くと以下の画像が生成されます。

Hello World

注意点

QtWebService の画像の生成機能を使うためには QtGui モジュールが必要です。
QT = webservice
QT += gui

それから、QCoreApplication の代わりに QGuiApplication を使う必要があります。

また、QtQuick モジュールの Image や Text と同じ名前ではありますが、一切関係ないエレメントです。そのうち同じようなプロパティを整備する予定ですが、いまは最低限の機能しか用意していません。

なにがうれしいの?

画像を生成することができます。昔懐かしの画像のアクセスカウンターを以下のような感じで作ることも可能です。

counter.qml
import QtWebService.Image 1.0
import QtWebService.Cache 1.0
import QtQml 2.2

Image {
    id: root
    width: 100
    height: 30
    contentType: 'image/png'

    Cache { id: cache }
    Text {
        id: text
        y: 20
        x: root.width - text.width
    }

    Component.onCompleted: {
        var counter = cache.fetch('counter')
        counter = counter ? counter + 1 : 1
        cache.add('counter', counter)
        text.text = counter
    }
}

実行結果:
アクセスカウンター

なんで作ったの?

Google の Static Maps API で、地図上に画像マーカーを指定する際に、様々な画像を用意するのが面倒だったので、QtWebService で提供した画像を表示するようにしています。

地図

以下のような marker.png を用いて、

http://qtwebservice.io/examples/marker.png

以下のようなコードで画像を生成します。

marker.qml
import QtWebService.Image 1.0

Image {
    id: root
    width: 32
    height: 32
    contentType: 'image/png'
    source: './marker.png'

    Text {
        x: (root.width - width) / 2
        y: 22
        text: (new Date).getSeconds()
    }
}

これを表示すると以下のようになります。

http://qtwebservice.io/examples/marker.qml

実際に運用している(秘密の)サービスでは、画像の qml にパラメータを渡して、少し高度な画像の生成を行っています。

おわりに

Qt を使うとウェブサービスでの動的な画像の生成も簡単ですね。
アイディア次第で本当に色々な事ができるので、様々なことに活用してみてください。

明日は @argama147 さんによる「今更聞けないシグナル・スロット総整理」です。お楽しみに!

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?