需求:
通过其他同事对二值化后的图像生成的图形轨迹,形成Path,并绘制到Canvas中。
初步实现测试:
1、paint先使用stroke对获取的扫描点连成一个个path看看效果先
canvas.save();
Paint paint = new Paint();
paint.setStrokeWidth(3f);
paint.setColor(mScannedPointsColor);
paint.setStyle(Paint.Style.STROKE);
for (int i = 0; i < mScannedPoints.size(); i++) {
List<PointF> pointFList = mScannedPoints.get(i);
Path path = new Path();
for (int j = 0; j < pointFList.size(); j++) {
PointF pointF = pointFList.get(j);
if (j == 0) {
path.moveTo(pointF.x, pointF.y);
} else {
path.lineTo(pointF.x, pointF.y);
}
}
path.close();
totalPath.addPath(path);
canvas.drawPath(path, paint);
}
canvas.restore();
描边绘制效果正常:
翻车经历:
然后再试试把paint的style设置为fill,结果立即翻车:
对比二值化图形,细节丢失严重,很多不该被填充颜色的地方被填充了颜色。为啥呢?
于是我搜索了很多办法,大部分文章都是介绍如何使用path的setFillType方法更改填充方式,然而对我这个需求毫无作用。
解决方法:
最后我在想,会不会要把所有的子path添加到一个path里面再进行填充才可以正常呢?然后这次试试之后就成功了。
实际代码:
canvas.save();
Paint paint = new Paint();
paint.setStrokeWidth(3f);
paint.setColor(mScannedPointsColor);
paint.setStyle(Paint.Style.FILL);
Path totalPath = new Path();
for (int i = 0; i < mScannedPoints.size(); i++) {
List<PointF> pointFList = mScannedPoints.get(i);
Path path = new Path();
for (int j = 0; j < pointFList.size(); j++) {
PointF pointF = pointFList.get(j);
if (j == 0) {
path.moveTo(pointF.x, pointF.y);
} else {
path.lineTo(pointF.x, pointF.y);
}
}
path.close();
path.setFillType(Path.FillType.EVEN_ODD);
totalPath.addPath(path);
}
canvas.drawPath(totalPath, paint);
canvas.restore();
显示结果:
能显示和二值化图像一致的、基于Path组成的矢量图像,因为不是栅格化图像,放大后也不会出现像素点,需求达成。