Questions tagged [flutter-canvas]

78 questions
0
votes
0 answers

How to add text to flutter Analog Clock using canvas CustomPainter?

I just learned about making Analog Clock with flutter CustomPainter, and I know to make every hour mark with canvas.drawline(p1, p2, dashBrush). this is my Analog clock hour mark code : var outerCircleRadius = radius; var innerCircleRadius = radius…
DVCone
  • 109
  • 2
  • 12
0
votes
0 answers

Flutter/Mediapipe: how to save a Flutter Canvas/CustomPainter with mediapipe pose outline to an image file?

We are using code shown below from this package package:google_mlkit_pose_detection/google_mlkit_pose_detection.dart (on https://pub.dev/packages/google_mlkit_pose_detection) to save the phone camera image with mediapipe pose outline to an image…
0
votes
0 answers

How do I erase a section from custom paint on flutter?

So I have this custom paint which gets ui.Image of a mask and an image both drawn on canvas. Now I made the mask be painted blue for this example but my goal is to save the canvas after I manage to completely delete the blue masked area (see example…
0
votes
0 answers

Flutter Web Canvas: Inconsistent rendering of paths-difference

Background Assume a game using fog-of-war drawn using Flutter Web Canvas. Each vessel has a range-of-sight. This range-of-sight is "removed" from the fog-of-war and appears as white background. The range-of-sight as well as the fog-of-war are Paths.…
Dabbel
  • 2,468
  • 1
  • 8
  • 25
0
votes
1 answer

Draw widget in Flutter

I want to draw the widget like this: For detail, I will use coordinates. The angle (0, 0), (0, 1) and (1, 1) is easy, the cross line from (0,6, 0) to (1, 1) is easy too, but the border in (0,6, 0) is so hard for me. Any ideal to draw this border?
I'm MasY
  • 19
  • 3
0
votes
1 answer

Canvas position is hard to determine in flutter

I was playing with flutter custom painter and it's behavior seems to be pretty hard to understand. As you can see in the above image although I've specified to draw from the top of the screen it starts from above and displays a semi circle. What i…
SVG
  • 809
  • 6
  • 21
0
votes
0 answers

How to fill an image on flutter canvas?

I have a class that extends CustomPainter, which helps me to draw an image on the canvas (with canvas.drawImage) and plot some points (with canvas.drawLine and canvas.drawPath) on top of the image. However, I have trouble figuring out how to scale…
yshean
  • 331
  • 3
  • 9
0
votes
0 answers

How to draw a list of images with circular border in dart canvas?

I need to draw a list of images with canvas, and I need that each image has a circular border: expected: but what I implemented is: my code is: for (int i = 0; i < participants.length; i++) { Completer completer =…
Parisa Baastani
  • 1,713
  • 14
  • 31
0
votes
1 answer

How to split a circle into 16 equal parts using drawLine()

I'm trying to split a circle into 16 equal parts(using 8 lines), I've tried to achieve this using the drawLine() function, so far what I have is pretty interesting, but now I'm stuck, besides, with what I have, the center horizontal and vertical…
0
votes
0 answers

How can I draw a head of an arrow at the end of a straight line in Canvas in Flutter

I am able to draw a straight line in flutter using two offset points. I use the following one to achieve this: canvas.drawLine(lines[i].path[j], lines[i].path[j + 1], paint); I am struggling to find a way to draw a little arrow head at the end of…
Damandroid
  • 756
  • 9
  • 31
0
votes
1 answer

Flutter : How to draw a vertical sine wave inside a container?

How can I draw something like this inside a container in flutter?. PS I am new to flutter. Thanks in advance.
user17549713
  • 84
  • 1
  • 10
0
votes
1 answer

Problem containing flutter widget created with Custom Painter inside a box and also problem with zooming and panning the widget

I have created this districts map view widget with Custom Painter. I multiple paths and drew the paths using canvas as: class MyPainter extends CustomPainter { Function(String) setState; final BuildContext context; MyPainter(this.context,…
anoncgain
  • 375
  • 3
  • 14
0
votes
0 answers

Cannot perform drawing after canvas is zoom-in, zoom-out and translated in flutter with a an image on it

Aim : I want to make an image marking functionality i.e drawing on an image along with zoom-in and zoom-out functions. For that I have used a canvas with an image on it and flutter Transform widget to achieve zoom and translation. I have succeeded…
Dinesh
  • 33
  • 5
0
votes
2 answers

Circular wave animation in Flutter with Canvas - Charts

I'm trying to create an animation using Canvas from Flutter. The animation that I'm trying to do is something like this: Example: I managed to do some animations, but none are like what I need. I would be grateful if someone who has already worked…
0
votes
1 answer

Painting Stroked/Bordered Text on Canvas

I'm trying to paint stroked text on a canvas. in my editor, I created the stroked text effect by stacking two text widegts: class TextDataView extends ElementView { final String placeholderText; TextDataView(TextData data, {required…
Ali Qanbari
  • 2,923
  • 1
  • 12
  • 28