Context2D QML Type

Canvas アイテム上の図形に 2D コンテキストを提供します。詳細...

• 継承されたメンバを含む、すべてのメンバのリスト

プロパティ

• canvas : QtQuick::Canvas
• fillRule : enumeration
• fillStyle : variant
• font : string
• globalAlpha : real
• globalCompositeOperation : string
• lineCap : string
• lineDashOffset : real (since QtQuick 2.11)
• lineJoin : string
• lineWidth : real
• miterLimit : real
• shadowBlur : real
• shadowColor : string
• shadowOffsetX : real
• shadowOffsetY : real
• strokeStyle : variant
• textAlign : string
• textBaseline : string

方法

• object arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)
• object arcTo(real x1, real y1, real x2, real y2, real radius)
• object beginPath()
• object bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)
• object clearRect(real x, real y, real w, real h)
• object clip()
• object closePath()
• object createConicalGradient(real x, real y, real angle)
• CanvasImageData createImageData(CanvasImageData imageData)
• CanvasImageData createImageData(Url imageUrl)
• CanvasImageData createImageData(real sw, real sh)
• object createLinearGradient(real x0, real y0, real x1, real y1)
• variant createPattern(Image image, string repetition)
• variant createPattern(color color, enumeration patternMode)
• object createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)
• void drawImage(variant image, real dx, real dy)
• void drawImage(variant image, real dx, real dy, real dw, real dh)
• void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)
• object ellipse(real x, real y, real w, real h)
• object fill()
• object fillRect(real x, real y, real w, real h)
• object fillText(text, x, y)
• CanvasImageData getImageData(real x, real y, real w, real h)
• array getLineDash() (since QtQuick 2.11)
• object isPointInPath(real x, real y)
• object lineTo(real x, real y)
• object measureText(text)
• object moveTo(real x, real y)
• object putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)
• object quadraticCurveTo(real cpx, real cpy, real x, real y)
• object rect(real x, real y, real w, real h)
• object reset()
• object resetTransform()
• object restore()
• object rotate(real angle)
• object roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)
• object save()
• object scale(real x, real y)
• void setLineDash(array pattern) (since QtQuick 2.11)
• object setTransform(real a, real b, real c, real d, real e, real f)
• object shear(real sh, real sv)
• object stroke()
• object strokeRect(real x, real y, real w, real h)
• object strokeText(text, x, y)
• object text(string text, real x, real y)
• object transform(real a, real b, real c, real d, real e, real f)
• object translate(real x, real y)

詳細説明

Context2Dオブジェクトは、Canvas itemのgetContext() メソッドで生成できる：

Canvas {
  id:canvas
  onPaint:{
     var ctx = canvas.getContext('2d');
     //...
  }
}

Context2D API は、同じW3C Canvas 2D Context API 標準を実装し、いくつかの拡張機能を持つ。

Context2D API は、Canvas アイテムに描画するために必要なメソッドと属性を定義するレンダリングコンテキストを提供します。以下では、canvas のレンダリングコンテキストをcontext 変数に代入します：

var context = mycanvas.getContext("2d")

Context2D API は、下図に示すように、原点 (0,0) が左上隅にある座標系としてキャンバスをレンダリングします。座標は、x 軸に沿って左から右へ、y 軸に沿ってキャンバスの上から下へ増加します。

プロパティの説明

canvas : QtQuick::Canvas

コンテキストがペイントするキャンバスアイテムを保持します。

このプロパティは読み取り専用です。

fillRule : enumeration

図形の塗りつぶしに使用される現在の塗りつぶし規則を保持します。以下の塗りつぶしルールがサポートされています：

fillStyleも参照してください 。

fillStyle : variant

図形の塗りつぶしに使用される現在のスタイルを保持します。スタイルには、CSS カラーを含む文字列、CanvasGradient または CanvasPattern オブジェクトを指定できます。無効な値は無視されます。このプロパティは、いくつかの色構文を受け付けます：

