微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在 Flutter 中的图像上动态绘制矩形?

如何解决如何在 Flutter 中的图像上动态绘制矩形?

我想让用户以某种方式在他接收到的图像上绘制矩形并获取绘制矩形的坐标。我正在考虑的一种方法是让他在图像上点击四次以从这四个坐标中绘制一个矩形。目前我无法获得准确的本地抽头位置。它并不总是准确的。 对我的要求有什么建议吗? 这是我当前的代码

double posx = 100.0;
double posy = 100.0;

void onTapDown(BuildContext context,TapDownDetails details) {
print('${details.globalPosition}');
final RenderBox Box = context.findRenderObject();
final Offset localOffset = Box.globalToLocal(details.globalPosition);
setState(() {
posx = localOffset.dx;
posy = localOffset.dy;
});
}
Offset _tapPosition;

void _handleTapDown(TapDownDetails details) {
final RenderBox referenceBox = context.findRenderObject();
setState(() {
_tapPosition = referenceBox.globalToLocal(details.globalPosition);
posx = _tapPosition.dx;
posy = _tapPosition.dy;
});
}

@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return
GestureDetector(
onTapDown: _handleTapDown,onTap: (){

},child:new Stack(fit: StackFit.expand,children: <Widget>[
// Hack to expand stack to fill all the space. There must be a better
// way to do it.
new Container(
color:Colors.white,child: Image.asset("lib/assets/rectangles.png"),),// new Container(height:200,width: 100,color: Colors.white),new Positioned(
child: new Text('.'),left: posx,top: posy,)
]),);
}

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。