Context2D QML Type

コンテキストがペイントするキャンバスの項目を保持します。

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

現在の塗りつぶしルールを保持します。以下の塗りつぶしルールがサポートされています：

fillStyleも参照してください 。

図形の塗りつぶしに使用される現在のスタイルを保持します。スタイルには、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も参照 。

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

フォントに関する w3C 2d context standardのサブセットをサポートしています：

• font-style （オプ シ ョ ナル） ： 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 "です。

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

現在のコンポジション操作を保持します。可能な操作は以下のとおりです：

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

現在の行頭スタイルを保持します。可能な行頭スタイルは以下のとおりです：

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

カ レ ン ト 行ダ ッ シ ュ オ フ セ ッ ト を保持。デフォルトの線ダッシュオフセット値は0 です。

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

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

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

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

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

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

現在のマイター限界比を保持します。デフォルトのマイター限界値は 10.0 です。

シャドウに適用されるぼかしの現在のレベルを保持します。

現在のシャドウの色を保持します。

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

shadowOffsetYも参照 。

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

shadowOffsetXも参照 。

CSSカラーを含む文字列、CanvasGradient 、またはCanvasPatternオブジェクトです。無効な値は無視されます。

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

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

現在のテキス ト配置設定を保持 し ます。指定可能な値は以下のとおりです：

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

現在のベース ラ イ ン揃え設定を保持 し ます。可能な値は以下の と お り です：

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

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

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

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

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

与えられた制御点と半径を持つ円弧を現在のサブパスに追加します。円弧を描くには、直線を描くのと同じ手順で始めます：

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

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

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

(cp1x,cp1y) と (cp2x,cp2y) で指定 さ れた制御点を用いて、 カ レ ン ト 位置 と 与えられた endPoint の間に三次ベジ エ曲線を追加 し ます。曲線が追加 さ れた後、 カ レ ン ト 位置は曲線の端点(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 を使用した美しい花のデモも参照してください 。

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

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

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

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

beginPath(),closePath(),stroke(),fill(),W3C 2d context standard for clipも参照 。

サブパスの始点へ線を引 く こ と に よ っ てカ レ ン ト サブパ ス を閉 じ 、 自動的に新 し いパ ス を開始 さ せます。新 し いパスの現在点は、 前のサブパスの先頭点。

closePath については W3C 2d context standardも参照 。

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

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

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

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

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

指定された寸法(sw,sh)を持つCanvasImageData オブジェクトを作成します。

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

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

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

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

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

repetition ：

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

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

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

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

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

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

与えられた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も参照してください 。

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

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

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

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

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

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

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

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

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

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

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

fillStyleも参照 。

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

font,textAlign,textBaseline,strokeTextも参照 。

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

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

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

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

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

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

現在の位置から (x,y) の点へ線を描きます。

width その値は、 カ レ ン ト フ ォ ン ト 内で、 与えられたtext でQFontMetrics::horizontalAdvance （） を呼び出すのと等価です。

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

与えられたimageData オブジ ェ ク ト のデー タ を、 (dx,dy) で canvas に塗 り ます。

ダーテ ィ 矩形 （dirtyX,dirtyY,dirtyWidth,dirtyHeight ） が与え ら れた と き は、 その矩形の ピ ク セルだけが描かれます。

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

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

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

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

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

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

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

save()も参照 。

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

ctx.rotate(Math.PI/2);

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

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

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

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

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

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

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

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

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

ctx.scale(2.0, 0.5);

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

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も参照してください 。

変換行列を引数で与えられた行列に変更します。

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

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

ここで

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

  

• c x 方向の傾き係数

  

• e x 方向の平行移動

  

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

  

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

  

• f はy方向の平行移動

  

• 最後の行は一定のまま

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

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

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

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

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

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

strokeStyle,lineWidth,lineJoin,miterLimitも参照 。

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

font,textAlign,textBaseline,fillTextも参照 。

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

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

こ の メ ソ ッ ド はsetTransform （） と 非常に似てい ますが、 古い変換行列を置 き 換え る のではな く 、 与え ら れた変換行列をカ レ ン ト 行列に乗算す る こ と に よ っ て適用 し ます。

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

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

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

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