pskink / matrix_gesture_detector Goto Github PK

I want to move/scale/translate only the component which have been currently touched & rest other should stay at the same place. How can i achieve this?

Please find attached video representing the bug

video.zip

Is it possible to move widget with parent, but prevent scaling of child widget inside MatrixGestureDetector?

Love the library! Clear, concise, efficient, flexible, and great comments!

I have implemented a pinch-to-crop feature and I'm saving the final translation and scale to local storage so images can be displayed later according to a user-specified crop. Right now I'm writing out these values every time onMatrixUpdate() executes, but this understandably causes some lag.

I really only need to write the values when each gesture ends. Is there a convenient way to do this or will I need to expose it by customizing matrix_gesture_detector?

Thanks!
Mike

https://github.com/zhaolongs/matrix_gesture_detector_pro
https://pub.dev/packages/matrix_gesture_detector_pro

Would it be possible to add rotation snapping?

Something like this:

https://konvajs.org/docs/select_and_transform/Rotation_Snaps.html

That would be a great addition.

Thanks for your dedication!
On Android, I can use 2 fingers to rotate and pan normally but I cannot do rotate in the desktop app (Ubuntu 20). I tried both right clicks, holding "shift", and "ctrl" but still does not work.

This is working great, wanted to know if it's possible to use some external button that will be dragged and will scale and rotate the matrix.

Use case:

The widget that is scaled and rotated with a matrix gesture detector will have a small icon button widget at the corner. That corner button will be used with a single touch to scale the main widget inwards and outwards and rotate it.

Hi,

first of all, great flutter package! :)
Is it possible to add multiple MatrixGestureDetector widgets inside the same view? For example as Positioned inside a Stack and let every widget handle its own gestures (move, pinch to zoom, rotate, ...)
Something like this: https://stackoverflow.com/questions/60803481/move-zoom-and-resize-positioned-widget-inside-stack-widget-in-flutter

Can you please provide an example?

How to set max and min scale of the widget?
I want to set max_scale = 3 and min_scale = 1 the same as when the widget is initialized.

I am using this widget in video editing app. I have implemented it successfully but not getting how to get left,top, width and roatation angle to save video with watermark. This is my code:

MatrixGestureDetector(
onMatrixUpdate: (m, tm, sm, rm) {
controller.matrix = MatrixGestureDetector.compose(m, tm, sm, rm);
notifier.value++;
},
child: AspectRatio(
aspectRatio: controller.aspectRatio.value != 0.0 ? controller.aspectRatio.value : controller.controller.video.value.aspectRatio,
child: AnimatedBuilder(
animation: notifier,
builder: (ctx, child) {
return Transform(
transform: controller.matrix,
child: MeasureSize(
onChange: (Size size) { controller.size = size; },
child: FittedBox(
fit: BoxFit.contain,
child: controller.icon == null ? CustomPaint(
painter: DottedBorderPainter(),
child: Obx(() => Container(
color: Color(controller.bgColor.value != 0 ? controller.bgColor.value : Colors.transparent.value),
margin: const EdgeInsets.all(4),
padding: const EdgeInsets.all(4),
child: Center(
child: Text(key: controller.textKey, controller.text,
style: TextStyle(fontSize: 33.5,
color: Color(controller.textColor.value != 0 ? controller.textColor.value : Colors.black.value))),
),
)),
)
: Container(key: controller.key, child: Image.network(controller.icon!))
),
),
);
},
),
),
)

and I have used :
var x = MatrixUtils.transformRect(matrix, key.currentContext!.findRenderObject()!.paintBounds).left;
var y = MatrixUtils.transformRect(matrix, key.currentContext!.findRenderObject()!.paintBounds).top;

   var width = MatrixUtils.transformRect(matrix, key.currentContext!.findRenderObject()!.paintBounds).width;

to get corrdinates and width and not sure about rotation but these are not working

I placed a box at the top right corner of the screen, saved the matrix and used to it place that box at the saved position. It works fine when viewed on the same screen size at which it was created, but when viewed on different screen sizes which were relatively smaller or larger than the original one, the box does not appear to be at the top right corner of the screen.
How can solve this issue with different screen sizes ?

