flutter - 如何在 Flutter 中的图像上动态绘制矩形？

Question

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

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,
)
]),
);
}

标签： flutterpaintdrawrectgesturedetectorcustom-painting