ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / WLanguage / WLanguage functions / Controls, pages and windows / Drawing functions
  • Gradient parameters
  • Drawing in Browser code
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Draws a rectangle:
  • in an Image control,
  • WINDEVWEBDEV - Server codeReports and QueriesWindowsLinuxUser code (UMC) in a variable of type Image.
  • WINDEVWEBDEV - Server code in a variable of type WDPic (on the background layer),
  • WINDEVWEBDEV - Server code in a variable of type picLayer.
Remark: To draw custom rectangles, it is recommended to use dBorder.
Linux Caution: A specific configuration is required to use this function in Linux. For more details, see The drawings.
Example
// Draw a rectangle whose background changes from red to blue
// via yellow
dStartDrawing(IMG_Image1)
dRectangleGradient(10, 20, 100, 150, LightRed, LightBlue, 0, LightYellow, 30)
Syntax

Drawing a rectangle by specifying the points of the rectangle and the gradient Hide the details

dRectangleGradient([<Image>, ] <X1> , <Y1> , <X2> , <Y2> , <Start color> , <End color> [, <Angle> [, <Color 3> [, <Distance color 3> [, <Color 4> [, <Distance color 4>]]]]])
<Image>: Optional control name or optional Image, WDPic or picLayer variable
Reports and QueriesWindowsLinuxAndroidiPhone/iPadIOS WidgetMac CatalystJavaUser code (UMC) Image to use. The image can correspond to:
  • the name of an Image control.
  • the name of a variable of type Image.
  • WINDEVWEBDEV - Server code the name of a variable of type WDPic. Only the background layer will be handled.
  • WINDEVWEBDEV - Server code the name of a variable of type picLayer.
If this parameter is not specified, it is necessary to define the drawing destination with dStartDrawing.
<X1>: Integer
X-coordinate (in pixels) of the upper-left corner of the rectangle.
<Y1>: Integer
Y-coordinate (in pixels) of the upper-left corner of the rectangle.
<X2>: Integer
X-coordinate (in pixels) of the lower-right corner of the rectangle.
<Y2>: Integer
Y-coordinate (in pixels) of the lower-right corner of the rectangle.
<Start color>: Integer or constant
Start color of the gradient. This color can correspond to:
<End color>: Integer or constant
End color of the gradient. This color can correspond to:
<Angle>: Optional integer
Angle that will be used for the selection of colors in the gradient. The angle value is included between 0 (horizontal angle, default value) and 360°.
AndroidJava Only the following angles can be used: 0,90,180,270,360.
<Color 3>: Optional constant or integer
Color that will be used in the gradient. This color can correspond to:
AndroidJava This parameter is not available.
<Distance color 3>: Optional integer
Percentage separating the start color from color 3.
AndroidJava This parameter is not available.
<Color 4>: Optional constant or integer
Color that will be used in the gradient. This color can correspond to:
AndroidJava This parameter is not available.
<Distance color 4>: Optional integer
Percentage separating the start color from color 4.
AndroidJava This parameter is not available.
WINDEVWEBDEV - Server codeiPhone/iPadIOS WidgetMac Catalyst

Drawing a rectangle by specifying the points of the rectangle and by using the Background type Hide the details

dRectangleGradient([<Image>, ] <X1> , <Y1> , <X2> , <Y2> , <Gradient>)
<Image>: Optional control name or optional Image, WDPic or picLayer variable
Reports and QueriesWindowsLinuxiPhone/iPadIOS WidgetMac CatalystUser code (UMC) Image to use. The image can correspond to:
  • the name of an Image control.
  • the name of a variable of type Image.
  • WINDEVWEBDEV - Server code the name of a variable of type WDPic. Only the background layer will be handled.
  • WINDEVWEBDEV - Server code the name of a variable of type picLayer.
If this parameter is not specified, it is necessary to define the drawing destination with dStartDrawing.
<X1>: Integer
X-coordinate (in pixels) of the upper-left corner of the rectangle.
<Y1>: Integer
Y-coordinate (in pixels) of the upper-left corner of the rectangle.
<X2>: Integer
X-coordinate (in pixels) of the lower-right corner of the rectangle.
<Y2>: Integer
Y-coordinate (in pixels) of the lower-right corner of the rectangle.
<Gradient>: Background variable
Name of the Background variable the with the gradient characteristics.
WINDEVWEBDEV - Server codeAndroidiPhone/iPadIOS WidgetMac CatalystJava