After scaling and translating, i tap on the screen. I use the values from MatrixDecompose (translation , scale) to go back to the 'real world without translation and scale' coordinates. They value are always off in Y by the same amount. I am fairly sure it is caused by the AppBar distance. When I remove the AppBar values work.
My problem is I I am not completely sure what is happening, so I might get it wrong on different devices. Also, I would prefer to be able to use the Appbar. I can not find a solution of finding AppBar height. Any Suggestions? What have others done with this problem?

Will this package be upgraded to null safety at any point in the future?

Is there a way to reset the matrix to Matrix4.identity()?

I'm currently trying to do this by setting the Matrix4 variable matrix, which is assigned to a Transform widget, to setState(() => matrix = Matrix4.identity()); on the press of a button.

This seems to work but once I try to move the transform widget is jumps and starts it's transformation from the pre-reset state.

I want to scale only in x direction but currently the scale gesture scales in both x and y like zooming. But i want stretch operation. How to solve this issue ?

I have made your package compatible with Dart 3 here is my Github repo link: https://github.com/chusamasadiq/matrixgesturedetector. You can merge this code to your package

It may be some simple code to fix this, but as for now please read my answer to this topic:

https://stackoverflow.com/questions/60803481/move-zoom-and-resize-positioned-widget-inside-stack-widget-in-flutter/63042850#63042850

I made some changes so that many widgets could have its own matrix transformer..
But if you pinch or do any gesture which touches another children, both of them get transformed.. It should be just the one which is nearest to the pinch movement.

Do you know how can this be achieved?

Btf, awesome lib! Thanks for it!

Using info from Resetting the Matrix#8, I got the matrix to reset correcting when using CustomPaint (basically the same code as the example with CustomPaint). But I have no idea why it is working. I seem to have replaced notifier.value = m, with notifier.value = matrix; when normal zoom, offset and rotation.

It seems to work, but I do not understand. Is it possible my code will give memory leaks or anything? Is it the best way for CustomPaint?

My Code:
class _CustomPainterDemoState extends State {
Matrix4 matrix = Matrix4.identity();
ValueNotifier notifier;
bool resetMatrix = false;

@OverRide
void initState() {
super.initState();
notifier = ValueNotifier(matrix);
.....
in the build
body: MatrixGestureDetector(
onMatrixUpdate: (m, tm, sm, rm) {
if(resetMatrix) {
matrix = MatrixGestureDetector.compose(matrix, tm, sm, rm);
//above appears to reset all matrices
}
notifier.value = matrix; //original code had notifier.value = m
},

I then have child: CustomPaint, exactly like the example
At the bottom, I have a floating Action Button to reset the screen
floatingActionButton: FloatingActionButton(
onPressed:(){
setState(() {
matrix = Matrix4.identity();
notifier = ValueNotifier(matrix);
resetMatrix = true;
});
}
),

This will be useful in many cases for example,
I want to hide other UI components while the user is transforming and when finished we can make the whole UI visible again.

Hey, how to implement this matrix gesture detector on multiple texts on a image, just like in Instagram .
Thanks !

I'm trying to use the rotation property but seems like it is broken, it is never getting updated

HI, thank you for the awesome package.
What I want to achieve is that I only want to Pan and Zoom whenever the user uses two fingers to do it. Because I have other needs for the single finger. So how can I detect whether it is a single finger touch or two fingers touch?

Thanks

Hey, is there a way to prevent scaling the widget smaller than it's initial size?

I am using the sample code TransformDemo2, with an example floating button, that executes a setState. I move and scale the object with my fingers to a certain position on the screen. But when I run setState, the position of the matrix is not maintained. Are there any suspicions of what may be happening?

It is pretty common to be able to edit an already transformed image.

For this use case, it would be needed to initialize the widget with an initial transform.

MatrixGestureDetector(
    initialMatrix: myMatrix
    onMatrixUpdate: ...
    child: ...
  )