• 'rgb(red, green, blue)' - 例えば、'rgb(255, 100, 55)' または 'rgb(100%, 70%, 30%)' です。
• 'rgba(赤, 緑, 青, アルファ)' - 例: 'rgb(255, 100, 55, 1.0)' または 'rgb(100%, 70%, 30%, 0.5)'.
• 'hsl(色相、彩度、明度)'
• 'hsla(色相、彩度、明度、アルファ)'
• '#RRGGBB' - 例: '#00FFCC'
• Qt.rgba(red, green, blue, alpha) - 例えば：Qt.rgba(0.3, 0.7, 1, 1.0)

fillStyle 、strokeStyle がループ内で何度も代入される場合は、最後の Qt.rgba() 構文を選択する必要があります。これは、すでに有効なQColor 値であるため、毎回解析する必要がなく、パフォーマンスが最も優れているからです。

デフォルト値は '#000000' です。

createLinearGradient(),createRadialGradient(),createPattern(),strokeStyleも参照 。

font : string

現在のフォント設定を保持する。

w3C 2d context standard for fontのサブセットをサポートしています：

• font-style (optional): normal | italic | oblique。
• font-variant (オプション): normal | small-caps
• font-weight (オプション): 通常 | 太字 | 1 ... 1000
• font-size：Npx | Npt (N は正の数)
• font-family：http://www.w3.org/TR/CSS2/fonts.html#propdef-font-familyを参照。

デフォルトのフォント値は "10px sans-serif "です。

globalAlpha : real

レンダリング操作に適用される現在のアルファ値を保持します。こ の値は、0.0 （完全透過）か ら1.0 （完全不透明） ま での範囲内にあ る 必要があ り ます。デフ ォル ト 値は1.0 です。

globalCompositeOperation : string

現在のコンポジション操作を保持する。許可される操作は以下の通り：

W3C 標準に従っ て、 必須モー ド 以外の拡張合成モー ド は 「vendorName-operationName」 文法 と し て提供 さ れます。 例 ：QPainter::CompositionMode_Exclusion は 「qt-exclusion」 と し て提供 さ れます。

lineCap : string

現在のラインキャップのスタイルを保持します。可能な行頭スタイルは以下の通り：

それ以外の値は無視される。

lineDashOffset : real [since QtQuick 2.11]

現在の行ダ ッ シ ュ オ フ セ ッ ト を保持。デフォルトの行ダッシュオフセット値は0 です。

このプロパティは QtQuick 2.11 で導入されました。

getLineDash() およびsetLineDash()も参照してください 。

lineJoin : string

現在の行結合スタイルを保持します。結合は、連続する2つの行が共有するサブパスの任意の点に存在する。サブパスが閉じている場合、サブパスの最初と最後の行を結ぶ最初の点（最後の点と同じ）にも結合が存在します。

可能なラインジョインスタイルは以下の通り：

その他の値は無視 さ れます。

lineWidth : real

現在の線幅を保持する。0より大きい有限値でない値は無視される。

miterLimit : real

現在のマイターリミットの比率を保持する。デフォルトのマイターリミット値は 10.0 です。

shadowBlur : real

影に適用されるぼかしの現在のレベルを保持する。

shadowColor : string

現在の影の色を保持します。

shadowOffsetX : real

現在の影のオフセットを正の水平距離で保持します。

shadowOffsetYも参照 。

shadowOffsetY : real

現在の影のオフセットを正の垂直距離で保持します。

shadowOffsetXも参照 。

strokeStyle : variant

図形の周りの線に使用する現在の色またはスタイルを保持します。スタイルには、CSS カラーを含む文字列、CanvasGradient または CanvasPattern オブジェクトを指定できます。無効な値は無視されます。

デフォルト値は '#000000' です。

createLinearGradient(),createRadialGradient(),createPattern(),fillStyleも参照 。

textAlign : string

現在のテキスト配置設定を保持する。指定可能な値は以下の通り：

それ以外の値は無視 さ れます。

textBaseline : string

現在のベースラインアライメント設定を保持する。設定可能な値は以下の通り：

その他の値は無視されます。デフォルト値は "alphabetic" です。

