flutter图片识别_flutter实现文字识别之图片拖拽选框选取截取文字

最近flutter1.0终于正式发布，从目前的布局看这个项目的野心很大，ios/android、桌面，甚至还有web都有相应的解决方案。我自己一直对flutter框架保持关注，并且非常看好。也尝试做了一个用flutter来实现ocr的开源项目：https://github.com/luyongfugx/flutter_ocr，大家也可以通过点击地下原文链接来查看代码。这篇文章主要讲的是在这个app里面如何实现拖拽选取。

1.如何实现一个中间透明的拖拽层

参考市面上的一些app，为了提高用户体验，我们要给用户一个精确选择要识别的文字的交互。一个透明的中间层其实是上、下、左、右、中几个层来组成的。这里面用到了flutter里的stack布局，有点类似css里的position:absolute(绝对定位)，上下左右这几个层是半透明，中间这个层则是全透明或者透明度更高一些，代码如下：

new Stack( children: [ new RawGestureDetector( gestures: { ScaleRotateGestureRecognizer: new GestureRecognizerFactoryWithHandlers< ScaleRotateGestureRecognizer>( () => new ScaleRotateGestureRecognizer(), (ScaleRotateGestureRecognizer instance) { instance ..onStart = onScaleStart ..onUpdate = onScaleUpdate ..onEnd = onScaleEnd; }, ), }, child:new RepaintBoundary( key: globalKey, child:new Container( margin: const EdgeInsets.only( left: 0.0, top: 0.0, right: 0.0, bottom: 0.0), padding: const EdgeInsets.only( left: 0.0, top: 0.0, right: 0.0, bottom: 0.0), color: Colors.black, width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, child: new CustomSingleChildLayout( delegate: new ImagePositionDelegate( imgWidth, imgHeight, topLeft), child: Transform( child: new RawImage( image: widget.image, scale: widget.imageInfo.scale, ), alignment: FractionalOffset.center, transform: matrix, ), ), ), ), ), new Positioned( left: 0.0, top: 0.0, width: MediaQuery.of(context).size.width, height: maskTop, child: new IgnorePointer( child: new Opacity( opacity: opacity, child: new Container( color: Colors.black, ), ))), new Positioned( left: 0.0, top: maskTop, width: this.maskLeft, height: this.maskHeight, child: new IgnorePointer( child: new Opacity( opacity: opacity, child: new Container(color: Colors.black), ))), new Positioned( right: 0.0, top: maskTop, width: (MediaQuery.of(context).size.width - this.maskWidth - this.maskLeft), height: this.maskHeight, child: new IgnorePointer( child: new Opacity( opacity: opacity, child: new Container(color: Colors.black), ))), new Positioned( left: 0.0, top: this.maskTop + this.maskHeight, width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height - (this.maskTop + this.maskHeight), child: new IgnorePointer( child: new Opacity( opacity: opacity, child: new Container(color: Colors.black), ))), new Positioned( left: this.maskLeft, top: this.maskTop, width: this.maskWidth, height: this.maskHeight, child: new GestureDetector( child: new Container( color: Colors.transparent, child: new CustomPaint( painter: new GridPainter(), ), ), onPanStart: onMaskPanStart, onPanUpdate: (dragInfo) { this.onPanUpdate(maskDirection, dragInfo); }, onPanEnd: onPanEnd ) ), new Positioned( //scan        left: this.maskLeft, top: this.maskTop, width: this.maskWidth, height: this.maskHeight*_controller.value, child: new Opacity( opacity: 0.5, child: new Container(color: Colors.blue), ) ) ] )复制代码

2.中间透明层的方格线如何画

查看上图的交互，中间透明的层是由方格线的，并且会随着拖拽变化而变化，这里我们利用了flutter的CustomPainter来实现：

class GridPainter extends CustomPainter { GridPainter(); @override  void paint(Canvas canvas, Size size) { Paint paint = new Paint() ..color = Colors.white      ..strokeCap = StrokeCap.round      ..isAntiAlias =