D2DGraphics

classWORKER

js/d2d.js:698

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.

classWORKERCLONEABLE

MeasureStringInfo

js/d2d.js:1163

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
}

propertyWORKERreadonly

Chars

js/d2d.js:1189

Chars: number

propertyWORKERreadonly

Height

js/d2d.js:1196

Height: float

propertyWORKERreadonly

Height

js/d2d.js:1257

Height: number = 480

Currect height of device context surface.

propertyWORKERreadonly

Lines

js/d2d.js:1203

Lines: number

propertyWORKERreadonly

Width

js/d2d.js:1224

Width: float

propertyWORKERreadonly

Width

js/d2d.js:1250

Width: number = 640

Currect width of device context surface.

propertyWORKERreadonly

X

js/d2d.js:1210

X: float

propertyWORKERreadonly

Y

js/d2d.js:1217

Y: float

methodWORKER

AlphaBlend

js/d2d.js:962

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.

methodWORKER

ApplyTransform

js/d2d.js:1153

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

methodWORKER

CalcTextHeight

js/d2d.js:711

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

methodWORKER

CalcTextWidth

js/d2d.js:722

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

methodWORKER

DrawEffect

js/d2d.js:737

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

methodWORKER

DrawEllipse

js/d2d.js:750

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

Parameters

Name	Type	Description
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`
`line_width`	`number`
`colour_or_brush`	`*`	colour ARGB or D2DBrush object
`strokeStyle = DashStyle.Solid`optional	`(DashStyle\|D2DStrokeStyle)`	DashStyle shorthand or reusable D2DStrokeStyle

Example source

samples/d2d/StrokeStyle.jsopen source

methodWORKER

DrawImage

js/d2d.js:763

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.

methodWORKER

DrawLine

js/d2d.js:795

DrawLine(x1, y1, x2, y2, line_width, colour_or_brush, strokeStyle, 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
`strokeStyle = DashStyle.Solid`optional	`(DashStyle\|D2DStrokeStyle)`	DashStyle shorthand or reusable D2DStrokeStyle
`startCap = CapStyle.Flat`optional	`CapStyle`	Legacy start cap used only when strokeStyle is a DashStyle value. A D2DStrokeStyle carries its own caps.
`endCap = CapStyle.Flat`optional	`CapStyle`	Legacy end cap used only when strokeStyle is a DashStyle value. A D2DStrokeStyle carries its own caps.

Example source

samples/d2d/StrokeStyle.jsopen source

methodWORKER

DrawLines

js/d2d.js:810

DrawLines(colour_or_brush, line_width, points, strokeStyle)

Draws a connected sequence of lines.

Parameters

Name	Type	Description
`colour_or_brush`	`*`	colour ARGB or D2DBrush object
`line_width`	`number`
`points`	`Array<number>`	array of connected points [x1, y1, x2, y2, ...]
`strokeStyle = DashStyle.Solid`optional	`(DashStyle\|D2DStrokeStyle)`	DashStyle shorthand or reusable D2DStrokeStyle

Example source

samples/d2d/StrokeStyle.jsopen source

methodWORKER

DrawPolygon

js/d2d.js:822

DrawPolygon(colour_or_brush, line_width, points, strokeStyle)

Draws a connected sequence of lines with connection of last and first points (unlike DrawLines).

Parameters

Name	Type	Description
`colour_or_brush`	`*`	colour ARGB or D2DBrush object
`line_width`	`number`
`points`	`Array<number>`	array of connected points [x1, y1, x2, y2, ...]
`strokeStyle = DashStyle.Solid`optional	`(DashStyle\|D2DStrokeStyle)`	DashStyle shorthand or reusable D2DStrokeStyle

Example source

samples/d2d/StrokeStyle.jsopen source

methodWORKER

DrawRect

js/d2d.js:849

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

Parameters

Name	Type	Description
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`
`line_width`	`number`
`colour_or_brush`	`*`	colour ARGB or D2DBrush object
`strokeStyle = DashStyle.Solid`optional	`(DashStyle\|D2DStrokeStyle)`	DashStyle shorthand or reusable D2DStrokeStyle

Example source

samples/d2d/StrokeStyle.jsopen source

methodWORKER

DrawRoundRect

js/d2d.js:862

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

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
`strokeStyle = DashStyle.Solid`optional	`(DashStyle\|D2DStrokeStyle)`	DashStyle shorthand or reusable D2DStrokeStyle

Example source

samples/d2d/StrokeStyle.jsopen source

methodWORKER

DrawString

js/d2d.js:834

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

methodWORKER

DrawStrokedText

js/d2d.js:1019

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`

methodWORKER

DrawText

js/d2d.js:994

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

methodWORKER

EstimateLineWrap

js/d2d.js:877

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)

methodWORKER

FillEllipse

js/d2d.js:894

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

methodWORKER

FillGradRect

js/d2d.js:904

FillGradRect(x, y, w, h, angle, colour1, colour2, focus)

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.

methodWORKER

FillGradRectV2

js/d2d.js:917

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]);

methodWORKER

FillPolygon

js/d2d.js:932

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>>`

methodWORKER

FillRoundRect

js/d2d.js:940

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

methodWORKER

FillSolidRect

js/d2d.js:952

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

methodWORKER

GdiAlphaBlend

js/d2d.js:977

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

Compatibility alias of AlphaBlend.

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`

methodWORKER

GdiDrawBitmap

js/d2d.js:779

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

Compatibility alias of DrawImage.

Parameters

Name	Type	Description
`img`	`D2DBitmap`
`dstX`	`number`
`dstY`	`number`
`dstW`	`number`
`dstH`	`number`
`srcX`	`number`
`srcY`	`number`
`srcW`	`number`
`srcH`	`number`

methodWORKER

GetTransform

js/d2d.js:1127

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

methodWORKER

MeasureString

js/d2d.js:1033

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

methodWORKER

PopClip

js/d2d.js:1062

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.

methodWORKER

PopTransform

js/d2d.js:1121

PopTransform()

Restores D2DGraphics matrix from internal stack pushed previously by PushTransform.

methodWORKER

PushClip

js/d2d.js:1048

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

methodWORKER

PushTransform

js/d2d.js:1115

PushTransform()

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

methodWORKER

ResetTransform

js/d2d.js:1147

ResetTransform()

Resets current D2DGraphics matrix to original identity matrix.

methodWORKER

Rotate

js/d2d.js:1080

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

methodWORKER

Scale

js/d2d.js:1091

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

methodWORKER

SetInterpolationMode

js/d2d.js:1232

SetInterpolationMode(mode)

Parameters

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

methodWORKER

SetSmoothingMode

js/d2d.js:1238

SetSmoothingMode(mode)

Parameters

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

methodWORKER

SetTextRenderingHint

js/d2d.js:1244

SetTextRenderingHint(mode)

Parameters

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

methodWORKER

SetTransform

js/d2d.js:1137

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

methodWORKER

Skew

js/d2d.js:1103

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

methodWORKER

Translate

js/d2d.js:1070

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`