メソッドのドキュメント

object arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)

現在のサブパスに、点 (x,y) を中心とし、半径をradius とする円の円周上にある円弧を追加する。

startAngle とendAngle はどちらも x 軸からラジアン単位で測定される。

上図の各円弧はすべて時計回りに描かれているため、anticlockwise パラメータはfalse となる。

arc() についてはarcTo およびW3C の 2D Context Standardも参照のこと 。

object arcTo(real x1, real y1, real x2, real y2, real radius)

指定された制御点と半径を持つ円弧を現在のサブパスに追加し、前の点と直線で結ぶ。円弧を描くには、直線を作るのと同じ手順で始めます：

• beginPath() メソッドを呼び出して、新しいパスを設定する。
• moveTo(x,y) メソッドを呼び出して、キャンバス上の開始位置を点 (x,y) に設定します。
• 弧または円を描くには、 arcTo(x1,y1,x2,y2,radius) メソッドを呼び出します。こ れに よ り 、始点 (x1,y1) ・終点 (x2,y2) ・radius を持つ弧が現在のサブパスに追加され、 直線で前のサブパスに接続されます。

arcTo() についてはarc およびW3C の 2D Context Standardも参照してください 。

object beginPath()

現在のパスを新しいパスにリセットする。

object bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)

(cp1x,cp1y), (cp2x,cp2y) で指定された制御点を用いて、現在位置と与えられた端点との間に三次ベジエ曲線を追加する。曲線が追加 さ れた後、 カ レ ン ト 位置は曲線の端点 (x,y) に更新 さ れます。下記の コ ー ド は下記の よ う なパ ス を生成 し ます：

ctx.strokeStyle = Qt.rgba(0, 0, 0, 1);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(20, 0);//start point
ctx.bezierCurveTo(-10, 90, 210, 90, 180, 0);
ctx.stroke();

bezierCurveToのW3C 2dコンテキスト標準およびbezierCurveToを使った美しい花のデモも参照して ください。

object clearRect(real x, real y, real w, real h)

(x,y,w,h) で指定した矩形内のキャンバス上のすべてのピクセルを透明な黒にクリアします。

object clip()

現在のパスからクリッピング領域を作成します。クリッピングパスの外側にあるシェイプの部分は表示されません。clip() メソッドを使用して複雑な形状を作成するには：

1. context.beginPath() メ ソ ッ ド を呼び出 し て ク リ ッ ピ ン グ パ ス を設定 し ます。
2. lineTo 、arcTo 、arc 、moveTo などのメソッドとclosePath メソッドの任意の組み合わせを呼び出してクリッピングパスを定義します。
3. context.clip() メソッドを呼び出します。

新しいシェイプが表示されます。以下は、クリッピングパスが画像の表示方法をどのように変更するかを示しています：

beginPath （）、closePath （）、stroke （）、fill （）、W3C 2d context standard for clipも参照のこと 。

object closePath()

サブパスの始点に線を引いて現在のサブパスを閉じ、自動的に新しいパスを開始する。新しいパスの現在点は、前のサブパスの最初の点である。

closePath については W3C 2d context standardも参照してください 。

object createConicalGradient(real x, real y, real angle)

CanvasGradient オブジェクトを返します。このオブジェクトは、中心点 (x,y) を中心に反時計回りに色を補間する円錐グラデーションを表し、開始角度angle をラジアン単位で表します。

CanvasGradient::addColorStop(),createLinearGradient(),createRadialGradient(),createPattern(),fillStyle, およびstrokeStyleも参照 。

CanvasImageData createImageData(CanvasImageData imageData)

imageData 引数と同じ寸法のCanvasImageData オブジェクトを作成する。

CanvasImageData createImageData(Url imageUrl)

imageUrl から読み込まれた指定された画像でCanvasImageData オブジェクトを作成します。

Canvas::loadImage()、QtQuick::Canvas::unloadImage()、QtQuick::Canvas::isImageLoadedも参照 。

CanvasImageData createImageData(real sw, real sh)

