dotted_line_array

Description:

dotted line array

dotted_line_array #
This Flutter Canvas library allows you to draw dotted straight line and arc with the array syntax of html5 canvas.
Features #
Similar to this, this library lets you draw dotted line and arc with varying gaps and lengths using the HTML5 canvas's setLineDash() array syntax.
Getting started #
Import this package and follow the syntax provided below.
Usage #
setLineDash()



Parameter
Class//type
Description




canvas
Canvas
Canvas object


point1
Offset
Beginning point


point2
Offset
End point


paint
Paint
Paint object


lineDash
List
Array of numbers as specified by the HTML5 Canvas API's docs. Each number describes a length in pixels.



setArcDash()



Parameter
Class//type
Description




canvas
Canvas
Canvas object


x
double
Center of the arc X


y
double
Center of the arc Y


radiusX
double
Arc horizontal radius


radiusY
double
Arc vertical radius


paint
Paint
Paint object


startAngle
double
Starting angle in degrees


sweepAngle
double
Clockwise sweep amount starting from startAngle, also in degrees


lineDash
List
Array of numbers as specified by the HTML5 Canvas API's docs. Each number describes a length in degrees.



Note: For the setArcDash, I find thinking about each of the dashes' length in degrees, rather than in pixels, more intuitive.
Instead of "this arc dash, when straightened, is 5 pixels long", we can say: "this arc dash, for a circle of radius x, is 30 degrees in length"
Syntax Comparisons #
Dart
const lineDash = [2, 20];

//straight line
setLineDash(canvas, point1, point2, paint, lineDash);

//Circle or ellipse
setArcDash(canvas, x, y, radiusX, radiusY, paint, startAngle, sweepAngle, lineDash);
copied to clipboard
JavaScript
ctx.setLineDash([2, 20]);

//Straight Line
ctx.lineTo(x1, y1, x2, y2);

//Circle
ctx.arc(x, y, radius, startAngle, endAngle, [, counterclockwise]);

//Circle or Ellipse
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise]);

ctx.stroke();
copied to clipboard
Result comparisons (Flutter: purple background, HTML5: white) #
Note: The Flutter examples were captured on a smaller device.
[2, 20]


[5, 10, 12]


[1, 20, 0, 5, 2]


[20, 3, 3, 3, 3, 3, 3, 3]


Example Combining Straight Lines with Arcs #
With [5, 5] for lines and [7.8, 7.8] for arcs #

With [1.0, 2.0, 3.0, 4.0] for lines and [2.0, 4.0, 6.0, 8.0] for arcs #

UI design by Natawan Meechai
UI src: https://github.com/Khongchai/yawwn/blob/main/lib/widgets/progress/dotted_line_path_points.dart