improve Rive widget clipping and sizing

- Exposes `useArtboardSize` in RiveAnimation
- Checks to see if clipping is disabled - Artboard.clip
- Provides means to supply a custom Rect for clipping

Diffs=
fa6ed717b improve Rive widget clipping and sizing (#5154)
13863bf8f Rive Text for iOS and Android! (#5634)
9e0c43b70 Fix small bugs caught by JC (and Alex). (#5647)

Co-authored-by: Gordon <pggordonhayes@gmail.com>
This commit is contained in:
HayesGordon
2023-07-24 17:11:14 +00:00
parent f1a666d9a2
commit f999112d92
5 changed files with 55 additions and 4 deletions

View File

@ -1 +1 @@
d0c65132d98f2a82b0a51c0df7328179bdb5085d
fa6ed717b4c9e28f20cd20901f39b0dc44d8bbdd

View File

@ -1,3 +1,8 @@
## UPCOMING
- Expose `useArtboardSize` in `RiveAnimation` widget. Which is a boolean that determines whether to use the inherent size of the artboard, i.e. the absolute size defined by the artboard, or size the widget based on the available constraints only (sized by parent).
- Add `clipRect` to `RiveAnimation` and `Rive` widgets. Forces the artboard to clip with the provided Rect.
- Fixed `Rive` widget always applying a clip, regardless of `Artboard.clip` value (set in the Editor).
## 0.11.5

View File

@ -8,6 +8,7 @@ class Rive extends LeafRenderObjectWidget {
/// Artboard used for drawing
final Artboard artboard;
/// {@template Rive.useArtboardSize}
/// Determines whether to use the inherent size of the [artboard], i.e. the
/// absolute size defined by the artboard, or size the widget based on the
/// available constraints only (sized by parent).
@ -25,6 +26,7 @@ class Rive extends LeafRenderObjectWidget {
/// of an [IntrinsicWidth] or [IntrinsicHeight] widget or intend to directly
/// obtain the [RenderBox.getMinIntrinsicWidth] et al., you will want to set
/// this to `true`.
/// {@endtemplate}
final bool useArtboardSize;
/// Fit for the rendering artboard
@ -36,12 +38,22 @@ class Rive extends LeafRenderObjectWidget {
/// Enables/disables antialiasing
final bool antialiasing;
/// {@template Rive.clipRect}
/// Clip the artboard to this rect.
///
/// If not supplied it'll default to the constraint size provided by the
/// parent widget. Unless the [Artboard] has clipping disabled, then no
/// clip will be applied.
/// {@endtemplate}
final Rect? clipRect;
const Rive({
required this.artboard,
this.useArtboardSize = false,
this.antialiasing = true,
BoxFit? fit,
Alignment? alignment,
this.clipRect,
}) : fit = fit ?? BoxFit.contain,
alignment = alignment ?? Alignment.center;
@ -53,7 +65,8 @@ class Rive extends LeafRenderObjectWidget {
..fit = fit
..alignment = alignment
..artboardSize = Size(artboard.width, artboard.height)
..useArtboardSize = useArtboardSize;
..useArtboardSize = useArtboardSize
..clipRect = clipRect;
}
@override
@ -65,7 +78,8 @@ class Rive extends LeafRenderObjectWidget {
..fit = fit
..alignment = alignment
..artboardSize = Size(artboard.width, artboard.height)
..useArtboardSize = useArtboardSize;
..useArtboardSize = useArtboardSize
..clipRect = clipRect;
}
}
@ -106,7 +120,13 @@ class RiveRenderObject extends RiveRenderBox {
@override
void beforeDraw(Canvas canvas, Offset offset) {
canvas.clipRect(offset & size);
// Apply clip rect if provided and return early
if (clipRect != null) {
return canvas.clipRect(clipRect!);
}
if (artboard.clip) {
canvas.clipRect(offset & size);
}
}
@override

View File

@ -18,6 +18,7 @@ abstract class RiveRenderBox extends RenderBox {
BoxFit _fit = BoxFit.none;
Alignment _alignment = Alignment.center;
bool _useArtboardSize = false;
Rect? _clipRect;
bool get useArtboardSize => _useArtboardSize;
@ -63,6 +64,15 @@ abstract class RiveRenderBox extends RenderBox {
}
}
Rect? get clipRect => _clipRect;
set clipRect(Rect? value) {
if (value != _clipRect) {
_clipRect = value;
markNeedsPaint();
}
}
@override
bool get sizedByParent => !useArtboardSize;

View File

@ -48,6 +48,12 @@ class RiveAnimation extends StatefulWidget {
/// Enable/disable antialiasing when rendering
final bool antialiasing;
/// {@macro Rive.useArtboardSize}
final bool useArtboardSize;
/// {@macro Rive.clipRect}
final Rect? clipRect;
/// Controllers for instanced animations and state machines; use this
/// to directly control animation states instead of passing names.
final List<RiveAnimationController> controllers;
@ -73,6 +79,8 @@ class RiveAnimation extends StatefulWidget {
this.alignment,
this.placeHolder,
this.antialiasing = true,
this.useArtboardSize = false,
this.clipRect,
this.controllers = const [],
this.onInit,
Key? key,
@ -97,6 +105,8 @@ class RiveAnimation extends StatefulWidget {
this.alignment,
this.placeHolder,
this.antialiasing = true,
this.useArtboardSize = false,
this.clipRect,
this.controllers = const [],
this.onInit,
this.headers,
@ -121,6 +131,8 @@ class RiveAnimation extends StatefulWidget {
this.alignment,
this.placeHolder,
this.antialiasing = true,
this.useArtboardSize = false,
this.clipRect,
this.controllers = const [],
this.onInit,
Key? key,
@ -147,6 +159,8 @@ class RiveAnimation extends StatefulWidget {
this.alignment,
this.placeHolder,
this.antialiasing = true,
this.useArtboardSize = false,
this.clipRect,
this.controllers = const [],
this.onInit,
Key? key,
@ -377,6 +391,8 @@ class RiveAnimationState extends State<RiveAnimation> {
fit: widget.fit,
alignment: widget.alignment,
antialiasing: widget.antialiasing,
useArtboardSize: widget.useArtboardSize,
clipRect: widget.clipRect,
),
)
: widget.placeHolder ?? const SizedBox();