Flutter package support draw canvas shapes
Support shapes
- Rectangle
- Circle
- Line
- Arrow
- Chat bubble
- Custom shape by extend AbstractShape
Getting started
To use this plugin, add magic_canvas
as a dependency in your pubspec.yaml file.
Usage
Here is a simple example, see more detail at /example
Board(
children: [
RectangleShape(
borderColor: Colors.red,
location: const Offset(5, 5),
size: const Size(30, 50),
color: Colors.orange,
),
CircleShape(
borderColor: Colors.red,
location: const Offset(50, 5),
size: const Size(30, 50),
color: Colors.orange,
text: 'Hello'
),
color: Colors.grey,
size: const Size(1280, 720),
],
)
Libraries
- magic_canvas
- painter/board_painter
- painter/painter
- shape/abstract_shape
- shape/arrow_shape
- This is a Dart code file named "arrow_shape.dart". It contains the implementation of the ArrowShape class, which is a subclass of the LineShape class. The ArrowShape represents an arrow shape with a specified location, length, width, color, and style. It overrides the draw method to draw the arrow shape on a canvas using the provided parameters. The draw method calculates the arrowhead points based on the start and end offsets of the line, and then draws the arrowhead and the line using the calculated points. If the arrow shape is highlighted or selected, it applies a blue color to the shape. The ArrowShape class is part of the "magic_canvas" package.
- shape/chat_bubble_shape
- This is a Dart code from the file chat_bubble_shape.dart. It defines a class ChatBubbleShape that extends TextBoxShape. The ChatBubbleShape represents a chat bubble shape with an optional arrow pointing to a specific location. It provides methods to draw the chat bubble shape, draw the highlight when selected or highlighted, and draw the border decoration. The class also handles resizing and translation of the chat bubble shape. The programming language used is Dart.
- shape/circle_shape
- This is a Dart code file named circle_shape.dart. It contains the implementation of a CircleShape class which extends the TextBoxShape class. The CircleShape class represents a circular shape with customizable properties such as location, size, color, border, and text. It overrides the drawObject, drawDecorate, and isOverObject methods to provide specific functionality for drawing and interaction. The drawObject method draws the circle shape on the canvas using the provided paint object. The drawDecorate method is responsible for drawing the border of the circle shape if a border color is specified. The isOverObject method checks if a given offset is inside the circle shape. Overall, this code provides a way to create and manipulate circle shapes in a canvas.
- shape/image_shape
- This is a Dart code file named image_shape.dart.
- shape/line_shape
- This is a Dart file named line_shape.dart. It contains the implementation of the LineShape class, which is a subclass of AbstractShape. The LineShape represents a line on a canvas with specified length, width, location, color, and style. It can be drawn on a canvas and has functionality for resizing, removing, and translating. The LineShape also has methods for checking if a point is over the line and getting the start and end offsets. This code is written in the Dart programming language.
- shape/rectangle_shape
- This file contains the implementation of the RectangleShape class, which is a subclass of AbstractShape. It represents a rectangular shape with customizable properties such as border color and border radius. The class provides methods to draw the shape on a canvas, including highlighting, decorating, and handling interactive points. It also defines the positions and behaviors of resize and remove points for the shape.
- shape/shape
- shape/text_box_shape
- A class representing a text box shape that extends the RectangleShape class. It contains properties such as text, textAlign, textStyle, _isEditing, and methods such as draw, startEdit, and endEdit.
- utils/extension
- utils/utils
- widget/board
- widget/widget