paint method
Called whenever the object needs to paint. The given Canvas has its
coordinate space configured such that the origin is at the top left of the
box. The area of the box is the size of the size argument.
Paint operations should remain inside the given area. Graphical operations outside the bounds may be silently ignored, clipped, or not clipped. It may sometimes be difficult to guarantee that a certain operation is inside the bounds (e.g., drawing a rectangle whose size is determined by user inputs). In that case, consider calling Canvas.clipRect at the beginning of paint so everything that follows will be guaranteed to only draw within the clipped area.
Implementations should be wary of correctly pairing any calls to Canvas.save/Canvas.saveLayer and Canvas.restore, otherwise all subsequent painting on this canvas may be affected, with potentially hilarious but confusing results.
To paint text on a Canvas, use a TextPainter.
To paint an image on a Canvas:
-
Obtain an ImageStream, for example by calling ImageProvider.resolve on an AssetImage or NetworkImage object.
-
Whenever the ImageStream's underlying ImageInfo object changes (see ImageStream.addListener), create a new instance of your custom paint delegate, giving it the new ImageInfo object.
-
In your delegate's paint method, call the Canvas.drawImage, Canvas.drawImageRect, or Canvas.drawImageNine methods to paint the ImageInfo.image object, applying the ImageInfo.scale value to obtain the correct rendering size.
Implementation
@override
void paint(Canvas canvas, Size size) {
final scaleX = size.width / 19.0;
final scaleY = size.height / 20.066666666666666;
final scale = math.min(scaleX, scaleY);
final translationX = (size.width - 19.0 * scale) / 2 - 2.5 * scale;
final translationY = (size.height - 20.066666666666666 * scale) / 2 - 2.0 * scale;
final path = Path();
final paint = Paint()..color = color;
path.moveTo(
10.5 * scale + translationX,
20.0 * scale + translationY,
);
path.lineTo(
5.5 * scale + translationX,
20.0 * scale + translationY,
);
path.cubicTo(
4.947715250169207 * scale + translationX,
20.0 * scale + translationY,
4.5 * scale + translationX,
19.552284749830793 * scale + translationY,
4.5 * scale + translationX,
19.0 * scale + translationY,
);
path.lineTo(
4.5 * scale + translationX,
5.0 * scale + translationY,
);
path.cubicTo(
4.5 * scale + translationX,
4.447715250169207 * scale + translationY,
4.947715250169207 * scale + translationX,
4.0 * scale + translationY,
5.5 * scale + translationX,
4.0 * scale + translationY,
);
path.lineTo(
10.5 * scale + translationX,
4.0 * scale + translationY,
);
path.lineTo(
10.5 * scale + translationX,
7.0 * scale + translationY,
);
path.cubicTo(
10.500000263546278 * scale + translationX,
8.65685452793982 * scale + translationY,
11.843146083007786 * scale + translationX,
10.000000347401329 * scale + translationY,
13.500000402331352 * scale + translationX,
10.000000298023224 * scale + translationY,
);
path.lineTo(
16.5 * scale + translationX,
10.0 * scale + translationY,
);
path.cubicTo(
16.5 * scale + translationX,
10.552284749830793 * scale + translationY,
16.947715250169207 * scale + translationX,
11.0 * scale + translationY,
17.5 * scale + translationX,
11.0 * scale + translationY,
);
path.cubicTo(
18.052284749830793 * scale + translationX,
11.0 * scale + translationY,
18.5 * scale + translationX,
10.552284749830793 * scale + translationY,
18.5 * scale + translationX,
10.0 * scale + translationY,
);
path.lineTo(
18.5 * scale + translationX,
9.0 * scale + translationY,
);
path.cubicTo(
18.5 * scale + translationX,
9.0 * scale + translationY,
18.5 * scale + translationX,
9.0 * scale + translationY,
18.5 * scale + translationX,
8.94 * scale + translationY,
);
path.cubicTo(
18.489582738768142 * scale + translationX,
8.848134430197735 * scale + translationY,
18.469470669920085 * scale + translationX,
8.757630120381467 * scale + translationY,
18.43999902967916 * scale + translationX,
8.66999954378082 * scale + translationY,
);
path.lineTo(
18.44 * scale + translationX,
8.58 * scale + translationY,
);
path.cubicTo(
18.391919677917 * scale + translationX,
8.477180103356682 * scale + translationY,
18.327784551151748 * scale + translationX,
8.382665179702625 * scale + translationY,
18.2500007532147 * scale + translationX,
8.300000342557919 * scale + translationY,
);
path.lineTo(
18.25 * scale + translationX,
8.3 * scale + translationY,
);
path.lineTo(
12.25 * scale + translationX,
2.3000000000000007 * scale + translationY,
);
path.lineTo(
12.25 * scale + translationX,
2.3000000000000007 * scale + translationY,
);
path.cubicTo(
12.167335668437762 * scale + translationX,
2.2222162969886416 * scale + translationY,
12.072820744783703 * scale + translationX,
2.1580811702233884 * scale + translationY,
11.970000494026298 * scale + translationX,
2.1100000870840026 * scale + translationY,
);
path.cubicTo(
11.94014953342436 * scale + translationX,
2.10576013726435 * scale + translationY,
11.909849933486598 * scale + translationX,
2.10576013726435 * scale + translationY,
11.879999734461308 * scale + translationX,
2.1099999528378257 * scale + translationY,
);
path.lineTo(
11.56 * scale + translationX,
2.0 * scale + translationY,
);
path.lineTo(
5.5 * scale + translationX,
2.0 * scale + translationY,
);
path.cubicTo(
3.8431458445892073 * scale + translationX,
2.000000010226537 * scale + translationY,
2.5000000251276986 * scale + translationX,
3.343145829688045 * scale + translationY,
2.500000074505806 * scale + translationX,
5.000000149011611 * scale + translationY,
);
path.lineTo(
2.5 * scale + translationX,
19.0 * scale + translationY,
);
path.cubicTo(
2.500000025127699 * scale + translationX,
20.65685488556769 * scale + translationY,
3.843145844589206 * scale + translationX,
22.0000007050292 * scale + translationY,
5.500000163912771 * scale + translationX,
22.000000655651093 * scale + translationY,
);
path.lineTo(
10.5 * scale + translationX,
22.0 * scale + translationY,
);
path.cubicTo(
11.052284749830793 * scale + translationX,
22.0 * scale + translationY,
11.5 * scale + translationX,
21.552284749830793 * scale + translationY,
11.5 * scale + translationX,
21.0 * scale + translationY,
);
path.cubicTo(
11.5 * scale + translationX,
20.447715250169207 * scale + translationY,
11.052284749830793 * scale + translationX,
20.0 * scale + translationY,
10.5 * scale + translationX,
20.0 * scale + translationY,
);
path.close();
path.moveTo(
12.5 * scale + translationX,
5.41 * scale + translationY,
);
path.lineTo(
15.09 * scale + translationX,
8.0 * scale + translationY,
);
path.lineTo(
13.5 * scale + translationX,
8.0 * scale + translationY,
);
path.cubicTo(
12.947715250169207 * scale + translationX,
8.0 * scale + translationY,
12.5 * scale + translationX,
7.552284749830793 * scale + translationY,
12.5 * scale + translationX,
7.0 * scale + translationY,
);
path.close();
path.moveTo(
7.5 * scale + translationX,
8.0 * scale + translationY,
);
path.cubicTo(
6.947715250169207 * scale + translationX,
8.0 * scale + translationY,
6.5 * scale + translationX,
8.447715250169207 * scale + translationY,
6.5 * scale + translationX,
9.0 * scale + translationY,
);
path.cubicTo(
6.5 * scale + translationX,
9.552284749830793 * scale + translationY,
6.947715250169207 * scale + translationX,
10.0 * scale + translationY,
7.5 * scale + translationX,
10.0 * scale + translationY,
);
path.lineTo(
8.5 * scale + translationX,
10.0 * scale + translationY,
);
path.cubicTo(
9.052284749830793 * scale + translationX,
10.0 * scale + translationY,
9.5 * scale + translationX,
9.552284749830793 * scale + translationY,
9.5 * scale + translationX,
9.0 * scale + translationY,
);
path.cubicTo(
9.5 * scale + translationX,
8.447715250169207 * scale + translationY,
9.052284749830793 * scale + translationX,
8.0 * scale + translationY,
8.5 * scale + translationX,
8.0 * scale + translationY,
);
path.close();
path.moveTo(
21.130000000000003 * scale + translationX,
13.86 * scale + translationY,
);
path.cubicTo(
20.894693029264396 * scale + translationX,
13.66965217439122 * scale + translationY,
20.585838504729306 * scale + translationX,
13.596115382835245 * scale + translationY,
20.290000000000003 * scale + translationX,
13.66 * scale + translationY,
);
path.cubicTo(
19.523197821035367 * scale + translationX,
13.821578769059903 * scale + translationY,
18.723836527171688 * scale + translationX,
13.650806129007211 * scale + translationY,
18.08999934170429 * scale + translationX,
13.189999520015453 * scale + translationY,
);
path.cubicTo(
17.738580237339264 * scale + translationX,
12.933204326636503 * scale + translationY,
17.261419762660744 * scale + translationX,
12.933204326636504 * scale + translationY,
16.910000000000004 * scale + translationX,
13.19 * scale + translationY,
);
path.cubicTo(
16.27564240413343 * scale + translationX,
13.649638083651181 * scale + translationY,
15.476799565107703 * scale + translationX,
13.820299962897586 * scale + translationY,
14.710000374683373 * scale + translationX,
13.660000347938464 * scale + translationY,
);
path.cubicTo(
14.410799781845272 * scale + translationX,
13.595654939952793 * scale + translationY,
14.098608326602054 * scale + translationX,
13.671859777057557 * scale + translationY,
13.862704093519623 * scale + translationX,
13.86682195315874 * scale + translationY,
);
path.cubicTo(
13.626799860437194 * scale + translationX,
14.061784129259923 * scale + translationY,
13.493159277598872 * scale + translationX,
14.35403552197461 * scale + translationY,
13.500000000000004 * scale + translationX,
14.66 * scale + translationY,
);
path.lineTo(
13.500000000000004 * scale + translationX,
17.0 * scale + translationY,
);
path.cubicTo(
13.496846641218477 * scale + translationX,
18.451400636530632 * scale + translationY,
14.17887264919489 * scale + translationX,
19.819159315570285 * scale + translationY,
15.339999179085973 * scale + translationX,
20.689998892782835 * scale + translationY,
);
path.lineTo(
16.9 * scale + translationX,
21.8 * scale + translationY,
);
path.cubicTo(
17.255555555555553 * scale + translationX,
22.066666666666666 * scale + translationY,
17.744444444444444 * scale + translationX,
22.066666666666666 * scale + translationY,
18.099999999999998 * scale + translationX,
21.8 * scale + translationY,
);
path.lineTo(
19.659999999999997 * scale + translationX,
20.64 * scale + translationY,
);
path.cubicTo(
20.80711580109168 * scale + translationX,
19.779746486103537 * scale + translationY,
21.487489686099334 * scale + translationX,
18.433789452718823 * scale + translationY,
21.499998849436007 * scale + translationX,
16.999999090251727 * scale + translationY,
);
path.lineTo(
21.5 * scale + translationX,
14.63 * scale + translationY,
);
path.cubicTo(
21.498022158083458 * scale + translationX,
14.330916744326423 * scale + translationY,
21.362276984336614 * scale + translationX,
14.048420031393801 * scale + translationY,
21.129999999999995 * scale + translationX,
13.860000000000001 * scale + translationY,
);
path.close();
path.moveTo(
19.5 * scale + translationX,
17.0 * scale + translationY,
);
path.cubicTo(
19.509550177455793 * scale + translationX,
17.814208977763563 * scale + translationY,
19.13999579911393 * scale + translationX,
18.586577628498056 * scale + translationY,
18.499999026521934 * scale + translationX,
19.089998995475877 * scale + translationY,
);
path.lineTo(
17.5 * scale + translationX,
19.81 * scale + translationY,
);
path.lineTo(
16.5 * scale + translationX,
19.09 * scale + translationY,
);
path.cubicTo(
15.860002359170808 * scale + translationX,
18.586577628498056 * scale + translationY,
15.490447980828947 * scale + translationX,
17.814208977763563 * scale + translationY,
15.499999184383242 * scale + translationX,
16.999999105452588 * scale + translationY,
);
path.lineTo(
15.5 * scale + translationX,
15.72 * scale + translationY,
);
path.cubicTo(
16.199413382127993 * scale + translationX,
15.688572339451154 * scale + translationY,
16.882864744732498 * scale + translationX,
15.500623214734915 * scale + translationY,
17.499999535427637 * scale + translationX,
15.169999597282128 * scale + translationY,
);
path.cubicTo(
18.117134326122777 * scale + translationX,
15.500623214734915 * scale + translationY,
18.80058568872728 * scale + translationX,
15.688572339451154 * scale + translationY,
19.499999482333653 * scale + translationX,
15.719999582681282 * scale + translationY,
);
path.close();
path.moveTo(
10.5 * scale + translationX,
16.05 * scale + translationY,
);
path.lineTo(
7.5 * scale + translationX,
16.05 * scale + translationY,
);
path.cubicTo(
6.947715250169207 * scale + translationX,
16.05 * scale + translationY,
6.5 * scale + translationX,
16.497715250169207 * scale + translationY,
6.5 * scale + translationX,
17.05 * scale + translationY,
);
path.cubicTo(
6.5 * scale + translationX,
17.602284749830794 * scale + translationY,
6.947715250169207 * scale + translationX,
18.05 * scale + translationY,
7.5 * scale + translationX,
18.05 * scale + translationY,
);
path.lineTo(
10.5 * scale + translationX,
18.05 * scale + translationY,
);
path.cubicTo(
11.052284749830793 * scale + translationX,
18.05 * scale + translationY,
11.5 * scale + translationX,
17.602284749830794 * scale + translationY,
11.5 * scale + translationX,
17.05 * scale + translationY,
);
path.cubicTo(
11.5 * scale + translationX,
16.497715250169207 * scale + translationY,
11.052284749830793 * scale + translationX,
16.05 * scale + translationY,
10.5 * scale + translationX,
16.05 * scale + translationY,
);
path.close();
path.moveTo(
11.5 * scale + translationX,
12.05 * scale + translationY,
);
path.lineTo(
7.5 * scale + translationX,
12.05 * scale + translationY,
);
path.cubicTo(
6.947715250169207 * scale + translationX,
12.05 * scale + translationY,
6.5 * scale + translationX,
12.497715250169207 * scale + translationY,
6.5 * scale + translationX,
13.05 * scale + translationY,
);
path.cubicTo(
6.5 * scale + translationX,
13.602284749830794 * scale + translationY,
6.947715250169207 * scale + translationX,
14.05 * scale + translationY,
7.5 * scale + translationX,
14.05 * scale + translationY,
);
path.lineTo(
11.5 * scale + translationX,
14.05 * scale + translationY,
);
path.cubicTo(
12.052284749830793 * scale + translationX,
14.05 * scale + translationY,
12.5 * scale + translationX,
13.602284749830794 * scale + translationY,
12.5 * scale + translationX,
13.05 * scale + translationY,
);
path.cubicTo(
12.5 * scale + translationX,
12.497715250169207 * scale + translationY,
12.052284749830793 * scale + translationX,
12.05 * scale + translationY,
11.5 * scale + translationX,
12.05 * scale + translationY,
);
path.close();
canvas.drawPath(path, paint);
}