Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[QUESTION] Not clear how to programmatically rotate the (custom) child #257

Closed
scopendo opened this issue Feb 22, 2020 · 13 comments
Closed
Labels
bug Something isn't working

Comments

@scopendo
Copy link
Contributor

scopendo commented Feb 22, 2020

I'm wanting to allow the user to tap a button to rotate the photo view custom child by 90 degrees left or right by tapping a button, but they should not be able to rotate the image manually.

I found that I could not achieve this at all unless the photo view's enableRotation parameter is enabled. I had expected this to only relate to user actions.

Secondly, it isn't clear how PhotoViewController's rotation value should be updated to perform the rotation. My initial thought was to add either 90 or 0.25 to the rotation value, but this resulted in a child that was not at right angles to the initial orientation. I was surprised to find that adding a value of 1.57 seemed to do what I wanted – but still wrong after many rotations.

It would be useful to have an example that should how to rotate programmatically by a number of degrees.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            PhotoView.customChild(
              enableRotation: true,
              controller: _photoViewController,
              backgroundDecoration: BoxDecoration(
                color: Brand.of(context).secondaryColor,
              ),
              child: Icon(Icons.home, size: 144) ?? FloorplanImage(),
              initialScale: PhotoViewComputedScale.contained,
              minScale: PhotoViewComputedScale.covered * 0.5,
              maxScale: PhotoViewComputedScale.covered * 2.0,
            ),
            Positioned(
              top: 30,
              right: 30,
              child: FloatingActionButton(
                child: Icon(Icons.rotate_right),
                onPressed: () => _photoViewController.rotation = _photoViewController.rotation + 1.5705,
              ),
            ),
          ],
        ),
      ),
    );
  }
@scopendo scopendo added the bug Something isn't working label Feb 22, 2020
@renancaraujo
Copy link
Member

The value expected on the controller is radians just like rotate method on Matrix4.
Regarding enableRotation being only applied to user gestures seems to be the right call for this option.

@scopendo
Copy link
Contributor Author

Thanks, @renancaraujo – you know, I never did pay attention to radians, I guess now I'll have to go look it up. I do think that it should be possible to rotate the image programmatically without having to enable rotation for the user. For example, I want to add a button in an overlay to rotate the child by 90 degrees, but don't want the user doing arbitrary rotations manually – enableRotation doesn't seem to allow that.

@renancaraujo
Copy link
Member

You can use custom child to show an Image wrapped by a Transform and control yourself the rotation factor.

@scopendo
Copy link
Contributor Author

Thanks for that response. With respect (and thanks for this component), that feels rather complicated for doing what the PhotoView is already designed to do – rotate a child widget. But maybe I don't appreciate the effort that that would take – I'll take a look.

Selfishly, my reason for wanting PhotoView to allow it is that I am already using customChild with a bunch of logic triggered by outputStateStream to overlay the image with markers that remain vertically orientated and statically sized (to the user's eye) as the child is scaled, rotated and panned. This is similar to how Google Maps works.

@renancaraujo
Copy link
Member

This is only a workaround, as I said previously:

enableRotation being only applied to user gestures seems to be the right call for this option

@scopendo
Copy link
Contributor Author

I've submitted a pull request to add this ability, though it does seem that we differ on the whether or not programmatic rotation should be allowed when enableRotation is not enabled – in which case, I can use the fork no problem.

Thanks again for the package, it's really helpful.

@renancaraujo
Copy link
Member

Wow, was ready to prioritize this task, thanks for the PR.

@scopendo
Copy link
Contributor Author

No problem – I think however there may be some downstream issues, that I'll look at later. For example, if the photo view is rotated programmatically, then manually adjusting the scale afterwards is causing the rotation to revert back to the initial rotation.

@renancaraujo
Copy link
Member

Is it too much to ask you to add an example page for that in the example app? If not its ok, I work on that.

@scopendo
Copy link
Contributor Author

No problem – I'll update PR #259

@scopendo
Copy link
Contributor Author

I've updated PR #259 with an example and also clarified that it includes a fix for preventing updates to rotation in the output stream when manual rotation gestures are disabled. Consequently, I closed PR #260 as it is redundant.

@scopendo
Copy link
Contributor Author

@renancaraujo – I've updated PR #259 again to fix an issue whereby manual scaling after programmatic rotation resulted in the child reverting to 0.0 rotation. This has simplified the fix altogether, doing away with the sub-class of PhotoViewControllerValue.

In essence, allowing programmatic rotation requires just two things, always applying the current rotation value and ensuring that manual rotation gestures do not update the rotation unless enableRotation is enabled.

@renancaraujo
Copy link
Member

Merged on 0.10.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants