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