flutter CustomPainter 简单绘制 三角形 多边形

//自定义 坐标
class Coordinate {
final double cx;
final double cy;
Coordinate({this.cx, this.cy});
}

//绘制三角形。绘制的过程。是三个点依次线连接然后填充。点的坐标是相对父布局坐标 而不是绝对坐标(传统意义上的屏幕左上角)
效果图:
在这里插入图片描述
三角形代码:
class TriangleCustomPainter extends CustomPainter {
Paint _paint = new Paint();//画笔富含各种属性方法。仔细查看源码
final BuildContext context;
final List spots;
final Color color;

TriangleCustomPainter(this.context, this.spots, {this.color});

@override
void paint(Canvas canvas, Size size) {
Path path = new Path()…moveTo(spots[0].cx, spots[0].cy);
path.lineTo(spots[1].cx, spots[1].cy);
path.lineTo(spots[2].cx, spots[2].cy);
canvas.drawPath(
path,
_paint
…style = PaintingStyle.fill
…color = color);
}

@override
bool shouldRepaint(CustomPainter oldDelegate) {

return true;

}
}

使用:
List leftSpots = new List(3);
leftSpots[0] = Coordinate(cx: 10, cy: 0);
leftSpots[1] = Coordinate(cx: 22, cy: 6);
leftSpots[2] = Coordinate(cx: 22, cy: -6);
CustomPaint(
painter: new TriangleCustomPainter(context, leftSpots,
color: Colors.red),
),

同理。多边形也是如此。

Flutter中,使用高德地图绘制轨迹需要以下几个步骤: 第一步,需要在pubspec.yaml文件中添加高德地图插件依赖。可以在Flutter官方插件网站找到相关的插件信息,并将其添加到pubspec.yaml中。 第二步,创建一个地图页面并引入相关的库文件。在Flutter中,可以使用‘import’语句导入所需的库文件。然后,创建一个StatefulWidget类,并在build方法中返回一个Scaffold组件作为页面的根组件。 第三步,获取定位数据。使用Flutter的定位插件获取当前设备的位置信息。可以在页面初始化时通过初始化插件,并获取位置信息。然后,将位置信息传递给地图组件。 第四步,将地图放置在页面上。可以使用高德地图插件提供的MapView组件将地图添加到页面中。同时,配置相关的地图参数,如地图的缩放级别、中心点等。 第五步,绘制轨迹。将获取到的位置信息按时间顺序记录下来,并在地图上根据位置数据绘制轨迹。可以使用高德地图插件提供的Polyline组件进行轨迹的绘制。 第六步,更新轨迹。随着设备位置的变化,需要实时更新轨迹。可以通过监听定位插件的位置变化事件,获取到最新的位置信息,并更新轨迹。 最后,注意进行相关的错误处理和资源释放工作。在使用过程中,需要注意处理异常情况,如设备不支持定位等。同时,在不需要使用地图时,需要释放相关的资源,以免造成资源浪费。 综上所述,使用Flutter绘制高德地图的轨迹需要引入相关的插件依赖,获取设备的位置信息,将地图添加到页面上并配置相关参数,根据位置数据绘制轨迹,并实时更新轨迹。同时还需处理异常情况和释放资源。这样就可以实现在Flutter绘制高德地图轨迹的功能了。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值