Difference between revisions of "Graphics"

From Xojo Documentation

(Removing DrawPolygon and FillPolygon since both are deprecated as of 2020r1.)
Line 48: Line 48:
 
{{Method | name=DrawPath | params=path as [[GraphicsPath]] | description=DrawPath(path as GraphicsPath)
 Draws a bezier line along the path designated.}}
 
{{Method | name=DrawPath | params=path as [[GraphicsPath]] | description=DrawPath(path as GraphicsPath)
 Draws a bezier line along the path designated.}}
 
{{Method | name=DrawPicture | params=Image as [[Picture]],  X as [[Integer]],  Y as [[Integer]]  [,DestWidth as [[Integer]] ]  [, DestHeight as [[Integer]] ]  [, SourceX as [[Integer]] ] [, SourceY as [[Integer]] ]  [, SourceWidth as [[Integer]] ] [, SourceHeight as [[Integer]]] | description=DrawPicture(Image as Picture,  X as Integer,  Y as Integer  [,DestWidth as Integer ]  [, DestHeight as Integer ]  [, SourceX as Integer ] [, SourceY as Integer ]  [, SourceWidth as Integer ] [, SourceHeight as Integer])
Draws the picture at the specified location }}
 
{{Method | name=DrawPicture | params=Image as [[Picture]],  X as [[Integer]],  Y as [[Integer]]  [,DestWidth as [[Integer]] ]  [, DestHeight as [[Integer]] ]  [, SourceX as [[Integer]] ] [, SourceY as [[Integer]] ]  [, SourceWidth as [[Integer]] ] [, SourceHeight as [[Integer]]] | description=DrawPicture(Image as Picture,  X as Integer,  Y as Integer  [,DestWidth as Integer ]  [, DestHeight as Integer ]  [, SourceX as Integer ] [, SourceY as Integer ]  [, SourceWidth as Integer ] [, SourceHeight as Integer])
Draws the picture at the specified location }}
{{Method | name=DrawPolygon | params=Points() as [[Integer]] | description=DrawPolygon(Points() as Integer)
Draws a polygon using the values in the 1-based array passed as the X and Y coordinates }}
 
 
{{Method | name=DrawRectangle | params=X as [[Integer]],  Y as [[Integer]],  Width as [[Integer]],  Height as [[Integer]] | description=DrawRectangle(X as Integer,  Y as Integer,  Width as Integer,  Height as Integer)
Draws the outline of a rectangle in the current color. }}
 
{{Method | name=DrawRectangle | params=X as [[Integer]],  Y as [[Integer]],  Width as [[Integer]],  Height as [[Integer]] | description=DrawRectangle(X as Integer,  Y as Integer,  Width as Integer,  Height as Integer)
Draws the outline of a rectangle in the current color. }}
 
{{Method | name=DrawRoundRectangle | params=X as [[Integer]],  Y as [[Integer]], Width as [[Integer]],  Height as [[Integer]],  ArcWidth as [[Integer]],  ArcHeight as [[Integer]] | description=DrawRoundRectangle(X as Integer,  Y as Integer, Width as Integer,  Height as Integer,  ArcWidth as Integer,  ArcHeight as Integer)
Draws the outline of a rounded rectangle in the current color. }}
 
{{Method | name=DrawRoundRectangle | params=X as [[Integer]],  Y as [[Integer]], Width as [[Integer]],  Height as [[Integer]],  ArcWidth as [[Integer]],  ArcHeight as [[Integer]] | description=DrawRoundRectangle(X as Integer,  Y as Integer, Width as Integer,  Height as Integer,  ArcWidth as Integer,  ArcHeight as Integer)
Draws the outline of a rounded rectangle in the current color. }}
Line 55: Line 54:
 
{{Method | name=FillOval | params=X as [[Integer]],  Y as [[Integer]],  Width as [[Integer]],  Height as [[Integer]] | description=FillOval(X as Integer,  Y as Integer,  Width as Integer,  Height as Integer)
Draws an oval filled with the current color. The current color is set with the DrawingColor property. }}
 
{{Method | name=FillOval | params=X as [[Integer]],  Y as [[Integer]],  Width as [[Integer]],  Height as [[Integer]] | description=FillOval(X as Integer,  Y as Integer,  Width as Integer,  Height as Integer)
Draws an oval filled with the current color. The current color is set with the DrawingColor property. }}
 
{{Method | name=FillPath | params=path as [[GraphicsPath]] | description=FillPath(path as GraphicsPath)
Draws a bezier line along the path designated and fills the region with the current DrawingColor value.}}
 
{{Method | name=FillPath | params=path as [[GraphicsPath]] | description=FillPath(path as GraphicsPath)
Draws a bezier line along the path designated and fills the region with the current DrawingColor value.}}
{{Method | name=FillPolygon | params=Points() as [[Integer]] | description=FillPolygon(Points() as Integer)
Draws a polygon using the values in the 1-based array passed as the x and y coordinates. }}
 
 
{{Method | name=FillRectangle | params=X as [[Integer]],  Y as [[Integer]],  Width as [[Integer]],  Height as [[Integer]] | description=FillRectangle(X as Integer,  Y as Integer,  Width as Integer,  Height as Integer)
Draws a rectangle filled with the current color. }}
 
