mirror of
https://github.com/twonlyapp/twonly-app.git
synced 2026-01-15 14:28:40 +00:00
fix #29
This commit is contained in:
parent
7e4787f0da
commit
3be963c8f9
1 changed files with 101 additions and 61 deletions
|
|
@ -1,4 +1,6 @@
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
|
||||||
|
import 'package:twonly/src/components/image_editor/action_button.dart';
|
||||||
import 'package:twonly/src/components/image_editor/data/layer.dart';
|
import 'package:twonly/src/components/image_editor/data/layer.dart';
|
||||||
|
|
||||||
/// Emoji layer
|
/// Emoji layer
|
||||||
|
|
@ -21,8 +23,10 @@ class _EmojiLayerState extends State<EmojiLayer> {
|
||||||
Offset initialOffset = Offset.zero;
|
Offset initialOffset = Offset.zero;
|
||||||
Offset initialFocalPoint = Offset.zero;
|
Offset initialFocalPoint = Offset.zero;
|
||||||
double initialScale = 1.0;
|
double initialScale = 1.0;
|
||||||
|
bool deleteLayer = false;
|
||||||
bool twoPointerWhereDown = false;
|
bool twoPointerWhereDown = false;
|
||||||
final GlobalKey _key = GlobalKey();
|
final GlobalKey outlineKey = GlobalKey();
|
||||||
|
final GlobalKey emojiKey = GlobalKey();
|
||||||
int pointers = 0;
|
int pointers = 0;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
|
|
@ -43,7 +47,11 @@ class _EmojiLayerState extends State<EmojiLayer> {
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Positioned(
|
if (widget.layerData.isDeleted) return Container();
|
||||||
|
return Stack(
|
||||||
|
key: outlineKey,
|
||||||
|
children: [
|
||||||
|
Positioned(
|
||||||
left: widget.layerData.offset.dx,
|
left: widget.layerData.offset.dx,
|
||||||
top: widget.layerData.offset.dy,
|
top: widget.layerData.offset.dy,
|
||||||
child: Listener(
|
child: Listener(
|
||||||
|
|
@ -53,6 +61,9 @@ class _EmojiLayerState extends State<EmojiLayer> {
|
||||||
if (pointers == 0) {
|
if (pointers == 0) {
|
||||||
twoPointerWhereDown = false;
|
twoPointerWhereDown = false;
|
||||||
}
|
}
|
||||||
|
if (deleteLayer) {
|
||||||
|
widget.layerData.isDeleted = true;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onPointerDown: (details) {
|
onPointerDown: (details) {
|
||||||
|
|
@ -62,8 +73,7 @@ class _EmojiLayerState extends State<EmojiLayer> {
|
||||||
},
|
},
|
||||||
child: GestureDetector(
|
child: GestureDetector(
|
||||||
onScaleStart: (details) {
|
onScaleStart: (details) {
|
||||||
// Store the initial scale and rotation
|
initialScale = widget.layerData.size;
|
||||||
initialScale = widget.layerData.size; // Reset initial scale
|
|
||||||
initialRotation = widget.layerData.rotation;
|
initialRotation = widget.layerData.rotation;
|
||||||
initialOffset = widget.layerData.offset;
|
initialOffset = widget.layerData.offset;
|
||||||
initialFocalPoint =
|
initialFocalPoint =
|
||||||
|
|
@ -75,31 +85,44 @@ class _EmojiLayerState extends State<EmojiLayer> {
|
||||||
if (twoPointerWhereDown == true && details.pointerCount != 2) {
|
if (twoPointerWhereDown == true && details.pointerCount != 2) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
final RenderBox outlineBox =
|
||||||
|
outlineKey.currentContext!.findRenderObject() as RenderBox;
|
||||||
|
|
||||||
|
final RenderBox emojiBox =
|
||||||
|
emojiKey.currentContext!.findRenderObject() as RenderBox;
|
||||||
|
|
||||||
|
bool isAtTheBottom =
|
||||||
|
(widget.layerData.offset.dy + emojiBox.size.height / 2) >
|
||||||
|
outlineBox.size.height - 80;
|
||||||
|
bool isInTheCenter = MediaQuery.of(context).size.width / 2 -
|
||||||
|
30 <
|
||||||
|
(widget.layerData.offset.dx +
|
||||||
|
emojiBox.size.width / 2) &&
|
||||||
|
MediaQuery.of(context).size.width / 2 + 20 >
|
||||||
|
(widget.layerData.offset.dx + emojiBox.size.width / 2);
|
||||||
|
|
||||||
|
if (isAtTheBottom && isInTheCenter) {
|
||||||
|
deleteLayer = true;
|
||||||
|
} else {
|
||||||
|
deleteLayer = false;
|
||||||
|
}
|
||||||
setState(() {
|
setState(() {
|
||||||
// Update the size based on the scale factor
|
|
||||||
|
|
||||||
twoPointerWhereDown = details.pointerCount >= 2;
|
twoPointerWhereDown = details.pointerCount >= 2;
|
||||||
|
|
||||||
widget.layerData.size = initialScale * details.scale;
|
widget.layerData.size = initialScale * details.scale;
|
||||||
|
widget.layerData.rotation =
|
||||||
// Update the rotation based on the rotation angle
|
initialRotation + details.rotation;
|
||||||
widget.layerData.rotation = initialRotation + details.rotation;
|
|
||||||
|
|
||||||
// Update the position based on the translation
|
// Update the position based on the translation
|
||||||
var dx = (initialOffset.dx) +
|
var dx = (initialOffset.dx) +
|
||||||
(details.focalPoint.dx - initialFocalPoint.dx);
|
(details.focalPoint.dx - initialFocalPoint.dx);
|
||||||
var dy = (initialOffset.dy) +
|
var dy = (initialOffset.dy) +
|
||||||
(details.focalPoint.dy - initialFocalPoint.dy);
|
(details.focalPoint.dy - initialFocalPoint.dy);
|
||||||
// var dy = details.focalPoint.dy - (renderBox.size.height / 2 + 34);
|
|
||||||
widget.layerData.offset = Offset(dx, dy);
|
widget.layerData.offset = Offset(dx, dy);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onScaleEnd: (details) {
|
|
||||||
// Optionally, you can handle the end of the scale gesture here
|
|
||||||
},
|
|
||||||
child: Transform.rotate(
|
child: Transform.rotate(
|
||||||
key: _key,
|
|
||||||
angle: widget.layerData.rotation,
|
angle: widget.layerData.rotation,
|
||||||
|
key: emojiKey,
|
||||||
child: Container(
|
child: Container(
|
||||||
padding: const EdgeInsets.all(44),
|
padding: const EdgeInsets.all(44),
|
||||||
color: Colors.transparent,
|
color: Colors.transparent,
|
||||||
|
|
@ -113,6 +136,23 @@ class _EmojiLayerState extends State<EmojiLayer> {
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
),
|
||||||
|
if (pointers > 0)
|
||||||
|
Positioned(
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 20,
|
||||||
|
child: Center(
|
||||||
|
child: GestureDetector(
|
||||||
|
child: ActionButton(
|
||||||
|
FontAwesomeIcons.trashCan,
|
||||||
|
tooltipText: "",
|
||||||
|
color: deleteLayer ? Colors.red : Colors.white,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue