CanvasView

CanvasView is an area in which you can draw. To create a CanvasView, the function is used:

func NewCanvasView(session Session, params Params) CanvasView

CanvasView has only one additional property: "draw-function" (DrawFunction constant).Using this property, a drawing function is set with the following description

func(Canvas)

where Canvas is the drawing context with which to draw

The Canvas interface contains a number of functions for customizing styles, text and drawing itself.

All coordinates and sizes are set only in pixels, so SizeUnit is not used when drawing.float64 used everywhere

Setting the line style

The following functions of the Canvas interface are used to customize the line color:

  • SetSolidColorStrokeStyle(color Color) - the line will be drawn with a solid color
  • SetLinearGradientStrokeStyle(x0, y0 float64, color0 Color, x1, y1 float64, color1 Color, stopPoints []GradientPoint) -the line will be drawn using a linear gradient.The gradient starts at x0, y0, and color0, and the gradient ends at x1, y1, and color1.The []GradientPoint array specifies the intermediate points of the gradient.If there are no intermediate points, then nil can be passed as the last parameter
  • SetRadialGradientStrokeStyle(x0, y0, r0 float64, color0 Color, x1, y1, r1 float64, color1 Color, stopPoints []GradientPoint) -the line will be drawn using a radial gradient.x0, y0, r0, color0 - center coordinates, radius and color of the starting circle.x1, y1, r1, color1 - center coordinates, radius and color of the end circle.The []GradientPoint array specifies intermediate points of the gradient

The GradientPoint structure is described as

type GradientPoint struct {
	Offset float64
	Color Color
}

where Offset is a value in the range from 0 to 1 specifies the relative position of the intermediate point, Color is the color of this point.

Line width in pixels is set by the function

SetLineWidth(width float64)

The type of line ends is set using the function

SetLineCap(cap int)

where cap can take the following values

Value Constant View
0 ButtCap The ends of lines are squared off at the endpoints. Default value.
1 RoundCap The ends of lines are rounded. The center of the circle is at the end point.
2 SquareCap the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.

The shape used to connect two line segments at their intersection is specified by the function

SetLineJoin(join int)

where join can take the following values

Value Constant View
0 MiterJoin Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the miterLimit property
1 RoundJoin rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
2 BevelJoin Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.

By default, a solid line is drawn. If you want to draw a broken line, you must first set the pattern using the function

SetLineDash(dash []float64, offset float64)

where dash []float64 specifies the line pattern in the form of alternating line lengths and gaps.The second argument is the offset of the template relative to the beginning of the line.

Example

canvas.SetLineDash([]float64{16, 8, 4, 8}, 0)

The line is drawn as follows: a 16-pixel segment, then an 8-pixel gap, then a 4-pixel segment, then an 8-pixel gap, then a 16-pixel segment again, and so on.

Setting the fill style

The following functions of the Canvas interface are used to customize the fill style:

  • SetSolidColorFillStyle(color Color) - the shape will be filled with a solid color
  • SetLinearGradientFillStyle(x0, y0 float64, color0 Color, x1, y1 float64, color1 Color, stopPoints []GradientPoint) -the shape will be filled with a linear gradient.The gradient starts at x0, y0, and color0, and the gradient ends at x1, y1, and color1.The []GradientPoint array specifies the intermediate points of the gradient.If there are no intermediate points, then nil can be passed as the last parameter
  • SetRadialGradientFillStyle(x0, y0, r0 float64, color0 Color, x1, y1, r1 float64, color1 Color, stopPoints []GradientPoint) -the shape will be filled with a radial gradient.x0, y0, r0, color0 - center coordinates, radius and color of the starting circle.x1, y1, r1, color1 - center coordinates, radius and color of the end circle.Array []GradientPoint specifies intermediate points of the gradient