Je veux créer un conteneur qui peut être déplacé, zoomé et pivoté. Je suis capable de réaliser un zoom. Voici mon code:
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Center(
child: GestureDetector(
onScaleStart: (scaleDetails) {
_previousScale = _scale;
print(' scaleStarts = ${scaleDetails.focalPoint}');
},
onScaleUpdate: (scaleUpdates){
//ScaleUpdateDetails
rotation += lastRotation - scaleUpdates.rotation;
lastRotation = scaleUpdates.rotation;
print("lastRotation = $lastRotation");
print(' scaleUpdates = ${scaleUpdates.scale} rotation = ${scaleUpdates.rotation}');
setState(() => _scale = _previousScale * scaleUpdates.scale);
},
onScaleEnd: (scaleEndDetails) {
_previousScale = null;
print(' scaleEnds = ${scaleEndDetails.velocity}');
},
child:
Transform(
transform: Matrix4.diagonal3( Vector3(_scale, _scale, _scale))..rotateZ(rotation * math.pi/180.0),
alignment: FractionalOffset.center,
child: Container(
height: 200.0,
width: 200.0,
color: Colors.red,
),
)
,
),
),
),
);
}
// méthode de construction
//variable declaration double _scale = 1.0; double _previousScale; var yOffset = 400.0; var xOffset = 50.0; var rotation = 0.0; var lastRotation = 0.0;
Actuellement, il n'y a pas de rotation et je ne peux pas déplacer le conteneur .
3 Réponses :
utilisez le package Matrix Gesture Detector 1 package, vous avez ici l'exemple de base:
MatrixGestureDetector(
onMatrixUpdate: (m, tm, sm, rm) {
setState(() {
matrix = n;
});
},
child: Transform(
transform: matrix,
child: ....
),
),
pour plus d'exemple de code, reportez-vous à exemple code > dossier contenant 6 démos
Comment mettre à l'échelle, faire pivoter, traduire du texte à l'aide de matrix_gesture_detector
@AnkurPrakash vous avez le code dans ma réponse - il vous suffit de définir votre widget Texte en tant qu'enfant de Transform
Quel problème? voir le formulaire le plus simple ici ou ici
Mon problème est que même le conteneur de texte prend l'écran complet. Je veux limiter la zone de texte où j'ai du texte. Actuellement, il faut un écran complet pour le redimensionnement. Un autre problème est la sauvegarde et le chargement des conteneurs. J'enregistre la matrice du conteneur et je la récupère, mais lorsque je la touche, elle passe en plein écran (identité).
Voici mon code dropbox.com/s/2suvmiz5r1muqya/matrix_gesture_screen.dart? dl = 0
Je vous demande d'ajouter un exemple dans un exemple où l'utilisateur peut redimensionner l'image et le texte séparément ainsi que sauvegarder la mise en page actuelle. Ce sera une grande aide. Je suis nouveau dans le développement de flutter.
Pouvez-vous m'aider s'il vous plaît?
Le lien ne fonctionne pas, devrait utiliser le matrix_gesture_detector
Vous pouvez également utiliser photo_viewer au lieu de matrix_gesture_detector. Plus d'informations dans cette réponse: https://stackoverflow.com/a/62426232/2942294
Vous pouvez utiliser le widget RotatedBox (pour la rotation) avec le widget InteractiveViewer (pour effectuer un zoom avant et un zoom arrière).
Propriété panEnabled dans le widget InteractiveViewer utilisé pour déplacer le conteneur
Scaffold(
backgroundColor: Colors.black,
body: Center(
child: RotatedBox(
quarterTurns: 1,
child: InteractiveViewer(
boundaryMargin: EdgeInsets.zero,
minScale: 1,
maxScale: 4,
child: Container(
height: 200,
width: 200,
color: Colors.blue,
),
),
),
),
),
utilisez MatrixGestureDetector
il y a un exemple de code dans le dossier
example, avec quoi avez-vous des problèmes?Désolé pour la réponse tardive, cela résout le problème mais je veux une solution pour combiner Transform.Scale, Transform.rotate et Transform.translate en flutter.
Je n'ai aucune idée de ce que tu veux dire par là
En fait, je cherchais un exemple simple. MatrixGestureDetector résout le problème et est la bonne réponse à ma question mais je voulais la solution où nous avons 3 valeurs de onScaleUpdate et nous pouvons combiner pour faire la matrice comme l'exemple que j'ai posté dans ma question. Je pense que je suis maintenant en mesure d'expliquer clairement mon point.
3 valeurs? vous avez la matrice, pourquoi voulez-vous 3 valeurs?
MatrixGestureDetector ne résout pas mon problème. Je souhaite créer une application de collage dans laquelle je dois faire glisser et mettre à l'échelle des images sur le tableau.
vous souhaitez utiliser le widget
Transform, n'est-ce pas? doncMatrixGestureDetectorrésout votre problème, pourquoi ne lancez-vous pas simplement l'un des 6 exemples fournis?J'ai essayé tous. Le problème auquel je suis confronté est que je dois faire glisser la vue dans l'espace complet de l'écran, actuellement, cela ne concerne que les contraintes spécifiées. Transform (transform: notifier.value, child: Container (width: 200.0, height: 200.0, color: Colors.yellow,),)
Pouvez-vous ajouter un exemple où nous pouvons faire glisser, mettre à l'échelle différentes images dans tout l'écran. Les deux échelles devraient être indépendantes l'une de l'autre? Je vous en serai très reconnaissant.
utilisez alors deux
MatrixGestureDetectors (ou plus) - chaqueTransformedWidgetdoit avoir son propreMatrixGestureDetectorVous avez raison, je suis capable de le faire et je dois également prendre 2 variables de notification pour gérer différentes valeurs.Dois-je prendre un tableau de ValueNotifiers pour plus d'images?
vous pouvez prendre un tableau, une liste, une carte - quelle que soit la structure de données que vous voulez
Pouvez-vous poster "MatrixGestureDetector" comme réponse? Je voudrais marquer cela comme la bonne réponse. Actuellement, nous discutons dans les commentaires.