bounty将在7小时后过期。回答此问题可获得+50的声誉奖励。Florentin Lupascu正在寻找来自声誉良好来源的答案。
我尝试创建自定义标记(BitmapDescriptor
)在Flutter中显示在我使用谷歌 matplotlib 的屏幕上。我唯一的问题是我的自定义标记在Map上的位置错误。如果我使用默认标记代替,那么标记的位置显示正确。下面是我的代码,也与标记的正确位置,也是标记(自定义标记)的错误位置2截图。
屏幕快照标记-右侧位置
屏幕截图标记-位置错误
/// Load an asset from root library and return it back as a list of bytes
Future<Uint8List> loadImageAsBytes( {required String path, required Size size}) async {
ByteData data = await rootBundle.load(path);
ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
targetWidth: size.width.toInt());
ui.FrameInfo fi = await codec.getNextFrame();
return ((await fi.image.toByteData(format: ui.ImageByteFormat.png)) ??
ByteData(0))
.buffer
.asUint8List();
}
/// Load the icon from a list of bytes and return it back as an Image
Future<ui.Image> getImageFromPath(String imagePath, Size iconSize) async {
Uint8List imageBytes = await loadImageAsBytes(size: iconSize, path: imagePath);
final Completer<ui.Image> completer = Completer();
ui.decodeImageFromList(imageBytes, (ui.Image img) {
return completer.complete(img);
});
return completer.future;
}
/// Here we draw a custom marker which will include the vehicle icon and vehicle plate number.
Future<BitmapDescriptor> createCustomMarkerWithPlateRegAndIcon({required String iconPath, required Size size, required String plateReg}) async {
// Create a TextBox where to place the Vehicle Plate Number
TextSpan span = TextSpan(
style: const TextStyle(
height: 1.2,
color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
text: plateReg);
// Align the Vehicle Plate Registration to center in the above TextBox
TextPainter tp = TextPainter(
text: span,
textAlign: TextAlign.center,
textDirection: TextDirection.ltr,
);
// Computes the visual position of the glyphs for painting the text.
tp.layout();
// Start recording a new drawing
ui.PictureRecorder recorder = ui.PictureRecorder();
// Create an empty canvas where the drawing will be painted
Canvas canvas = Canvas(recorder);
// TextBox background colour for Plate Registration (I set it to dark yellow to reflect UK style)
Paint textBgBoxPaint = Paint()
..color = const Color.fromARGB(255, 240, 200, 50);
// Create a rectangle where to place the Veh Plate Number
Rect rect = Rect.fromLTWH(0, 0, tp.width + 30, 50);
// Draw on the canvas the rectangle with yellow background and rounded corners
canvas.drawRRect(
RRect.fromRectAndRadius(rect, const Radius.circular(20.0)),
textBgBoxPaint,
);
// Add the Plate Registration to canvas and align it to center in the TextBox
tp.paint(canvas, const Offset(15.0, 5.0));
// Create a rectangle where will be placed the vehicle icon
Rect rectForImage = Rect.fromLTWH(
0,
55,
size.width,
size.height,
);
// Add path to rectangle image
canvas.clipPath(Path()..addRect(rectForImage));
// Get the vehicle icon which will gonna be inserted on the canvas
ui.Image image = await getImageFromPath(iconPath, size);
// Paint the icon on the canvas
paintImage(
canvas: canvas,
image: image,
rect: rectForImage,
fit: BoxFit.fitHeight);
// Stop the drawing
ui.Picture p = recorder.endRecording();
// Take the whole drawing and convert it to a PNG and after to a byte data
ByteData? pngBytes = await (await p.toImage(
160,
160,
))
.toByteData(format: ui.ImageByteFormat.png);
// This is an empty byte data for null safety
ByteData emptyData = Uint8List(0).buffer.asByteData();
// Convert the PNG from byteData to a list of bytes.
Uint8List data = Uint8List.view((pngBytes ?? emptyData).buffer);
// Return the PNG (in format list of bytes) as a Google Marker of type BitmapDescriptor
return BitmapDescriptor.fromBytes(data);
}
感谢您阅读本文!
2条答案
按热度按时间w6mmgewl1#
将其替换为您的代码(从左起添加相同的边距):
nhn9ugyo2#
请尝试此解决方案。