D2DGraphics

class

js/d2d.js:474

Typically used inside on_paint.
Use on_paint(dgr) for D2DGraphics members hints in auto-completion list.
Note: there are many different ways to get colours: window.GetColourDUI/window.GetColourCUI, RGB function from Helpers.js, utils.ColourPicker and etc.

class

MeasureStringInfo

js/d2d.js:864

Example

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
}

propertyreadonly

Chars

js/d2d.js:888

Chars: number

propertyreadonly

Height

js/d2d.js:894

Height: float

propertyreadonly

Height

js/d2d.js:946

Height: number = 480

Currect height of device context surface.

propertyreadonly

Lines

js/d2d.js:900

Lines: number

propertyreadonly

Width

js/d2d.js:918

Width: float

propertyreadonly

Width

js/d2d.js:940

Width: number = 640

Currect width of device context surface.

propertyreadonly

X

js/d2d.js:906

X: float

propertyreadonly

Y

js/d2d.js:912

Y: float

method

AlphaBlend

js/d2d.js:696

AlphaBlend(img, dstX, dstY, dstW, dstH, srcX, srcY, srcW, srcH, alpha)

Parameters

Name	Type	Description
`img`	`D2DBitmap`
`dstX`	`number`
`dstY`	`number`
`dstW`	`number`
`dstH`	`number`
`srcX`	`number`
`srcY`	`number`
`srcW`	`number`
`srcH`	`number`
`alpha = 255`optional	`number`	Valid values 0-255.

method

ApplyTransform

js/d2d.js:855

ApplyTransform(matrix)

Applies specified transformation matrix of 3x2 size to the current D2DGraphics matrix.
Matrix3x2 helper class from the component/docs/Matrix.js will be useful

Parameters

Name	Type	Description
`matrix`	`Float32Array`	Array that presents 3x2 matrix for transformation (length = 6)

Example source

docs/Matrix.jsopen source

method

CalcTextHeight

js/d2d.js:486

CalcTextHeight(str, font)

Calculates text height for DrawText.
Note: this will only calculate the text height of one line.

Parameters

Name	Type	Description
`str`	`string`
`font`	`D2DFont`

Returns

number

method

CalcTextWidth

js/d2d.js:496

CalcTextWidth(str, font, use_exact)

Calculates text width for DrawText.

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.

Parameters

Name	Type	Description
`str`	`string`
`font`	`D2DFont`
`use_exact = false`optional	`boolean`	Uses a slower, but more accurate method of calculating text width which accounts for kerning pairs.

Returns

number

method

DrawEffect

js/d2d.js:510

DrawEffect(effect, dstX, dstY, srcX, srcY, srcW, srcH, compositionMode)

Parameters

Name	Type	Description
`img`	`D2DEffect`
`dstX`	`number`
`dstY`	`number`
`srcX`	`number`
`srcY`	`number`
`srcW`	`number`
`srcH`	`number`
`compositionMode = CompositeMode.SourceOver`optional	`CompositeMode`	See CompositeMode

method

DrawEllipse

js/d2d.js:522

DrawEllipse(x, y, w, h, line_width, colour_or_brush, style)

Parameters

Name	Type	Description
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`
`line_width`	`number`
`colour_or_brush`	`*`	colour ARGB or D2DBrush object
`style = DashStyle.Solid`optional	`DashStyle`	See DashStyle

method

DrawImage

js/d2d.js:533

DrawImage(img, dstX, dstY, dstW, dstH, srcX, srcY, srcW, srcH, angle, alpha)

Parameters

Name	Type	Description
`img`	`D2DBitmap`
`dstX`	`number`
`dstY`	`number`
`dstW`	`number`
`dstH`	`number`
`srcX`	`number`
`srcY`	`number`
`srcW`	`number`
`srcH`	`number`
`angle = 0`optional	`float`
`alpha = 255`optional	`number`	Valid values 0-255.

method

DrawLine

js/d2d.js:548

DrawLine(x1, y1, x2, y2, line_width, colour_or_brush, style, startCap, endCap)

Parameters

Name	Type	Description
`x1`	`number`
`y1`	`number`
`x2`	`number`
`y2`	`number`
`line_width`	`number`
`colour_or_brush`	`*`	colour ARGB or D2DBrush object
`style = DashStyle.Solid`optional	`DashStyle`	See DashStyle
`startCap = CapStyle.Solid`optional	`CapStyle`	See CapStyle
`endCap = CapStyle.Solid`optional	`CapStyle`	See CapStyle

method

DrawLines

js/d2d.js:561

DrawLines(colour_or_brush, line_width, points, style)

Parameters

Name	Type	Description
`colour_or_brush`	`*`	colour ARGB or D2DBrush object
`line_width`	`number`
`points`	`Array<Array<number>>`
`style = DashStyle.Solid`optional	`DashStyle`	See DashStyle

method

DrawPolygon

js/d2d.js:569

DrawPolygon(colour_or_brush, line_width, points, style)

Parameters

Name	Type	Description
`colour_or_brush`	`*`	colour ARGB or D2DBrush object
`line_width`	`number`
`points`	`Array<Array<number>>`
`style = DashStyle.Solid`optional	`DashStyle`	See DashStyle

method

DrawRect

js/d2d.js:591

DrawRect(x, y, w, h, line_width, colour_or_brush, style)

Parameters

Name	Type	Description
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`
`line_width`	`number`
`colour_or_brush`	`*`	colour ARGB or D2DBrush object
`style = DashStyle.Solid`optional	`DashStyle`	See DashStyle

