Skip to content

IJSGraphics

Note

In component version 3.4.0, there have been breaking changes in how gradients are handled. See this page for more information.

Methods

Clear(colour)#

3.3.3

Arguments
colour number

Clears entire panel with colour.

No return value.

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

Arguments
centreX number
centreY number
radiusX number
radiusY number
line_width number
colour number,string As of 3.4.0, this can be a solid colour or gradient.

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.Clear(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,string As of 3.4.0, this can be a solid colour or gradient.

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,string As of 3.4.0, this can be a solid colour or gradient.

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,string As of 3.4.0, this can be a solid colour or gradient.

No return value.

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

Arguments
centreX number
centreY number
radiusX number
radiusY number
colour number,string As of 3.4.0, this can be a solid colour or gradient.

No return value.

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

Arguments
x number
y number
w number
h number
colour number,string As of 3.4.0, this can be a solid colour or gradient.

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,string As of 3.4.0, this can be a solid colour or gradient.

No return value.

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

Arguments
text string
font string See note below.
colour number, string string is only supported in component version 3.3.19 or later. See note below.
x number
y number
w number
h number
text_alignment DWRITE_TEXT_ALIGNMENT Default 0.
paragraph_alignment DWRITE_PARAGRAPH_ALIGNMENT Default 0.
word_wrapping DWRITE_WORD_WRAPPING Default 0.
trimming_granularity DWRITE_TRIMMING_GRANULARITY Default 0.

No return value.

Note

The font must be in string form and this can come directly from using window.GetFontCUI / window.GetFontDUI. See the dedicated Fonts page for how to create/manipulate your own.

Note

If you want to apply a single colour to all of the text, simply supply a number. If supplying a string, it must a stringified array. See Styling Ranges Of Text.

See Styling Ranges Of Text for more advanced usage notes.

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

Arguments
text_layout ITextLayout
colour number, string string is only supported in component version 3.1.11 or later. See note below.
x number
y number
w number
h number
vertical_offset number Default 0.

Note

If you want to apply a single colour to all of the text, simply supply a number. If supplying a string, it must a stringified array. See Styling Ranges Of Text.

See utils.CreateTextLayout and utils.CreateTextLayout2 for examples.