Canvas2D QML Type

JavaScript を使用して描画できる 2D キャンバス アイテムを提供します。詳細...

このタイプはテクノロジープレビュー段階にあり、変更される可能性があります。

• 継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

• available : bool
• context : object
• contextType : string

信号

• imageLoaded()
• paint(rect region)
• painted()

方法

• void cancelRequestAnimationFrame(int handle)
• object getContext(string contextId, ... args)
• bool isImageError(url image)
• bool isImageLoaded(url image)
• bool isImageLoading(url image)
• void loadImage(url image, size sourceSize)
• void markDirty()
• int requestAnimationFrame(callback)
• void requestPaint()
• void unloadImage(url image)

詳細説明

Canvas2D アイテムを使用すると、直線や曲線、単純な図形や複雑な図形、グラフ、および参照されたグラフィック画像を描画できます。また、テキスト、色、グラデーション、パターンを追加することも可能です。

Canvasへのレンダリングは、Canvas2DContext オブジェクトを使用して行われ、通常はpaint シグナルの結果として実行されます。

Canvas2Dアイテムの描画領域を定義するには、width プロパティとheight プロパティを設定します。たとえば、次のコードは、高さ100ピクセル、幅200ピクセルの描画領域を持つCanvas2Dアイテムを作成します。

import QtCanvas2D

Canvas2D {
    id: mycanvas
    width: 100
    height: 200
    onPaint: {
        var ctx = getContext("2d");
        ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
        ctx.fillRect(0, 0, width, height);
    }
}

既存の HTML5 Canvas アプリケーションを移植するためのヒント

CanvasアイテムはHTML5のようなAPIを提供していますが、HTML5 CanvasアプリケーションをCanvasアイテム上で実行するには、以下の修正が必要です：

• すべての DOM API 呼び出しを、QML プロパティバインディングまたは Canvas アイテムのメソッドに置き換えてください。
• すべての HTML イベントハンドラを `MouseArea ` アイテムに置き換えます。
• setInterval/setTimeout関数の呼び出しを、FrameAnimation アイテムまたはrequestAnimationFrame()の使用に変更してください。
• 描画コードをonPaint ハンドラ内に配置し、markDirty()またはrequestPaint()メソッドを呼び出すことで描画を実行してください。
• 画像を描画するには、Canvas のloadImage() メソッドを呼び出して画像を読み込み、onImageLoaded ハンドラ内で描画を要求します。

Canvas2DContext 、QCanvasPainterItem 、およびQCanvasPainterも参照してください 。

プロパティのドキュメント

available : bool

Canvasが操作対象となる描画コンテキストを提供できる状態であることを示します。

context : object

アクティブな描画コンテキストを保持します。

キャンバスが準備完了状態で、getContext() の呼び出しが正常に完了しているか、contextType プロパティがサポートされているコンテキストタイプで設定されている場合、このプロパティには現在の描画コンテキストが格納されます。それ以外の場合は null になります。

contextType : string

使用する描画コンテキストの種類。

このプロパティには、アクティブなコンテキストタイプの名前が設定されます。

明示的に設定された場合、キャンバスは利用可能になった後、指定されたタイプのコンテキストを作成しようとします。

タイプ名は、getContext() の呼び出しで使用されるものと同じです。2D キャンバスの場合、値は「2d」になります。

getContext() およびavailableも参照してください 。

Signal ドキュメント

imageLoaded()

このシグナルは、画像が読み込まれたときに発火します。

loadImage()も参照してください 。

paint(rect region)

このシグナルは、region の描画が必要な際に発火します。コンテキストがアクティブな場合は、contextプロパティからそのコンテキストを参照できます。

このシグナルは、markDirty()、requestPaint()、または現在のキャンバスウィンドウの変更によってトリガーされる可能性があります。

painted()

このシグナルは、すべてのコンテキスト描画コマンドが実行され、Canvas のレンダリングが完了した後に発火します。

メソッドのドキュメント

void cancelRequestAnimationFrame(int handle)

この関数は、handle で参照されているアニメーションコールバックをキャンセルします。

object getContext(string contextId, ... args)

描画コンテキストを返します。コンテキストが利用できない場合は、null を返します。

contextId パラメータは、必要なコンテキストを指定します。Canvas2D 項目は、必要な描画モードを実装するコンテキストを返します。getContext の最初の呼び出し後、同じ contextId を使用して getContext を再度呼び出すと、同じコンテキストオブジェクトが返されます。追加の引数（args ）は、現時点では無視されます。

コンテキストのタイプがサポートされていない場合、またはキャンバスに対して以前に異なる互換性のないコンテキストタイプの提供が要求されていた場合、null が返されます。

Canvas2D 2Dコンテキストのみをサポートしています。

bool isImageError(url image)

image の読み込みに失敗した場合はtrue を返し、それ以外の場合はfalse を返します。

loadImage()も参照してください 。

bool isImageLoaded(url image)

image が正常に読み込まれ、使用可能な状態になっている場合、true を返します。

loadImage()も参照してください 。

bool isImageLoading(url image)

image が現在読み込まれている場合、trueを返します。

loadImage()も参照してください 。

void loadImage(url image, size sourceSize = undefined)

指定されたimage を非同期で読み込みます。

画像の準備が完了すると、imageLoaded() シグナルが発信されます。読み込まれた画像は、unloadImage() メソッドを使用してアンロードできます。

sourceSize が指定されている場合、読み込み時に画像はそのサイズにスケーリングされます。これは、スケーラブルな（ベクター）画像（例：SVG）を意図した表示サイズで読み込む際に役立ちます。

関連項目： unloadImage()、imageLoaded()、isImageLoaded()、Context2D::createImageData()、Context2D::drawImage()。

void markDirty()

キャンバスを「汚れた」状態としてマークします。これにより、paint シグナルが発生します。

「 paint 」および「requestPaint()」も参照してください 。

int requestAnimationFrame(callback)

この関数は、Qt Quick シーンを構成する前にcallback を呼び出すようスケジュールします。

void requestPaint()

表示領域全体を再描画するように要求します。

markDirty()も参照してください 。

void unloadImage(url image)

image をアンロードします。

一度アンロードされた画像は、再度ロードされない限り、キャンバスコンテキストによって描画されることはありません。

loadImage()、imageLoaded()、isImageLoaded()、Context2D::createImageData()、およびContext2D::drawImageも参照してください 。