IJSGraphics

This example covers a few of the more basic ellipse/rounded rectangle methods which are different from previous versions.

Example

// ==PREPROCESSOR==
// @name "Rectangle + Ellipse"
// @author "marc2003"
// @import "%fb2k_component_path%helpers.txt"
// ==/PREPROCESSOR==

var colour = RGB(255, 0, 0);

function on_paint(gr) {
    gr.DrawRectangle(0, 0, 200, 200, 1, colour);

    // first 2 values are the centre of the shape
    gr.DrawEllipse(100, 100, 50, 50, 1, colour);

    // first 2 values are the centre of the shape
    gr.FillEllipse(500, 100, 50, 50, colour);

    gr.FillRoundedRectangle(0, window.Height - 201, 200, 200, 50, 50, colour);
    gr.DrawRoundedRectangle(window.Width - 200, window.Height - 201, 200, 200, 50, 50, 1, colour);
}

Methods

`DrawEllipse(centreX, centreY, radiusX, radiusY, line_width, colour)`#

Arguments
centreX	`number`
centreY	`number`
radiusX	`number`
radiusY	`number`
line_width	`number`
colour	`number`

No return value.

`DrawImage(image, dstX, dstY, dstW, dstH, srcX, srcY, srcW, srcH[, opacity, angle])`#

Arguments
image	IJSImage
dstX	`number`
dstY	`number`
dstW	`number`
dstH	`number`
srcX	`number`
srcY	`number`
srcW	`number`
srcH	`number`
opacity	`number`	Floating point number between `0` and `1`. Default `1`.
angle	`number`	Default `0`.

No return value.

Note

This differs from previous versions where alpha has been replaced with opacity. Also, angle is now the last argument.

`DrawImageWithMask(image, mask_image, x, y, w, h)`#

Arguments
image	IJSImage
mask_image	IJSImage
x	`number`
y	`number`
w	`number`
h	`number`

Example

Because this method does not support src co-ords, this sample makes the original image square first which is more suitable for a circular mask. Also included is a text mask example.

Unlike the previous ApplyMask, there should be no white background. Just draw black for where you want to keep.

Mask images don't have to have the same width/height.

// ==PREPROCESSOR==
// @name "DrawImageWithMask"
// @author "marc2003"
// @import "%fb2k_component_path%helpers.txt"
// ==/PREPROCESSOR==

var temp_gr;

var circular_mask = utils.CreateImage(512, 512);
temp_gr = circular_mask.GetGraphics();
temp_gr.FillEllipse(256, 256, 256, 256, RGB(0, 0, 0));
circular_mask.ReleaseGraphics();
temp_gr = null;

var text_mask = utils.CreateImage(512, 512);
temp_gr = text_mask.GetGraphics();
temp_gr.DrawRectangle(0, 0, 512, 512, 10, RGB(0, 0, 0));
temp_gr.WriteText("MASK", JSON.stringify({Size:160,Weight:900}), RGB(0, 0, 0), 0, 0, 512, 512, 2, 2);
text_mask.ReleaseGraphics();
temp_gr = null;

var img = utils.LoadImage(fb.ComponentPath + 'samples\\images\\1.webp');
var square = make_square(img, 300);

function make_square(img, size) {
    if (!img) return null;

    if (img.Width < img.Height) {
        var src_x = 0;
        var src_w = img.Width;
        var src_h = img.Width;
        var src_y = Math.round((img.Height - src_h) / 4);
    } else {
        var src_y = 0;
        var src_w = img.Height;
        var src_h = img.Height;
        var src_x = Math.round((img.Width - src_w) / 2);
    }

    var square = utils.CreateImage(size, size);
    var temp_gr = square.GetGraphics();
    temp_gr.DrawImage(img, 0, 0, size, size, src_x, src_y, src_w, src_h);
    square.ReleaseGraphics();
    return square;
}

function on_paint(gr) {
    gr.FillRectangle(0, 0, window.Width, window.Height, RGB(255, 0, 0));
    // original image as-is
    gr.DrawImage(img, 0, 0, img.Width, img.Height, 0, 0, img.Width, img.Height);
    // squared image, no mask
    gr.DrawImage(square, 0, img.Height, square.Width, square.Height, 0, 0, square.Width, square.Height)
    // squared image, circular mask
    gr.DrawImageWithMask(square, circular_mask, 300, img.Height, square.Width, square.Height);
    // squared image, text mask
    gr.DrawImageWithMask(square, text_mask, 600, img.Height, square.Width, square.Height);
}