Drawing a rectangle by using the Rectangle type and by specifying the gradient Hide the details

dRectangleGradient([<Image>, ] <Rectangle> , <Start color> , <End color> [, <Angle> [, <Color 3> [, <Distance color 3> [, <Color 4> [, <Distance color 4>]]]]])
<Image>: Optional control name or optional Image, WDPic or picLayer variable
Reports and QueriesWindowsLinuxAndroidiPhone/iPadIOS WidgetMac CatalystJavaUser code (UMC) Image to use. The image can correspond to:
  • the name of an Image control.
  • the name of a variable of type Image.
  • WINDEVWEBDEV - Server code the name of a variable of type WDPic. Only the background layer will be handled.
  • WINDEVWEBDEV - Server code the name of a variable of type picLayer.
If this parameter is not specified, it is necessary to define the drawing destination with dStartDrawing.
<Rectangle>: Rectangle variable
Name of the Rectangle variable that defines the coordinates of the rectangle to draw.
<Start color>: Integer or constant
Start color of the gradient. This color can correspond to:
<End color>: Integer or constant
End color of the gradient. This color can correspond to:
<Angle>: Optional integer
Angle that will be used for the selection of colors in the gradient. The angle value is included between 0 (horizontal angle, default value) and 360°.
<Color 3>: Optional constant or integer
Color that will be used in the gradient. This color can correspond to:
<Distance color 3>: Optional integer
Percentage separating the start color from color 3.
<Color 4>: Optional constant or integer
Color that will be used in the gradient. This color can correspond to:
<Distance color 4>: Optional integer
Percentage separating the start color from color 4.
WINDEVWEBDEV - Server codeiPhone/iPadIOS WidgetMac Catalyst

Drawing a rectangle by using the Rectangle type and the Background type Hide the details

dRectangleGradient([<Image>, ] <Rectangle> , <Gradient>)
<Image>: Optional control name or optional Image, WDPic or picLayer variable
Reports and QueriesWindowsLinuxiPhone/iPadIOS WidgetMac CatalystUser code (UMC) Image to use. The image can correspond to:
  • the name of an Image control.
  • the name of a variable of type Image.
  • WINDEVWEBDEV - Server code the name of a variable of type WDPic. Only the background layer will be handled.
  • WINDEVWEBDEV - Server code the name of a variable of type picLayer.
If this parameter is not specified, it is necessary to define the drawing destination with dStartDrawing.
<Rectangle>: Rectangle variable
Name of the Rectangle variable that defines the coordinates of the rectangle to draw.
<Gradient>: Background variable
Name of the Background variable the with the gradient characteristics.
Remarks

Gradient parameters

The color parameters are used as follows:
The angle is used to define the orientation of the gradient.
Gradients with 3 or 4 colors are only available for 0 or 90 degree angles.
Remark: The gradient colors are not available for some systems (Windows 98 or Me for example) or for TSE 256 colors. In this case, a rectangle whose color corresponds to <Start color> is displayed.
WEBDEV - Browser code

Drawing in Browser code

Some drawing functions are available in Browser code. The drawing functions in Browser code are based on the HTML 5 standard. More specifically, these functions are based on the "canvas" tag of HTML 5.
The drawing features in browser code are available for the recent browsers only (supporting the HTML 5 standard). To find out whether the drawing features are proposed by your browser, use DrawingAvailable.
Caution: To use the drawing functions with Internet Explorer 9, the project must include the reference to the DTD file. To do so, the HTML mode must be "HTML 4.01 Transitional + DTD". This option is available in the "Advanced" tab of the project description window.
Reminder: To open the project description window, go to the "Project" tab, "Project" group and click "Description".
Special case: Drawing in the browser of an Android phone: The browser drawing functions are only available starting with version 3 of Android.
Related Examples:
The drawing functions Unit examples (WINDEV): The drawing functions
[ + ] Using the main drawing functions of WINDEV to:
- Initialize an Image control for drawing
- Draw simple shapes
- Write a text into a drawing
- Change the color in a drawing
Business / UI classification: Neutral code
Component: wd290pnt.dll
Minimum version required
  • Version 12
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 06/22/2023

Send a report | Local help