Canvas Image: Difference between revisions

From FlightGear wiki
Jump to navigation Jump to search
(Created page with "Category:Canvas Elements {{Template:Canvas Navigation}} = Properties = == file == <syntaxhighlight lang="php"> # Use file inside default search paths img.set("file", "g...")
 
(7 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Canvas Elements]]
[[Category:Canvas Elements]]
{{Template:Canvas Navigation}}
{{Template:Canvas Navigation}}
= setPixel =
* '''Version''': FlightGear >= 2020.1
* '''Format''': setPixel(x_position, y_position, color)
* '''Color Format''': Can be a vector of size 3 or 4 (rgba as 0 to 1). Or a string with hexadecimal colors, for example "#7f3f1f".
Will change a single pixel to a specified color in the image. End the changing by calling dirtyPixels.
setPixel and fillRect is typically used when having to change an image alot. So to avoid using possibly hundreds of path elements on top of the image, changing the image pixel colors is more efficient.
= dirtyPixels =
* '''Version''': FlightGear >= 2020.1
After operations on setPixel is done, the method dirtyPixels() must be run.
= fillRect =
* '''Version''': FlightGear >= 2020.1
* '''Format''': fillRect(dimension, color)
* '''Dimension Format''': Can be a vector of size 4 [x_position,y_position,x_size,y_size]. The numbers is in absolute pixel coordinates, not 0 to 1.
* '''Color Format''': Can be a vector of size 3 or 4 (rgba as 0 to 1). Or a string with hexadecimal colors, for example "#7f3f1f".
Will fill a specified rectangle inside the image with a specified color.


= Properties =
= Properties =


== file ==
Additionally to the properties supported by every [[Canvas Element]], Canvas Images support the following properties:


<syntaxhighlight lang="php">
== src ==
 
