dart – Offset在onTap和OnDrag上有所不同 – Flutter
发布时间：2020-12-14 14:51:28 所属栏目：百科 来源：网络整理
导读：我有一个图像,其中某些项目有起始偏移及其高度和宽度,对应于图像中的每个项目我有不同的文本,我必须拖动文本并将其放到图像上的正确位置,我是在点击特定位置时获得不同的偏移量,同时拖动也会得到不同的偏移量.我怎样才能获得相同的偏移量？ 这是我正在使用的
|
我有一个图像,其中某些项目有起始偏移及其高度和宽度,对应于图像中的每个项目我有不同的文本,我必须拖动文本并将其放到图像上的正确位置,我是在点击特定位置时获得不同的偏移量,同时拖动也会得到不同的偏移量.我怎样才能获得相同的偏移量？
这是我正在使用的代码和图像.这些是树的细节 x=673 y=635 h=214 w=149 关于形象.
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
ImageInfo _imageInfo;
AssetImage assestImage;
double dx;
double dy;
Offset dragOffset;
@override
void initState() {
super.initState();
assestImage = AssetImage('assets/hospital.jpg');
WidgetsBinding.instance.addPostFrameCallback((a) => _getImageInfo());
}
void _getImageInfo() async {
Image image = new Image.asset('assets/hospital.jpg');
image.image
.resolve(new ImageConfiguration())
.addListener((ImageInfo info,bool _) {
_imageInfo = info;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
DragTarget(
onAccept: (Offset dragOffset) {},builder: (
BuildContext context,List<dynamic> accepted,List<dynamic> rejected,) {
return TapImage(
onTap: (Offset offset) {
print('Offset on Tapping the image is $offset');
dx = offset.dx * _imageInfo.image.width;
dy = offset.dy * _imageInfo.image.height;
if (_imageInfo != null) {
print('Image clicked: ${dx.toInt()} x ${dy.toInt()}');
if ((673 <= dx && dx <= 822) &&
(635 <= dy && dy <= 849)) {
print('you drop in tree');
} else {}
}
},image: assestImage,);
}),Draggable(
dragAnchor: DragAnchor.pointer,onDragEnd: (details) {
setState(() {
dragOffset = details.offset;
});
print('dragoffset in onDrag Method is $dragOffset');
},data: dragOffset,child: Container(
color: Colors.green,child: Text(
'Tree',style: TextStyle(fontSize: 30.0),)),feedback: Container(
height: 10.0,child: Text(
'Tree',style: TextStyle(fontSize: 15.0),),],);
}
}
typedef void OnTapLocation(Offset offset);
class TapImage extends StatelessWidget {
TapImage({Key key,this.onTap,this.image}) : super(key: key);
final OnTapLocation onTap;
final ImageProvider image;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (TapDownDetails details) => _onTap(details,context),onLongPress: () {},child: Image(image: AssetImage('assets/hospital.jpg')),);
}
void _onTap(TapDownDetails details,BuildContext context) {
RenderBox getBox = context.findRenderObject();
Offset local = getBox.globalToLocal(details.globalPosition);
print('locla ois $local');
onTap(Offset(local.dx / getBox.size.width,local.dy / getBox.size.height));
}
}
解决方法
它为我工作
class _HomeState extends State<Home> {
ImageInfo _imageInfo;
AssetImage assestImage;
double getheight;
double getywidth;
Offset dragOffset;
@override
void initState() {
super.initState();
assestImage = AssetImage('assets/hospital.jpg');
WidgetsBinding.instance.addPostFrameCallback((a) => _getImageInfo());
}
void _getImageInfo() async {
Image image = new Image.asset('assets/hospital.jpg');
image.image
.resolve(new ImageConfiguration())
.addListener((ImageInfo info,bool _) {
_imageInfo = info;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
children: <Widget>[
TapImage(
onTap: (Offset offset,RenderBox getBox,TapDownDetails details) {
double dx;
double dy;
dx = offset.dx * _imageInfo.image.width;
dy = offset.dy * _imageInfo.image.height;
setState(() {
dragEnd(dx,dy);
});
},Draggable(
dragAnchor: DragAnchor.pointer,onDragStarted: () {
WidgetsBinding.instance
.addPostFrameCallback((_) => setState(() {
RenderBox getBox = context.findRenderObject();
getheight = getBox.size.height;
getywidth = getBox.size.width;
}));
},onDragEnd: (details) {
double dx;
double dy;
dx = (details.offset.dx / getywidth) * _imageInfo.image.width;
dy =
((details.offset.dy) / getywidth) * _imageInfo.image.height;
setState(() {
dragEnd(dx,dy);
});
},child: Padding(
padding: const EdgeInsets.only(top: 28.0),child: Text(
'tree',feedback: Container(
height: 10.0,child: Text(
'tree',);
}
void dragEnd(double dx,double dy) {
if (_imageInfo != null) {
if ((673 <= dx && dx <= 822) && (635 <= dy && dy <= 849)) {
showDialog(
context: context,builder: (context) {
return _textDescriptionDialog(
context,'Drag on tree',);
},);
} else {
showDialog(
context: context,'Drag outside',);
}
}
}
Widget _textDescriptionDialog(BuildContext context,String text) {
return new FractionallySizedBox(
heightFactor: MediaQuery.of(context).orientation == Orientation.portrait
? 0.5
: 0.8,widthFactor: MediaQuery.of(context).orientation == Orientation.portrait
? 0.8
: 0.4,child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20.0),child: Container(child: Center(child: Text(text))),));
}
}
typedef void OnTapLocation(
Offset offset,TapDownDetails details);
class TapImage extends StatelessWidget {
TapImage({Key key,BuildContext context) {
RenderBox getBox = context.findRenderObject();
print('size is ${getBox.size}');
Offset local = getBox.globalToLocal(details.globalPosition);
print('local is $local');
onTap(Offset(local.dx / getBox.size.width,local.dy / getBox.size.height),getBox,details);
}
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