method

DrawRoundRect

js/d2d.js:602

DrawRoundRect(x, y, w, h, arc_width, arc_height, line_width, colour_or_brush, style)

Parameters

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 D2DBrush object
`style = DashStyle.Solid`optional	`DashStyle`	See DashStyle

method

DrawString

js/d2d.js:577

DrawString(str, font, colour_or_brush, x, y, w, h, flags)

Should be only used when DrawText is not applicable.

Parameters

Name	Type	Description
`str`	`string`
`font`	`D2DFont`
`colour_or_brush`	`*`	colour ARGB or D2DBrush object
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`
`flags = 0`optional	`number`	See StringFormatFlags flags

method

DrawStrokedText

js/d2d.js:734

DrawStrokedText(str, font, strokeColor, strokeWidth, fillColor, x, y, w, h)

Draws stroked text in clipped rectangle. Flags for formatting text are not supported.

Parameters

Name	Type	Description
`str`	`string`
`font`	`D2DFont`
`strokeColor`	`number`
`strokeWidth`	`number`
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`

method

DrawText

js/d2d.js:710

DrawText(str, font, colour_or_brush, x, y, w, h, format)

Provides faster and better rendering than DrawString.

Do not use this to draw text on transparent background or with D2DGraphics 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.

Parameters

Name	Type	Description
`str`	`string`
`font`	`D2DFont`
`colour_or_brush`	`*`	colour ARGB or D2DBrush object
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`
`format = 0`optional	`number`	See flags like DT_LEFT

method

EstimateLineWrap

js/d2d.js:615

EstimateLineWrap(str, font, max_width)

Parameters

Name	Type	Description
`str`	`string`
`font`	`D2DFont`
`max_width`	`number`

Returns

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)

method

FillEllipse

js/d2d.js:631

FillEllipse(x, y, w, h, colour_or_brush)

Parameters

Name	Type	Description
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`
`colour_or_brush`	`*`	colour ARGB or D2DBrush object

method

FillGradRect

js/d2d.js:640

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.

Parameters

Name	Type	Description
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`
`angle`	`float`
`colour1`	`number`
`colour2`	`number`
`focus = 1.0`optional	`float`	Specify where the centred colour will be at its highest intensity. Valid values between 0 and 1.

method

FillGradRectV2

js/d2d.js:655

FillGradRectV2(x, y, w, h, angle, stops)

Fills rect with gradient in arbitrary quantity of stops.

Parameters

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]

Example

dgr.FillGradRectV2(10, 10, 200, 100, 0, [0.0, 0xFF0000FF, 0.5, 0xFFFF0000, 1.0, 0xFF000000]);

method

FillPolygon

js/d2d.js:669

FillPolygon(colour_or_brush, fillmode, points)

Parameters

Name	Type	Description
`colour_or_brush`	`*`	colour ARGB or D2DBrush object
`fillmode`	`number`	0 alternate, 1 winding.
`points`	`Array<Array<number>>`

method

FillRoundRect

js/d2d.js:676

FillRoundRect(x, y, w, h, arc_width, arc_height, colour_or_brush)

Parameters

Name	Type	Description
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`
`arc_width`	`number`
`arc_height`	`number`
`colour_or_brush`	`*`	colour ARGB or D2DBrush object