`DrawLine(x1, y1, x2, y2, line_width, colour)`#

Arguments
x1	`number`
y1	`number`
x2	`number`
y2	`number`
line_width	`number`
colour	`number`

No return value.

`DrawRectangle(x, y, w, h, line_width, colour)`#

Arguments
x	`number`
y	`number`
w	`number`
h	`number`
line_width	`number`
colour	`number`

No return value.

`DrawRoundedRectangle(x, y, w, h, radiusX, radiusY, line_width, colour)`#

Arguments
x	`number`
y	`number`
w	`number`
h	`number`
radiusX	`number`
radiusY	`number`
line_width	`number`
colour	`number`

No return value.

`FillEllipse(centreX, centreY, radiusX, radiusY, colour)`#

Arguments
centreX	`number`
centreY	`number`
radiusX	`number`
radiusY	`number`
colour	`number`

No return value.

`FillGradientRectangle(x, y, w, h, direction, colour1, colour2)`#

Arguments
x	`number`
y	`number`
w	`number`
h	`number`
direction	`number`	`0` vertical, `1` horizontal
colour1	`number`
colour2	`number`

No return value.

`FillGradientRectangleAdvanced(x, y, w, h, str)`#

Arguments
x	`number`
y	`number`
w	`number`
h	`number`
str	`string`	A `brush` object that needs to be stringifed. See examples below.

No return value.

This allows you to create D2D Linear and Radial brushes.

Example

Linear BrushRadial Brush

Linear Brush

// ==PREPROCESSOR==
// @name "FillGradientRectangleAdvanced (Linear)"
// @author "marc2003"
// @import "%fb2k_component_path%helpers.txt"
// ==/PREPROCESSOR==

var brush = {
    start : [0, 0], // x and y values
    end : [0, 0], // x and y values
    stops: [
        [ 0.0, RGB(227, 9, 64, 1) ],
        [ 0.33, RGB(231, 215, 2) ],
        [ 0.66, RGB(15, 168, 149) ],
        [ 1.0, RGB(19, 115, 232) ]
    ]
};

function on_paint(gr) {
    // Vertical effect
    brush.end = [0, window.Height];

    // If you wanted a horizontal effect, you'd use
    // brush.end = [window.Width, 0]

    var str = JSON.stringify(brush);
    gr.FillGradientRectangleAdvanced(0, 0, window.Width, window.Height, str);
}

Radial Brush

// ==PREPROCESSOR==
// @name "FillGradientRectangleAdvanced (Radial)"
// @author "marc2003"
// @import "%fb2k_component_path%helpers.txt"
// ==/PREPROCESSOR==

var brush = {
    centre : [0, 0], // x and y values
    radius : [0, 0], // x and y values
    stops: [
        [ 0.0, RGB(227, 9, 64, 1) ],
        [ 0.33, RGB(231, 215, 2) ],
        [ 0.66, RGB(15, 168, 149) ],
        [ 1.0, RGB(19, 115, 232) ]
    ]
};

function on_paint(gr) {
    brush.centre = [window.Width / 2, window.Height / 2];
    brush.radius = [window.Width / 2, window.Height / 2];
    var str = JSON.stringify(brush);
    gr.FillGradientRectangleAdvanced(0, 0, window.Width, window.Height, str);
}

`FillRectangle(x, y, w, h, colour)`#

Arguments
x	`number`
y	`number`
w	`number`
h	`number`
colour	`number`

No return value.

`FillRoundedRectangle(x, y, w, h, radiusX, radiusY, colour)`#

Arguments
x	`number`
y	`number`
w	`number`
h	`number`
radiusX	`number`
radiusY	`number`
colour	`number`

No return value.

`WriteText(text, font, colour, x, y, w, h[, text_alignment, paragraph_alignment, word_wrapping, trimming_granularity])`#

Arguments
text	`string`
font	`string`
colour	`number`
x	`number`
y	`number`
w	`number`
h	`number`
text_aligment	DWRITE_TEXT_ALIGNMENT	Default `0`.
paragraph_aligment	DWRITE_PARAGRAPH_ALIGNMENT	Default `0`.
word_wrapping	DWRITE_WORD_WRAPPING	Default `0`.
trimming_granularity	DWRITE_TRIMMING_GRANULARITY	Default `0`.

No return value.

The font must be in string form and this can come directly from using window.GetFontCUI / window.GetFontDUI.

If you prefer, you can create your own from scratch.

