🧩 PathMaker
An extension for MIT App Inventor 2.Developed by th using Fast. An Extension to render animated text paths with customizable properties such as text size, color, stroke and width settings. This component supports both synchronous and asynchronous modes for rendering text paths, allowing for smooth animations and dynamic visual representations.
Specifications
Size: 46.31 KB
Version: 1.0
Minimum API Level: 7
Updated On: 2025-02-17T18:30:00Z
Built & documented using: FAST-CLI
Paid Price - Dollar - 2💲 PayPal
INR - 175rs.
Contact Me pm here @TechHamara
Telegram: here
More info Check Out Here
Find more Extension here
Demo
YouTube
Documentation
Events:
PathMaker has total 5 events.
OnAnimationStart
Event raised when animation starts
OnAnimationEnd
Event raised when animation ends
OnAnimationCancel
Event raised when animation is cancelled
OnAnimationRepeat
Event raised when animation repeats
OnProgressChanged
Event raised when progress changes. Returns current progress value between 0 and 1
| Parameter | Type |
|---|---|
| progress | number |
Methods:
PathMaker has total 29 methods.
InitializeTextPath
Initialize a TextPathView inside an arrangement. Pass true for Sync mode or false for Async mode.
| Parameter | Type |
|---|---|
| arrangement | component |
| syncMode | boolean |
SetPenPainter
Set a custom painter for the path effect (pen painter).
StartAnimation
Start the path animation with default parameters (0 to 1).
StartAnimationWithPositions
Start the animation from the given start and end positions.
| Parameter | Type |
|---|---|
| start | number |
| end | number |
CustomStartAnimation
Start the animation with additional parameters for style and repeat count.
| Parameter | Type |
|---|---|
| start | number |
| end | number |
| animationStyle | number |
| repeatCount | number |
StopAnimation
Stop the animation.
PauseAnimation
Pause the animation.
ResumeAnimation
Resume the animation.
Clear
Clear the animation path.
SetAnimationStyle
Set the animation style. 0 = Linear, 1 = Ease-In-Out.
| Parameter | Type |
|---|---|
| style | number |
SetRepeatCount
Set the repeat count for the animation.
| Parameter | Type |
|---|---|
| count | number |
SetPercentage
Set the animation percentage manually. Value should be between 0.0 and 1.0.
| Parameter | Type |
|---|---|
| percentage | number |
GetRepeatCount
Get the current repeat count for the animation.
SetArrowPainter
Set the Arrow painter with specified radius and angle (in pixels and radians respectively)
| Parameter | Type |
|---|---|
| radius | number |
| angle | number |
SetFireworksPainter
Set the Fireworks painter with specified radius and angle (in pixels and radians respectively)
| Parameter | Type |
|---|---|
| radius | number |
| angle | number |
GetCurrentPainterRadius
Get the current painter's radius in pixels
GetCurrentPainterAngle
Get the current painter's angle in radians
IsRepeatTypeNone
Check if the current repeat type is NONE.
IsRepeatTypeRestart
Check if the current repeat type is RESTART.
IsRepeatTypeReverse
Check if the current repeat type is REVERSE.
CalculateAround
Calculate animation progress with Around strategy (for text path).
| Parameter | Type |
|---|---|
| progress | number |
CalculateLinear
Calculate animation progress with Linear strategy
| Parameter | Type |
|---|---|
| progress | number |
CalculateEaseIn
Calculate animation progress with Ease-In strategy
| Parameter | Type |
|---|---|
| progress | number |
CalculateEaseOut
Calculate animation progress with Ease-Out strategy
| Parameter | Type |
|---|---|
| progress | number |
SetCustomPathPainter
Set a custom path painter effect for the text path.
| Parameter | Type |
|---|---|
| radius | number |
| color | number |
SetPathCalculator
Set a predefined PathCalculator. This method allows you to specify which type of PathCalculator to use for controlling the animation path. You can choose from predefined calculators such as MidCalculator, AroundCalculator, and BlinkCalculator. The calculator determines how the start and end values of the path are calculated based on the animation progress.
Parameters:
- calculatorType: An integer representing the type of PathCalculator to use. Use constants CALCULATOR_MID = 0, CALCULATOR_AROUND = 1, CALCULATOR_BLINK = 2 to select the desired calculator.
| Parameter | Type |
|---|---|
| calculatorType | number |
SetTextSize
Set the text size for the text path.
| Parameter | Type |
|---|---|
| textSize | number |
SetTextColor
Set the color for the text path (in ARGB format).
| Parameter | Type |
|---|---|
| color | number |
SetTextStrokeWidth
Set the stroke width for the text path (in pixels).
| Parameter | Type |
|---|---|
| strokeWidth | number |
Setters:
PathMaker has total 16 setter properties.
SetText
Set the text to be displayed as a path (in percentage).
- Input type:
text
SetStrokeWidth
Set the stroke width for the text path (in pixels).
- Input type:
number
SetRadius
Set the radius for the text path (in pixels).
- Input type:
number
SetAngle
Set the angle for the text path (in radians).
- Input type:
number
SetStart
Set the start position of the animation (0 to 1).
- Input type:
number
SetEnd
Set the end position of the animation (0 to 1).
- Input type:
number
SetShowPainter
Set whether to show the painter (true if shown) (in percentage).
- Input type:
boolean
SetShowPainterActually
Set whether to show the painter actually (true if shown) (in percentage).
- Input type:
boolean
ShowFillColorText
Set whether to show fill color text (true if shown) (in percentage).
- Input type:
boolean
SetDuration
Set the duration for the animation (in milliseconds).
- Input type:
number
SetRepeatStyle
Set the repeat style for the animation (NONE, RESTART, REVERSE).
- Input type:
number
SetShowInStart
Set whether to show the text path at the beginning (true if shown at the beginning).
- Input type:
boolean
SetTextInCenter
Set whether to center the text (true if centered).
- Input type:
boolean
SetPaintStrokeWidth
Set the width of the paint effect stroke (in pixels).
- Input type:
number
SetPaintStrokeColor
Set the color of the paint effect stroke (in ARGB format).
- Input type:
number
SetRepeatType
Set the repeat type of the animation (NONE, RESTART, REVERSE).
- Input type:
number
Getters:
PathMaker has total 9 getter properties.
Radius
Get the radius of the text path (in pixels).
- Return type:
number
Start
Get the start position of the animation (0 to 1).
- Return type:
number
End
Get the end position of the animation (0 to 1).
- Return type:
number
AutoStart
Get the auto start setting (true if started automatically).
- Return type:
boolean
ShowInStart
Get the show in start setting (true if shown at the beginning).
- Return type:
boolean
TextInCenter
Get the text in center setting (true if centered).
- Return type:
boolean
PaintStrokeWidth
Get the current paint stroke width (in pixels).
- Return type:
number
PaintStrokeColor
Get the current paint stroke color.
- Return type:
number
RepeatType
Get the current repeat type.
- Return type:
number
Thanks
TechHamara