* '''Version''': FlightGear >= 3.1
* '''Format''': [<protocol>://]<path> (Supported protocols: canvas://, <nowiki>http://</nowiki>)
 
<syntaxhighlight lang="nasal">
# Use file inside default search paths
# Use file inside default search paths
img.set("file", "gui/dialogs/images/exit.png");
img.set("src", "gui/dialogs/images/exit.png");


# Show canvas with index 3
# Show canvas with index 3
img.set("file", "canvas://by-index/texture[3]");
img.set("src", "canvas://by-index/texture[3]");
 
# Download and show FlightGear logo
img.set("src", "http://wiki.flightgear.org/skins/common/images/icons-fg-135.png");


# Show canvas available as object
# Show canvas available as object
img.set("file", my_canvas.getPath());
img.set("src", my_canvas.getPath());
</syntaxhighlight>
</syntaxhighlight>


Line 27: Line 55:
Image background color. Each pixel is modulated with the background color. If the image shall be displayed unchanged use white as background color.
Image background color. Each pixel is modulated with the background color. If the image shall be displayed unchanged use white as background color.


<syntaxhighlight lang="php">
<syntaxhighlight lang="nasal">
# White with alpha of 0.5 (=half transparent)
# White with alpha of 0.5 (=half transparent)
img.set("fill", "rgba(255,255,255,0.5)");
img.set("fill", "rgba(255,255,255,0.5)");
Line 40: Line 68:
* '''Default''': (empty) (disabled)
* '''Default''': (empty) (disabled)


Image slicing (or scale-9, 9-slice) is a technique for dividing an image into nine regions. While scaling such an image the four corner regions will be shown undistorted, whereas the other regions are scaled to fit into the remaining parts. See the CSS3 [http://www.w3.org/TR/css3-background/#border-image-slice border-image-slice] property for more information.
Image slicing (or scale-9, 9-slice) is a technique for dividing an image into nine regions. While scaling such an image the four corner regions will be shown undistorted, whereas the other regions are scaled to fit into the remaining parts. See the CSS3 [https://www.w3.org/TR/css-backgrounds-3/#the-border-image-slice border-image-slice] property for more information.


<syntaxhighlight lang="php">
<syntaxhighlight lang="nasal">
# Top/bottom offset 10%, left/right offset 5%, fill center
# Top/bottom offset 10%, left/right offset 5%, fill center
img.set("slice", "10% 5% fill");
img.set("slice", "10% 5% fill");
Line 58: Line 86:
* '''Default''': (empty) (disabled)
* '''Default''': (empty) (disabled)


Let the image extend outside its specified size. The areas extending outside the original dimensions are just draw but not included in the bounding box, and therefore ignored for event handling and distance/margin calculations. This could be used for example to draw a shadow around an element which is ignored for handling events.
Let the image extend outside its specified size. The areas extending outside the original dimensions are just drawn but not included in the bounding box, and therefore ignored for event handling and distance/margin calculations. This could be used, for example, to draw a shadow around an element which is ignored for handling events.


<syntaxhighlight lang="php">
<syntaxhighlight lang="nasal">
# Top outset 10%, left/right outset 5%, bottom outset 10 pixels
# Top outset 10%, left/right outset 5%, bottom outset 10 pixels
img.set("outset", "10% 5% 10");
img.set("outset", "10% 5% 10");
Line 70: Line 98:
img.set("outset", "");
img.set("outset", "");
</syntaxhighlight>
</syntaxhighlight>
== file (deprecated) ==
* '''Version''': FlightGear <= 3.0
Same as ''src''. Use ''src'' with FlightGear >= 3.1.

Revision as of 10:07, 30 April 2020


setPixel

  • Version: FlightGear >= 2020.1
  • Format: setPixel(x_position, y_position, color)
  • Color Format: Can be a vector of size 3 or 4 (rgba as 0 to 1). Or a string with hexadecimal colors, for example "#7f3f1f".

Will change a single pixel to a specified color in the image. End the changing by calling dirtyPixels.

setPixel and fillRect is typically used when having to change an image alot. So to avoid using possibly hundreds of path elements on top of the image, changing the image pixel colors is more efficient.

dirtyPixels

  • Version: FlightGear >= 2020.1

After operations on setPixel is done, the method dirtyPixels() must be run.

fillRect

  • Version: FlightGear >= 2020.1
  • Format: fillRect(dimension, color)
  • Dimension Format: Can be a vector of size 4 [x_position,y_position,x_size,y_size]. The numbers is in absolute pixel coordinates, not 0 to 1.
  • Color Format: Can be a vector of size 3 or 4 (rgba as 0 to 1). Or a string with hexadecimal colors, for example "#7f3f1f".

Will fill a specified rectangle inside the image with a specified color.

Properties

Additionally to the properties supported by every Canvas Element, Canvas Images support the following properties:

src

  • Version: FlightGear >= 3.1
  • Format: [<protocol>://]<path> (Supported protocols: canvas://, http://)
# Use file inside default search paths
img.set("src", "gui/dialogs/images/exit.png");

# Show canvas with index 3
img.set("src", "canvas://by-index/texture[3]");

# Download and show FlightGear logo
img.set("src", "http://wiki.flightgear.org/skins/common/images/icons-fg-135.png");

# Show canvas available as object
img.set("src", my_canvas.getPath());

x/y

size

fill

  • Format: <color> (#rrggbb, rbg(r,g,b), rgba(r,g,b,a) [r,g,b -> 0-255; a -> 0.0-1.0])
  • Default: #ffffff (white)

Image background color. Each pixel is modulated with the background color. If the image shall be displayed unchanged use white as background color.

# White with alpha of 0.5 (=half transparent)
img.set("fill", "rgba(255,255,255,0.5)");

# red completely opaque
img.set("fill", "#ff0000");

slice

  • Format: [<number>%?]{1,4} fill?
  • Default: (empty) (disabled)

Image slicing (or scale-9, 9-slice) is a technique for dividing an image into nine regions. While scaling such an image the four corner regions will be shown undistorted, whereas the other regions are scaled to fit into the remaining parts. See the CSS3 border-image-slice property for more information.

# Top/bottom offset 10%, left/right offset 5%, fill center
img.set("slice", "10% 5% fill");

# All offsets 8 pixels, only draw border and do not fill center
img.set("slice", "8");

# Disable slicing
img.set("slice", "");

outset

  • Format: [<number>%?]{1,4}
  • Default: (empty) (disabled)

Let the image extend outside its specified size. The areas extending outside the original dimensions are just drawn but not included in the bounding box, and therefore ignored for event handling and distance/margin calculations. This could be used, for example, to draw a shadow around an element which is ignored for handling events.

# Top outset 10%, left/right outset 5%, bottom outset 10 pixels
img.set("outset", "10% 5% 10");

# All offsets 8 pixels
img.set("outset", "8");

# Disable outset
img.set("outset", "");

file (deprecated)

  • Version: FlightGear <= 3.0

Same as src. Use src with FlightGear >= 3.1.