与えられた寸法(sw,sh)を持つCanvasImageData オブジェクトを作成する。

object createLinearGradient(real x0, real y0, real x1, real y1)

始点 (x0,y0) と終点 (x1,y1) の間の線に沿って色を遷移させる線形グラデーションを表すCanvasGradient オブジェクトを返します。

グラデーションは、色間の滑らかな遷移です。グラデーションには線形と放射状の2種類があります。グラデーションには2つ以上のカラーストップが必要で、グラデーションの始点と終点、または円の間に0から1までのカラーシフトを表します。

CanvasGradient::addColorStop(),createRadialGradient(),createConicalGradient(),createPattern(),fillStyle, およびstrokeStyleも参照 。

variant createPattern(Image image, string repetition)

与えられた画像を使用し、repetition引数で与えられた方向に繰り返すCanvasPatternオブジェクトを返します。

image パラメータは、有効なImageアイテム、有効なCanvasImageData オブジェクト、またはロードされた画像URLでなければなりません。画像データがない場合、この関数は INVALID_STATE_ERR 例外をスローします。

repetition ：

引数repetitionが空またはNULLの場合、値 "repeat "が使用される。

strokeStyle およびfillStyleも参照のこと 。

variant createPattern(color color, enumeration patternMode)

これはオーバーロードされた関数です。与えられたcolor とpatternMode を使用する CanvasPattern オブジェクトを返します。有効なパターンモードは以下の通りです：

Qt::BrushStyleも参照してください 。

object createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)

原点 (x0,y0) と半径r0 を持つ開始円と、原点 (x1,y1) と半径r1 を持つ終了円によって与えられる円錐に沿って描画する放射状グラデーションを表すCanvasGradient オブジェクトを返します。

CanvasGradient::addColorStop(),createLinearGradient(),createConicalGradient(),createPattern(),fillStyle, およびstrokeStyleも参照 。

void drawImage(variant image, real dx, real dy)

与えられたimage をキャンバス上の位置 (dx,dy) に描画します。注意:image タイプには、Image アイテム、画像 URL、またはCanvasImageData オブジェクトを指定できます。Imageアイテムとして与えられた場合、画像が完全に読み込まれていなければ、このメソッドは何も描画しません。url文字列として与えられた場合、画像は最初にCanvasアイテムのCanvas::loadImage()メソッドを呼び出すことによってロードされるべきです。この描画中の画像は、与えられたimage がCanvasImageData オブジェクトであっても、現在のコンテキストクリップパスに従います。

drawImage についてはCanvasImageData,Image,Canvas::loadImage,Canvas::isImageLoaded,Canvas::imageLoaded, およびW3C 2d context standardも参照してください 。

void drawImage(variant image, real dx, real dy, real dw, real dh)

これはオーバーロードされた関数です。与えられたアイテムをimage としてキャンバスの点 (dx,dy) に、幅dw, 高さdh で描画します。

注意:image タイプは、Image アイテム、画像 url、またはCanvasImageData オブジェクトです。Imageアイテムとして与えられた場合、画像が完全に読み込まれていなければ、このメソッドは何も描画しません。url文字列として与えられた場合、画像はまずCanvasアイテムのCanvas::loadImage()メソッドを呼び出してロードされなければなりません。この描画中の画像は、与えられたimage がCanvasImageData オブジェクトであっても、現在のコンテキストクリップパスに従います。

CanvasImageData,Image,Canvas::loadImage(),Canvas::isImageLoaded,Canvas::imageLoaded,drawImageのW3C 2dコンテキスト標準も参照してください 。

void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)

これはオーバーロードされた関数です。与えられたアイテムを、点 (sx,sy) と幅sw, 高さsh のソースから、点 (dx,dy) と幅dw, 高さdh のキャンバス上にimage として描画します。

注：image タイプには、Image または Canvas アイテム、画像 url、CanvasImageData オブジェクトを指定できます。Imageアイテムとして与えられた場合、画像が完全にロードされていなければ、このメソッドは何も描画しません。url文字列として与えられた場合、画像は最初にCanvasアイテムのCanvas::loadImage()メソッドを呼び出すことによってロードされるべきです。この描画中の画像は、与えられたimage がCanvasImageData オブジェクトであっても、現在のコンテキストクリップパスに従います。

