Documentation/d2d
namespace

d2d

js/d2d.js:954

Functions for working with Direct2D graphics.

method

Brush

js/d2d.js:961
Brush(type, param1, param2, param3, param4)

Creates a drawing brush of the specified type. The meaning of the brush's input parameters depends on its type.
For type == BrushType.Solid:
- param1: brush colour in ARGB
For type == BrushType.LinearGradient:
- param1: start point coords of linear gradient in form of Array(2) (for ex.: [0, 0])
- param2: end point coords of linear gradient in form of Array(2) (for ex.: [100, 0])
- param3: gradient stops specified as an array with alternating position and color values for each stop (for ex.: [0.0, 0xFF000000, 0.5, 0xFFFF0000, 1.0, 0xFFFFFFFF])
- param4: wrap mode responsible for how the gradient is repeated when drawing. See BrushWrapMode. Default is BrushWrapMode.Tile
For type == BrushType.RadialGradient:
- param1: center point coords of radial gradient in form of Array(2) (for ex.: [50, 50])
- param2: radius values for X and Y axes in form of Array(2) (for ex.: [50, 50])
- param3: gradient stops specified as an array with alternating position and color values for each stop (for ex.: [0.0, 0xFF000000, 0.5, 0xFFFF0000, 1.0, 0xFFFFFFFF])
- param4: wrap mode responsible for how the gradient is repeated when drawing. See BrushWrapMode. Default is BrushWrapMode.Tile
For type == BrushType.Bitmap:
- param1: D2DBitmap object used for drawing by brush
- param2: wrap mode responsible for how the image is repeated when drawing. See BrushWrapMode

Parameters

NameTypeDescription
typeBrushType
param1*
param2 = undefinedoptional*
param3 = undefinedoptional*
param4 = undefinedoptional*

Returns

D2DBrush —

Brush object used in Draw/Fill methods

Example source

samples/basic/Brushes.jsopen source
method

Compile

js/d2d.js:1093
Compile(source, entryPoint, target, flags)

Compiles Direct2D shader.

Parameters

NameTypeDescription
sourcestring

Shader source code (ASCII HLSL code)

entryPoint = "main"optionalstring

The name of the shader entry point function where shader execution begins.

target = ""optionalstring

A string that specifies the shader target or set of shader features to compile against.
The shader target can be shader model 2, shader model 3, shader model 4, or shader model 5.
For full target list see https://learn.microsoft.com/en-us/windows/win32/direct3dhlsl/specifying-compiler-targets
Default value: "ps_5_0" if Direct2D 1.1 or higher is available on the system, otherwise "ps_4_0".

flags = 0x4A008optionalD2DCompileFlags

Affects compiler flags. D2DCompileFlags
For flags values see: https://learn.microsoft.com/en-us/windows/win32/direct3dhlsl/d3dcompile-constants
Default value: D3DCOMPILE_OPTIMIZATION_LEVEL3 | D3DCOMPILE_IEEE_STRICTNESS | D3DCOMPILE_WARNINGS_ARE_ERRORS | D3DCOMPILE_PACK_MATRIX_ROW_MAJOR
Example for debug build: D3DCOMPILE_DEBUG | D3DCOMPILE_SKIP_OPTIMIZATION | D3DCOMPILE_ALL_RESOURCES_BOUND | D3DCOMPILE_PACK_MATRIX_ROW_MAJOR

Returns

D2DCompileInfo —

Result of compiling shader source

Example

include(`${fb.ComponentPath}\\docs\\Effects.js`);

window.DrawMode = 1;

// Simple colour inversion shader
const shaderSource = `
    // Input texture (Direct2D passed it into t0)
    Texture2D InputTexture : register(t0);
    SamplerState InputSampler : register(s0);

    // Direct2D input data structure
    struct VS_OUTPUT {
        float4 clipSpacePos : SV_POSITION;
        float4 sceneSpacePos : SCENE_POS;
        float4 texelSpacePos : TEXEL_POS;
    };

    // Simple color inversion shader
    float4 main(VS_OUTPUT input) : SV_Target
    {
        // Selecting a pixel from an input image
        float4 color = InputTexture.Sample(InputSampler, input.texelSpacePos.xy);
	
        // Invert RGB, keep alpha
        return float4(1.0 - color.rgb, color.a) * color.a;
    }
`;

