Typically used inside on_paint.
Note: there are many different ways to get colours: window.GetColourDUI/window.GetColourCUI, RGB function from Helpers.js, utils.ColourPicker and etc.
include(`${fb.ComponentPath}docs\\Flags.js`);
include(`${fb.ComponentPath}docs\\Helpers.js`);
let sf = StringFormat(StringAlignment.Near, StringAlignment.Near);
let text = utils.ReadTextFile("z:\\info.txt");
let font = window.GetFontDUI(0);
function on_paint(gr) {
gr.DrawString(text, font, RGB(255, 0, 0), 0, 0, window.Width, window.Height, sf);
let temp = gr.MeasureString(text, font, 0, 0, window.Width, 10000, sf);
// If we want to calculate height, we must set the height to be far larger than what
// the text could possibly be.
console.log(temp.Height); // 2761.2421875 // far larger than my panel height!
console.log(temp.Chars); // 7967
}Chars: numberHeight: floatHeight: number = 480Currect height of device context surface.
Lines: numberWidth: floatWidth: number = 640Currect width of device context surface.
X: floatY: floatApplyTransform(matrix)Applies specified transformation matrix of 3x2 size to the current GdiGraphics matrix.
Matrix helpers from the component/docs/Matrix.js will be useful
| Name | Type | Description |
|---|---|---|
matrix | Float32Array | Array that presents 3x2 matrix for transformation (length = 6) |
CalcTextHeight(str, font)Calculates text height for GdiDrawText.
Note: this will only calculate the text height of one line.
| Name | Type | Description |
|---|---|---|
str | string | |
font | GdiFont |
numberCalcTextWidth(str, font, use_exact)Calculates text width for GdiDrawText.
Note: When the str contains a kerning pair that is found in the specified font, the return value will be larger than the actual drawn width of the text. If accurate values are required, set use_exact to true.
| Name | Type | Description |
|---|---|---|
str | string | |
font | GdiFont | |
use_exact = falseoptional | boolean | Uses a slower, but more accurate method of calculating text width which accounts for kerning pairs. |
numberDrawBitmap(img, dstX, dstY, dstW, dstH, srcX, srcY, srcW, srcH)Compatibility alias of DrawImage.
| Name | Type | Description |
|---|---|---|
img | GdiBitmap | |
dstX | number | |
dstY | number | |
dstW | number | |
dstH | number | |
srcX | number | |
srcY | number | |
srcW | number | |
srcH | number |
DrawEllipse(x, y, w, h, line_width, colour_or_brush)| Name | Type | Description |
|---|---|---|
x | number | |
y | number | |
w | number | |
h | number | |
line_width | number | |
colour_or_brush | * | colour ARGB or GdiBrush object |
DrawImage(img, dstX, dstY, dstW, dstH, srcX, srcY, srcW, srcH, angle, alpha)DrawLine(x1, y1, x2, y2, line_width, colour_or_brush)| Name | Type | Description |
|---|---|---|
x1 | number | |
y1 | number | |
x2 | number | |
y2 | number | |
line_width | number | |
colour_or_brush | * | colour ARGB or GdiBrush object |
DrawLines(colour_or_brush, line_width, points)Draws a connected sequence of lines.
| Name | Type | Description |
|---|---|---|
colour_or_brush | * | colour ARGB or GdiBrush object |
line_width | number | |
points | Array<number> | array of connected points [x1, y1, x2, y2, ...] |
DrawPolygon(colour_or_brush, line_width, points)Draws a connected sequence of lines with connection of last and first points (unlike DrawLines).
| Name | Type | Description |
|---|---|---|
colour_or_brush | * | colour ARGB or GdiBrush object |
line_width | number | |
points | Array<number> | array of connected points [x1, y1, x2, y2, ...] |
DrawRect(x, y, w, h, line_width, colour_or_brush)| Name | Type | Description |
|---|---|---|
x | number | |
y | number | |
w | number | |
h | number | |
line_width | number | |
colour_or_brush | * | colour ARGB or GdiBrush object |
DrawRoundRect(x, y, w, h, arc_width, arc_height, line_width, colour_or_brush)| Name | Type | Description |
|---|---|---|
x | number | |
y | number | |
w | number | |
h | number | |
arc_width | number | |
arc_height | number | |
line_width | number | |
colour_or_brush | * | colour ARGB or GdiBrush object |
DrawString(str, font, colour_or_brush, x, y, w, h, flags)Should be only used when GdiDrawText is not applicable.
| Name | Type | Description |
|---|---|---|
str | string | |
font | GdiFont | |
colour_or_brush | * | colour ARGB or GdiBrush object |
x | number | |
y | number | |
w | number | |
h | number | |
flags = 0optional | number | See StringFormatFlags flags |
DrawText(str, font, colour, x, y, w, h, format)Alias of GdiDrawText.
| Name | Type | Description |
|---|---|---|
str | string | |
font | GdiFont | |
colour | number | |
x | number | |
y | number | |
w | number | |
h | number | |
format = 0optional | number |
EstimateLineWrap(str, font, max_width)| Name | Type | Description |
|---|---|---|
str | string | |
font | GdiFont | |
max_width | number |
Array<Array> — index | meaning
[0] text line 1
[1] width of text line 1 (in pixel)
[2] text line 2
[3] width of text line 2 (in pixel)
...
[2n + 2] text line n
[2n + 3] width of text line n (px)
FillEllipse(x, y, w, h, colour_or_brush)| Name | Type | Description |
|---|---|---|
x | number | |
y | number | |
w | number | |
h | number | |
colour_or_brush | * | colour ARGB or GdiBrush object |
FillGradRect(x, y, w, h, angle, colour1, colour2, focus)Note: this may appear buggy depending on rectangle size. The easiest fix is to adjust the "angle" by a degree or two.
FillGradRectV2(x, y, w, h, angle, stops)Fills rect with gradient in arbitrary quantity of stops.
| Name | Type | Description |
|---|---|---|
x | number | |
y | number | |
w | number | |
h | number | |
angle | float | |
stops | Array | Specifies gradient stops in form of [pos0, argb0, ..., posN, argbN] |
dgr.FillGradRectV2(10, 10, 200, 100, 0, [0.0, 0xFF0000FF, 0.5, 0xFFFF0000, 1.0, 0xFF000000]);FillPolygon(colour_or_brush, fillmode, points)| Name | Type | Description |
|---|---|---|
colour_or_brush | * | colour ARGB or GdiBrush object |
fillmode | number | 0 alternate, 1 winding. |
points | Array<Array<number>> |
FillRoundRect(x, y, w, h, arc_width, arc_height, colour_or_brush)| Name | Type | Description |
|---|---|---|
x | number | |
y | number | |
w | number | |
h | number | |
arc_width | number | |
arc_height | number | |
colour_or_brush | * | colour ARGB or GdiBrush object |
FillSolidRect(x, y, w, h, colour_or_brush)| Name | Type | Description |
|---|---|---|
x | number | |
y | number | |
w | number | |
h | number | |
colour_or_brush | * | colour ARGB or GdiBrush object |
GdiAlphaBlend(img, dstX, dstY, dstW, dstH, srcX, srcY, srcW, srcH, alpha)| Name | Type | Description |
|---|---|---|
img | GdiRawBitmap | |
dstX | number | |
dstY | number | |
dstW | number | |
dstH | number | |
srcX | number | |
srcY | number | |
srcW | number | |
srcH | number | |
alpha = 255optional | number | Valid values 0-255. |
GdiDrawBitmap(img, dstX, dstY, dstW, dstH, srcX, srcY, srcW, srcH)Always faster than DrawImage, does not support alpha channel.
| Name | Type | Description |
|---|---|---|
img | GdiRawBitmap | |
dstX | number | |
dstY | number | |
dstW | number | |
dstH | number | |
srcX | number | |
srcY | number | |
srcW | number | |
srcH | number |
GdiDrawText(str, font, colour, x, y, w, h, format)Provides faster and better rendering than DrawString.
Do not use this to draw text on transparent background or with GdiGraphics other than the one passed in on_paint callback: this will result in visual artifacts caused by ClearType hinting.
Use DrawString instead in such cases.
To calculate text dimensions use CalcTextHeight, CalcTextWidth.
Note: uses special rules for & character by default, which consumes the & and causes the next character to be underscored. This behaviour can be changed (or disabled) via format parameter.
GetTransform()Gets GdiGraphics current transformation matrix of 3x2 size (Float32Array(6)) Matrix helpers from the component/docs/Matrix.js will be useful
Float32ArrayMeasureString(str, font, x, y, w, h, flags)Calculates text dimensions for DrawString.
| Name | Type | Description |
|---|---|---|
str | string | |
font | GdiFont | |
x | number | |
y | number | |
w | number | |
h | number | |
flags = 0optional | number | See StringFormatFlags flags |
PopClip()Restores the clipping region that was active before the matching PushClip call.
Does nothing if the clip stack is empty.
The current transform and other graphics state are not affected.
PopTransform()Restores current GdiGraphics matrix from internal stack pushed previously by PushTransform.
PushClip(x, y, width, height)Pushes a rectangular clipping region onto the clip stack.
The new clipping region is intersected with the current clipping region.
Calls may be nested and should be paired with PopClip.
The current transform and other graphics state are not affected.
| Name | Type | Description |
|---|---|---|
x | number | left coordinate of the clipping rectangle |
y | number | top coordinate of the clipping rectangle |
width | number | width of the clipping rectangle |
height | number | height of the clipping rectangle |
PushTransform()Saves current GdiGraphics matrix in internal stack. To restore the matrix use PopTransform.
ResetTransform()Resets current GdiGraphics matrix to original identity matrix.
Rotate(angle, cx, cy)Applies rotation matrix to the current GdiGraphics matrix.
For more information see https://learn.microsoft.com/en-us/windows/win32/api/d2d1helper/nf-d2d1helper-matrix3x2f-rotation
| Name | Type | Description |
|---|---|---|
angle | float | Angle of rotation in degrees |
cx = 0optional | number | Rotation center point x coord |
cy = 0optional | number | Rotation center point y coord |
Scale(sz, sy, cx, cy)Applies scale matrix to the current GdiGraphics matrix.
For more information see https://learn.microsoft.com/en-us/windows/win32/api/d2d1helper/nf-d2d1helper-matrix3x2f-scale(d2d1_size_f_d2d1_point_2f)
SetInterpolationMode(mode)| Name | Type | Description |
|---|---|---|
mode = 0optional | number | See InterpolationMode enum |
SetSmoothingMode(mode)| Name | Type | Description |
|---|---|---|
mode = 0optional | number | See SmoothingMode enum |
SetTextRenderingHint(mode)| Name | Type | Description |
|---|---|---|
mode = 0optional | number | See TextRenderingHint enum |
SetTransform(matrix)Replaces the current GdiGraphics matrix with specified transformation matrix of 3x2 size.
Matrix helpers from the component/docs/Matrix.js will be useful
| Name | Type | Description |
|---|---|---|
matrix | Float32Array | Array that presents 3x2 matrix for transformation (length = 6) |
Skew(angleX, angleY, cx, cy)Applies skew matrix to the current GdiGraphics matrix.
For more information see https://learn.microsoft.com/en-us/windows/win32/api/d2d1helper/nf-d2d1helper-matrix3x2f-skew
Translate(dx, dy)Applies translation matrix to the current GdiGraphics matrix.
For more information see https://learn.microsoft.com/en-us/windows/win32/api/d2d1helper/nf-d2d1helper-matrix3x2f-translation(d2d1_size_f)
| Name | Type | Description |
|---|---|---|
dx | number | |
dy | number |