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 |
As of component version 3.6.0 , this may contain $rgb code. |
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 be a stringified array. See Styling Ranges Of Text. $rgb
code in the text
always takes precedence so if an array is supplied at the same time, it will be ignored.
See Styling Ranges Of Text for more advanced usage notes.
WriteText2(text, font, colour, x, y, w, h[, text_alignment, paragraph_alignment, word_wrapping, trimming_granularity])
#
3.6.0
Arguments | ||
---|---|---|
text | string |
May contain $rgb and $font code. |
font | string |
See note below. |
colour | number |
|
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
Unlike the original WriteText
, the font and colour arguments are for a single font/colour only. Arrays are not
supported because $rgb
and $font
code in the text
are both supported. These are the defaults used whenever
$rgb()
and $font()
without arguments are used to end styling on a word/sentence.
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.
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.