{{Method | name=FillRectangle | params=X as [[Integer]],  Y as [[Integer]],  Width as [[Integer]],  Height as [[Integer]] | description=FillRectangle(X as Integer,  Y as Integer,  Width as Integer,  Height as Integer)
Draws a rectangle filled with the current color. }}
 
{{Method | name=FillRoundRectangle | params=X as [[Integer]],  Y as [[Integer]],  Width as [[Integer]],  Height as [[Integer]],  ArcWidth as [[Integer]],  ArcHeight as [[Integer]] | description=FillRoundRectangle(X as Integer,  Y as Integer,  Width as Integer,  Height as Integer,  ArcWidth as Integer,  ArcHeight as Integer)
Draws a rounded rectangle filled with the current color. }}
 
{{Method | name=FillRoundRectangle | params=X as [[Integer]],  Y as [[Integer]],  Width as [[Integer]],  Height as [[Integer]],  ArcWidth as [[Integer]],  ArcHeight as [[Integer]] | description=FillRoundRectangle(X as Integer,  Y as Integer,  Width as Integer,  Height as Integer,  ArcWidth as Integer,  ArcHeight as Integer)
Draws a rounded rectangle filled with the current color. }}

Revision as of 16:13, 27 February 2020


For web apps, see WebGraphics.

Class (inherits from Object)

Graphics class objects are used for drawing text, lines, rectangles, ovals, and pictures. Normally you use a graphics object in response to a Canvas.Paint event, but you can also perform direct drawing by using the Graphics property of a Picture. Alternatively, you can create vector graphics using the subclasses of the Object2D class. You cannot create a meaningful Graphics object via the New command.

Properties
AntiAliasMode FontName PrintingCancelled fa-lock-32.png
AntiAliased FontSize ScaleX
Bold FontUnit ScaleY
CharacterSpacing Handle fa-lock-32.png Transparency
Copies fa-lock-32.png Height fa-lock-32.png Underline
DrawingColor Italic Width fa-lock-32.png
FirstPage fa-lock-32.png LastPage fa-lock-32.png
FontAscent fa-lock-32.png PenSize

The X and Y parameters of the methods are the horizontal and vertical coordinates of the left-top corner of the object being drawn or cleared. The origin (0,0) is the top-left corner of the control or window in which the drawing is being done.
For example, 50,50 is 50 pixels to the right and 50 pixels down from the top-left of the window or control.

Methods
ClearRectangle DrawPicture FillRoundRectangle
Clip DrawRectangle NextPage
DrawCautionIcon DrawRoundRectangle TextDirection
DrawLine DrawStopIcon TextHeight
DrawNoteIcon DrawText TextHeight
DrawObject FillOval TextWidth
DrawOval FillPath
DrawPath FillRectangle
Enumerations
HandleTypes

Alpha Channel Support

The Transparency property takes a value between 0.0 (opaque) and 100.0 (transparent) that can be used to obtain "fading" effects (amongst other uses) by setting the transparency to a value greater than 0.0.

When rendering colors or pictures with alpha channel information, the Transparency property is composited with the alpha channel information. This allows you to perform uniform fading operations easily and efficiently.

On Windows, using the Transparency property only works on Picture.Graphics if the Picture was created with a depth of 32, or is a Picture with an alpha channel. Attempting to use it on other forms of Pictures will result in an UnsupportedOperationException.

Sample Code

This example uses the Paint event handler of a Canvas control to draw the text “The quick brown fox” in Helvetica bold, italic, 18 point, 50 pixels from the top of and 10 pixels from the left side of the control.

Sub Paint(g As Graphics)
g.Bold = True
g.Italic = True
g.FontName = "Helvetica"
g.FontSize = 18
g.DrawText("The quick brown fox", 10, 50)

This example draws a triangle in a Canvas control. It is placed in the Paint event. The parameter g as Graphics is passed into this event.

Var points() As Integer
points = Array(10, 10, 100, 50, 10, 200, 10, 10)
g.DrawingColor = RGB(100, 200, 255)
g.FillPolygon(points)

This example uses the Clip method to define child Graphics items within the parent Canvas. The code is in the Paint event of a Canvas. The two clippings define regions at the top of the canvas and the DrawOval method draws object in each one. Notice that the first call tries to draw an oval that is wider than the region. It is truncated in the drawing.

Var myClip As Graphics = g.Clip(0, 0, 150, 15)
Var myClip2 As Graphics = g.Clip(150, 0, 150, 15)

// draw the border of the Canvas..
g.DrawingColor = &c000000
g.DrawRectangle(0, 0, g.Width, g.Height)

// draw into the first area...
myClip.DrawingColor = &cff0000
myClip.DrawRectangle(0, 0, myClip.Width, myClip.Height) // draw the border of the area..
myClip.DrawOval(0, 0, 200, 15) // the oval does not appear outside the region despite the call

// draw into the second area...
myClip2.DrawingColor = &c0000ff
myClip2.DrawRectangle(0, 0, myClip2.Width, myClip2.Height) // draw the border of the area
myClip2.DrawOval(0, 0, 150, 15)

See Also

Canvas control; Window, ContainerControl class.