Example

var obj = {
    Name : "Segoe UI",
    Size : 16,
    Weight : 400,
    Style : 0,
    Stretch : 5,
}

var font = JSON.stringify(obj);

See Flags for all available options. None are mandatory. You can even supply an empty string and defaults of Segoe UI and a font size of 16px will be used.

It's also possible to style ranges of text with different fonts/properties/colours using an array.

Example

// ==PREPROCESSOR==
// @name "WriteTextStyles"
// @author "marc2003"
// @import "%fb2k_component_path%helpers.txt"
// ==/PREPROCESSOR==

/*
This sample splits a string in to whole words and then randomly
styles each one and updates itself twice a second. Every element
of the array which is used for styling must have a valid
start/length value. You can see how the start value is
incremented for each word.
*/

var fonts = utils.ListFonts().toArray();
var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

// split text in to whole words for styling
var arr = text.split(' ');
var styles = [];

refresh();

window.SetInterval(function () {
    refresh();
    window.Repaint();
}, 500);

function refresh() {
    styles = [];
    var start = 0;
    arr.forEach(function(item, i) {
        styles.push({
            // when using an array of styles, Start and Length are mandatory
            Start : start,
            Length : item.length + 1,
            // the following are all optional and may be omitted. Segoe UI/16px will be used if Name/Size are not specified.
            Name : fonts[Math.floor(Math.random() * fonts.length)],
            Size : 12 + Math.floor(Math.random() * 20),
            Weight : Math.round(Math.random() * 800) + 100, // values between 100-900
            Underline : Math.random() < 0.1,
            Strikethrough : Math.random() < 0.1,
            Colour : RGB(Math.random() * 200, Math.random() * 200, Math.random() * 200),
        });
        start += item.length + 1;
    });
}

function on_paint(gr) {
    gr.WriteText(text, JSON.stringify(styles), 0, 10, 10, window.Width - 20, window.Height - 20);
}

`WriteTextLayout(text_layout, colour, x, y, w, h, vertical_offset)`#

Arguments
text_layout	ITextLayout
colour	`number`
x	`number`
y	`number`
w	`number`
h	`number`
vertical_offset	`number`	Default `0`.

See utils.CreateTextLayout for an example.

IJSGraphics

DrawEllipse(centreX, centreY, radiusX, radiusY, line_width, colour)#

DrawImage(image, dstX, dstY, dstW, dstH, srcX, srcY, srcW, srcH[, opacity, angle])#

DrawImageWithMask(image, mask_image, x, y, w, h)#

DrawLine(x1, y1, x2, y2, line_width, colour)#

DrawRectangle(x, y, w, h, line_width, colour)#

DrawRoundedRectangle(x, y, w, h, radiusX, radiusY, line_width, colour)#

FillEllipse(centreX, centreY, radiusX, radiusY, colour)#

FillGradientRectangle(x, y, w, h, direction, colour1, colour2)#

FillGradientRectangleAdvanced(x, y, w, h, str)#

FillRectangle(x, y, w, h, colour)#

FillRoundedRectangle(x, y, w, h, radiusX, radiusY, colour)#

WriteText(text, font, colour, x, y, w, h[, text_alignment, paragraph_alignment, word_wrapping, trimming_granularity])#

WriteTextLayout(text_layout, colour, x, y, w, h, vertical_offset)#

`DrawEllipse(centreX, centreY, radiusX, radiusY, line_width, colour)`#

`DrawImage(image, dstX, dstY, dstW, dstH, srcX, srcY, srcW, srcH[, opacity, angle])`#

`DrawImageWithMask(image, mask_image, x, y, w, h)`#

`DrawLine(x1, y1, x2, y2, line_width, colour)`#

`DrawRectangle(x, y, w, h, line_width, colour)`#

`DrawRoundedRectangle(x, y, w, h, radiusX, radiusY, line_width, colour)`#

`FillEllipse(centreX, centreY, radiusX, radiusY, colour)`#

`FillGradientRectangle(x, y, w, h, direction, colour1, colour2)`#

`FillGradientRectangleAdvanced(x, y, w, h, str)`#

`FillRectangle(x, y, w, h, colour)`#

`FillRoundedRectangle(x, y, w, h, radiusX, radiusY, colour)`#

`WriteText(text, font, colour, x, y, w, h[, text_alignment, paragraph_alignment, word_wrapping, trimming_granularity])`#

`WriteTextLayout(text_layout, colour, x, y, w, h, vertical_offset)`#