method

FillSolidRect

js/d2d.js:687

FillSolidRect(x, y, w, h, colour_or_brush)

Parameters

Name	Type	Description
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`
`colour_or_brush`	`*`	colour ARGB or D2DBrush object

method

GetTransform

js/d2d.js:832

GetTransform()

Gets D2DGraphics current transformation matrix of 3x2 size (Float32Array(6))
Matrix3x2 helper class from the component/docs/Matrix.js will be useful

Returns

Float32Array

Example source

docs/Matrix.jsopen source

method

MeasureString

js/d2d.js:747

MeasureString(str, font, x, y, w, h, flags)

Calculates text dimensions for DrawString.

Parameters

Name	Type	Description
`str`	`string`
`font`	`D2DFont`
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`
`flags = 0`optional	`number`	See StringFormatFlags flags

Returns

MeasureStringInfo

method

PopClip

js/d2d.js:774

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.

method

PopTransform

js/d2d.js:827

PopTransform()

Restores D2DGraphics matrix from internal stack pushed previously by PushTransform.

method

PushClip

js/d2d.js:761

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.

Parameters

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

method

PushTransform

js/d2d.js:822

PushTransform()

Saves current D2DGraphics matrix in internal stack. To restore the matrix use PopTransform.

method

ResetTransform

js/d2d.js:850

ResetTransform()

Resets current D2DGraphics matrix to original identity matrix.

method

Rotate

js/d2d.js:790

Rotate(angle, cx, cy)

Applies rotation matrix to the current D2DGraphics matrix.
For more information see https://learn.microsoft.com/en-us/windows/win32/api/d2d1helper/nf-d2d1helper-matrix3x2f-rotation

Parameters

Name	Type	Description
`angle`	`float`	Angle of rotation in degrees
`cx = 0`optional	`number`	Rotation center point x coord
`cy = 0`optional	`number`	Rotation center point y coord

method

Scale

js/d2d.js:800

Scale(sz, sy, cx, cy)

Applies scale matrix to the current D2DGraphics 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)

Parameters

Name	Type	Description
`sx`	`float`	The x-axis scale factor
`sy = 0`optional	`float`	The y-axis scale factor. If zero sx will be used as sy
`cx = 0`optional	`number`	Scale center point x coord
`cy = 0`optional	`number`	Scale center point y coord

method

SetInterpolationMode

js/d2d.js:925

SetInterpolationMode(mode)

Parameters

Name	Type	Description
`mode = 0`optional	`number`	See InterpolationMode enum

method

SetSmoothingMode

js/d2d.js:930

SetSmoothingMode(mode)

Parameters

Name	Type	Description
`mode = 0`optional	`number`	See SmoothingMode enum

method

SetTextRenderingHint

js/d2d.js:935

SetTextRenderingHint(mode)

Parameters

Name	Type	Description
`mode = 0`optional	`number`	See TextRenderingHint enum

method

SetTransform

js/d2d.js:841

SetTransform(matrix)

Replaces the current D2DGraphics matrix with specified transformation matrix of 3x2 size.
Matrix3x2 helper class from the component/docs/Matrix.js will be useful

Parameters

Name	Type	Description
`matrix`	`Float32Array`	Array that presents 3x2 matrix for transformation (length = 6)

Example source

docs/Matrix.jsopen source

method

Skew

js/d2d.js:811

Skew(angleX, angleY, cx, cy)

Applies skew matrix to the current D2DGraphics matrix.
For more information see https://learn.microsoft.com/en-us/windows/win32/api/d2d1helper/nf-d2d1helper-matrix3x2f-skew

Parameters

Name	Type	Description
`angleX`	`float`	The x-axis skew angle, which is measured in degrees counterclockwise from the y-axis.
`angleY`	`float`	The y-axis skew angle, which is measured in degrees clockwise from the x-axis.
`cx = 0`optional	`number`	Skew center point x coord
`cy = 0`optional	`number`	Skew center point y coord

method

Translate

js/d2d.js:781

Translate(dx, dy)

Applies translation matrix to the current D2DGraphics matrix.
For more information see https://learn.microsoft.com/en-us/windows/win32/api/d2d1helper/nf-d2d1helper-matrix3x2f-translation(d2d1_size_f)

Parameters

Name	Type	Description
`dx`	`number`
`dy`	`number`