Flutter 画笔(Paint)、绘制弧(drawArc)

Rect rect=Rect.fromLTRB(0.0, 0.0, size.width, size.height/2);

canvas.drawArc(rect, 0.0, 2*pi/4, false, paint);

}

//在实际场景中正确利用此回调可以避免重绘开销,本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

Rect.fromCenter({ Offset center, double width, double height })

center 矩形中心相对于原点偏移量
width 矩形宽度
height 矩形高度

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…strokeWidth=0.0

…color=Colors.redAccent

…invertColors=false;

Rect rect=Rect.fromCenter(center: Offset(size.width/2,size.height/2),width:size.width/2,height:size.height/2);

canvas.drawArc(rect, 0.0, 2*pi/4, false, paint);

}

//在实际场景中正确利用此回调可以避免重绘开销,本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

Rect.fromLTWH(double left, double top, double width, double height)

left 矩形最左边相对于原点偏移量
top 矩形最顶部相对于原点偏移量
width 矩形宽度
height 矩形高度

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…strokeWidth=0.0

…color=Colors.redAccent

…invertColors=false;

Rect rect=Rect.fromLTWH(0.0, 0.0, size.width/2, size.height/2);

canvas.drawArc(rect, 0.0, 2*pi/4, false, paint);

}

//在实际场景中正确利用此回调可以避免重绘开销,本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

Rect.fromPoints(Offset a, Offset b) : this.fromLTRB(

math.min(a.dx, b.dx),

math.min(a.dy, b.dy),

math.max(a.dx, b.dx),

math.max(a.dy, b.dy),

);

a 相对于原点x方向上的偏移范围
b 相对于原点y方向上的偏移范围

下面三种写法效果一样(主要是取x或y方向上偏移量的范围)

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…strokeWidth=1.0

…color=Colors.redAccent

…invertColors=false;

Rect rect=Rect.fromPoints(Offset(size.width, 0.0),Offset(0,size.height));

canvas.drawArc(rect, 0.0, 2*pi/4, false, paint);

}

//在实际场景中正确利用此回调可以避免重绘开销,本示例我们简单的返回true

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…strokeW

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值