CanvasImageData,Image,Canvas::loadImage(),Canvas::isImageLoaded,Canvas::imageLoaded,drawImageのW3C 2dコンテキスト標準も参照してください 。

object ellipse(real x, real y, real w, real h)

(x,y) の左上隅、 幅w と高さh で定義 さ れた外接矩形内に楕円を作成 し 、 それを閉 じ たサブパス と し てパスに追加 し ます。

楕円は時計回りの曲線で構成され、0 度（3 時の位置）で始まり、0 度（3 時の位置）で終わります。

object fill()

サブパスを現在の塗りつぶしスタイルで塗りつぶします。

W3C 2d context standard for fillおよびfillStyleも参照してください 。

object fillRect(real x, real y, real w, real h)

fillStyle を用いて、 (x,y,w,h) で指定 さ れた矩形領域を塗 り ます。

fillStyleも参照 。

object fillText(text, x, y)

指定された位置 (x,y) に、指定されたtext を埋めます。

font,textAlign,textBaseline,strokeTextも参照 。

CanvasImageData getImageData(real x, real y, real w, real h)

(x,y,w,h) で指定したキャンバス矩形の画像データを含むCanvasImageData オブジェクトを返します。

[since QtQuick 2.11] array getLineDash()

線のダッシュパターンを表す qreal の配列を返します。

このメソッドは QtQuick 2.11 で導入されました。

setLineDash() およびlineDashOffsetも参照してください 。

object isPointInPath(real x, real y)

点 (x,y) が現在のパス内にある場合はtrue を返す。

isPointInPath については W3C 2d context standardも参照してください 。

object lineTo(real x, real y)

現在位置から (x,y) の点まで線を引く。

object measureText(text)

width プロパティを持つオブジェクトを返します。その値は、カレントフォントで、与えられたtext でQFontMetrics::horizontalAdvance() を呼び出すのと等価です。

object moveTo(real x, real y)

(x,y) に点を持つ新しいサブパスを作成する。

object putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)

与えられたimageData オブジェクトのデータを、 (dx,dy) のキャンバスにペイントします。

ダーティな矩形 (dirtyX,dirtyY,dirtyWidth,dirtyHeight) が指定された場合、その矩形のピクセルのみが描画されます。

object quadraticCurveTo(real cpx, real cpy, real x, real y)

カ レ ン ト 点 と 、 (cpx,cpy) で指定 さ れた制御点を持つ終点 (x,y) との間に、 二次ベジエ曲線を追加 し ます。

quadraticCurveTo の W3C 2d context standardも参照してください 。

object rect(real x, real y, real w, real h)

位置 (x,y) に、 与えられた幅w と高さh を持つ矩形を、 閉じたサブパスとして追加します。

object reset()

コンテキストの状態とプロパティをデフォルト値にリセットする。

object resetTransform()

変換行列をデフォルト値にリセットする（setTransform(1,0,0,1,0,0) を呼び出すのと同じ）。

transform(),setTransform(),reset()も参照 。

object restore()

スタックの一番上の状態をポップし、コンテキストをその状態に戻す。

save()も参照のこと 。

object rotate(real angle)

キャンバスを現在の原点を中心に、angle ラジアン単位で時計回りに回転させます。

ctx.rotate(Math.PI/2);

回転変換行列は次のようになります：

ここで回転のangle はラジアン単位です。

object roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)

(x,y,w,h) で指定される角丸矩形をパスに追加します。引数xRadius とyRadius は、 角丸矩形の角を定義する楕円の半径を指定します。

object save()

現在の状態を状態スタックにプッシュする。

状態の属性を変更する前に、将来の参照のために現在の状態を保存する必要がある。コンテキストは、描画状態のスタックを保持します。各状態は、現在の変換行列、クリッピング領域、および以下の属性の値からなる：