const img = d2d.Image(`${fb.ComponentPath}\\samples\\d2d\\images\\Flowers.jpg`);
const effect = d2d.Effect(Effects.CustomShader.ID);
effect.SetInput(0, img);

const shaderCode = d2d.Compile(shaderSource);
if (shaderCode.Error !== "") 
    fb.ShowPopupMessage(shaderCode.Error, "Direct2D compile error!");
else
    effect.SetValue(Effects.CustomShader.ShaderCode, shaderCode.Code);

function on_paint(dgr) {	
    dgr.DrawEffect(effect, 10, 10, 0, 0, img.Width, img.Height);
}
method

CreateImage

js/d2d.js:990
CreateImage(w, h)

Parameters

NameTypeDescription
wnumber
hnumber

Returns

D2DBitmap
method

CreateImageFromPixelData

js/d2d.js:997
CreateImageFromPixelData(pixelData, width, height, format = "bgra32")

Create D2DBitmap from raw pixel data in memory.

Parameters

NameTypeDescription
pixelDataUint8Array

Raw pixel bytes

widthnumber

Image width in pixels

heightnumber

Image height in pixels

format = "bgra32"optionalstring

Pixel format string (default: "bgra32") Supported formats:
"bgra32" 32bpp BGRA
"rgba32" 32bpp RGBA
"bgr24" 24bpp BGR
"rgb24" 24bpp RGB

Returns

D2DBitmap —

null if was an error (for example pixelData array length is not suitable for the specified parameters)

Example source

samples/basic/CreateImageFromPixelData.jsopen source
method

Effect

js/d2d.js:1085
Effect(CLSID)

Creates Direct2D effect.
Minimum system requirements: Windows 7 Platform Update (Direct2D 1.1)

Parameters

NameTypeDescription
CLSIDstring

CLSID of Direct2D effect. See Effects for effects' CLSID.

Returns

D2DEffect
method

Font

js/d2d.js:1015
Font(name, size_px, style)

Performance note: avoid using inside on_paint.
Performance note II: try caching and reusing D2DFont objects, since the maximum amount of such objects is hard-limited by Windows. D2DFont creation will fail after reaching this limit.

Parameters

NameTypeDescription
namestring
size_pxnumber

See Point2Pixel function for conversions

style = 0optionalnumber

See FontStyle flags

Returns

?D2DFont —

null, if font is not present.

method

Image

js/d2d.js:1028
Image(path)

Load image from file.

Performance note: consider using d2d.LoadImageAsync or d2d.LoadImageAsyncV2 if there are a lot of images to load or if the image is big.

Parameters

NameTypeDescription
pathstring

Returns

?D2DBitmap —

null, if image failed to load.

Example

let img = d2d.Image('e:\\images folder\\my_image.png');
method

LoadImageAsync

js/d2d.js:1042
LoadImageAsync(window_id, path)

Load image from file asynchronously.

Parameters

NameTypeDescription
window_idnumber

unused

pathstring

Returns

number —

a unique id, which is used in on_load_image_done.

Example source

samples/basic/LoadImageAsync.jsopen source
method

LoadImageAsyncV2

js/d2d.js:1053
LoadImageAsyncV2(window_id, path)

Load image from file asynchronously. Returns a Promise object, which will be resolved when image loading is done.

Parameters

NameTypeDescription
window_idnumber

unused

pathstring

Returns

Promise.<?D2DBitmap>

Example source

samples/basic/LoadImageAsyncV2.jsopen source
method

LoadSVG

js/d2d.js:1065
LoadSVG(path_or_xml, max_width)

Loads rasterized image from SVG file or XML string

Parameters

NameTypeDescription
path_or_xmlstring

string containing SVG file path or raw XML

max_width = 0optionalnumber

If specified rasterizes with width = max_width and height according to the proportions, otherwise uses "width" and "height" attributes in SVG header if exist

Returns

?D2DBitmap —

Rasterized bitmap, null in case of error

Example

const svg_file = fb.ComponentPath + 'samples\\svg\\android.svg';

const original = d2d.LoadSVG(svg_file);
const large = d2d.LoadSVG(svg_file, 512); // set optional max_width

function on_paint(gr) {
    gr.DrawImage(original, 0, 0, original.Width, original.Height, 0, 0, original.Width, original.Height);
    gr.DrawImage(large, original.Width, 0, large.Width, large.Height, 0, 0, large.Width, large.Height);
}