• strokeStyle
• fillStyle
• fillRule
• globalAlpha
• lineWidth
• lineCap
• lineJoin
• miterLimit
• shadowOffsetX
• shadowOffsetY
• shadowBlur
• shadowColor
• globalCompositeOperation
• font
• textAlign
• textBaseline

現在のパスは描画状態の一部ではありません。パスはbeginPath() メソッドを呼び出すことでリセットできます。

object scale(real x, real y)

キャンバスグリッドの各ユニットのサイズを、現在のトランスフォームマトリックスにスケールファクターを乗算することで増減します。x は水平方向のスケールファクター、y は垂直方向のスケールファクターです。

次のコードは、キャンバスに描かれたオブジェクトの水平方向のサイズを 2 倍にし、垂直方向のサイズを半分にします：

ctx.scale(2.0, 0.5);

[since QtQuick 2.11] void setLineDash(array pattern)

ダッシュパターンを指定されたパターンに設定します。

pattern 直線とギャップを交互に描く距離を指定する数値のリスト。

配列の要素数が奇数の場合、配列の要素はコピーされて連結されます。例えば、[5, 15, 25] は [5, 15, 25, 5, 15, 25] になります。

var space = 4 ctx.setLineDash([1, space, 3, space, 9, space, 27, space, 9, space]) ... ctx.stroke();

このメソッドは QtQuick 2.11 で導入されました。

getLineDash() およびlineDashOffsetも参照してください 。

object setTransform(real a, real b, real c, real d, real e, real f)

以下に説明するように、変換行列を引数で与えられた行列に変更します。

変換行列を直接変更することで、拡大縮小、回転、平行移動を一度に行うことができます。

キャンバス上の各点は、何かが描画される前に行列と掛け合わされます。HTML Canvas 2D Context の仕様では、変換行列は次のように定義されています：

ここで

• a は水平（x）方向のスケール係数です。

  

• c x 方向の傾き係数

  

• e x 方向の平行移動

  

• b はy（垂直）方向のスキュー係数です。

  

• d はy方向のスケールファクター

  

• f はy方向の平行移動

  

• 最後の行は一定のまま

スケールファクターとスキューファクターは倍数です。e とf は座標空間の単位で、translate(x,y) メソッドの単位と同じです。

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

object shear(real sh, real sv)

変換行列を，水平方向にsh ，垂直方向にsv 剪断する．

object stroke()

現在のストロークスタイルでサブパスをストロークします。

ストロークについてはstrokeStyle とW3C 2d context standardも参照して ください。

object strokeRect(real x, real y, real w, real h)

(x,y,w,h) で指定 さ れた矩形のパ ス を、strokeStyle,lineWidth,lineJoin, （適切な場合には）miterLimit 属性を用いて描 き ます。

strokeStyle,lineWidth,lineJoin, およびmiterLimitも参照 。

object strokeText(text, x, y)

指定されたtext を、 (x,y) で指定された位置で描画します。

font,textAlign,textBaseline,fillTextも参照 。

object text(string text, real x, real y)

与えられたtext を、 与え ら れた カ レ ン ト コ ン テキス ト フ ォ ン ト か ら 生成 さ れた閉 じ たサブパスの集合 と し てパスに追加 し ます。

サブパスは、 テキス ト のベース ラ イ ンの左端が、 (x,y) で指定 し た点に位置す る よ う に配置 さ れます。

object transform(real a, real b, real c, real d, real e, real f)

このメソッドはsetTransform() と非常によく似ているが、古い変換行列を置き換えるのではなく、与えられた変換行列を現在の行列に乗算して適用する。

setTransform(a,b,c,d,e,f) メソッドは，実際には現在の変換行列を単位行列にリセットし，同じ引数で transform(a,b,c,d,e,f) メソッドを呼び出します．

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

object translate(real x, real y)

キャンバスの原点を、座標空間単位で水平距離x 、垂直距離y だけ移動します。

原点を平行移動することで、各形状について手動で座標を測定することなく、キャンバス上に異なるオブジェクトのパターンを描くことができます。