I am trying to create custom dynamic markers (changes on tap) for my google maps project. Each marker shows a shop with some promotion going on. A single shop can have 3 promotions displayed at the same time and it is supposed to be highlighted if tapped on
I have tried to convert the SVGs for the markers in Canvas code using online tools, but it's bulky and I don't understand it well.
Here's the screenshot for an example screen
Here's the code written for converting theses SVGs to image byte data for use as marker icons
static Future<ByteData?> marker({double? width}) async {
width ??= 88;
double height = width * 1.2247191011235956;
final recorder = ui.PictureRecorder();
final canvas = Canvas(recorder,
Rect.fromPoints(const Offset(0.0, 0.0), const Offset(200.0, 200.0)));
Size size = Size(width, (width * 1.2247191011235956).toDouble());
_paintMarker(size: size, canvas: canvas);
final picture = recorder.endRecording();
final img = await picture.toImage((width).toInt(), height.toInt());
return await img.toByteData(format: ui.ImageByteFormat.png);
}
Related
I'm working on a screen recording app in Flutter. In order to keep the quality of the captured screen image, I have to scale the image as shown below. However, it makes the image data very large. How can I reduce the data size (scale back to the original size) before saving it to a file? For performance reasons, I want to work with raw RGBA instead of encoding it PNG.
double dpr = ui.window.devicePixelRatio;
final boundary =
key.currentContext!.findRenderObject() as RenderRepaintBoundary;
return getBufferSync(key);
}
ui.Image image = boundary.toImageSync(pixelRatio: dpr);
var rawBytes = await image.toByteData(format: ui.ImageByteFormat.rawRgba);
Uint8List uData = rawBytes!.buffer.asUint8List();
Currently, I'm using this package to draw some images. And I'm saving this image. I reviewed package classes and functions and tried many solution to achieve my aim. But I haven't found any solution yet. Maybe I'm trying to do impossible thing so I want to ask this: Can we draw a transparent canvas then our output image background can be another color?
Here's some code snippet:
canvas = Canvas(
recorder,
Rect.fromPoints(Offset.zero, Offset(size.width, size.height)),
);
paint.blendMode = mode;
ui.Image src = await picture.toImage(size.width.toInt(), size.height.toInt());
paint.isAntiAlias = true;
canvas.drawImage(src, Offset.zero, paint);
picture = recorder.endRecording();
ui.Image img = await picture.toImage(size.width.toInt(), size.height.toInt());
ByteData? imgBytes =
await img.toByteData(format: ui.ImageByteFormat.rawStraightRgba);
In above code snippet, we create a canvas and drawImage then we get the image bytes. But in this case, this image's background is transparent. But I want set red color. So when I
add
canvas.drawColor(Colors.red, BlendMode.src);
My image can be created as I want, but this time I see a red canvas in my view. But I want a transparent canvas when I draw it. I only want to see output image's background is red.
Is this possible?
I'm developing an application mobile in flutter and using HERE MAPS SDK explorer , one of this I must to do is in a single coordinate create a polygon circular con 100 meters radios with dashed border, like first photo
when i'm developing using here maps sdk , i created
const radiusInMeters = 100.0;
final geoCircle = GeoCircle(GeoCoordinates(lat, long), radiusInMeters);
final geoPolygon = GeoPolygon.withGeoCircle(geoCircle);
final fillColor = ColorPalette.warning.withAlpha(80);
final mapPolygon = MapPolygon(geoPolygon, fillColor);
and the result is this different.
how can I create a border circular 5px with dashed border and different color using here maps sdk api ?
So I've been trying really hard to crop an image according to my needs in flutter.
Problem statement:
I have a screen and in that screen I show a frame while the device camera is run on the background. Now, what I want is that whenever the user clicks a photo, only the area of that image inside the frame should be kept and rest should be cropped.
What I have done so far?
Added a package image 3.1.3
Wrote code to fetch x,y coordinates of my frame.
Using the calculated x,y coordinates and copyCrop method from the Image package to crop the clicked image.
Now the problem is that I do not know how copyCrop works and the code right now does not give me the expected results.
final GlobalKey _key = GlobalKey();
void _getOffset(GlobalKey key) {
RenderBox? box = key.currentContext?.findRenderObject() as RenderBox?;
Offset? position = box?.localToGlobal(Offset.zero);
if (position != null) {
setState(() {
_x = position.dx;
_y = position.dy;
});
}
}
I assign this _key to my Image.file(srcToFrameImage) and the function above yields 10, 289.125
Here 10 is the offset from x and 289.125 is the offset from y. I used this tutorial for the same.
Code to crop my image using the Image package:
var bytes = await File(pictureFile!.path).readAsBytes();
img.Image src = img.decodeImage(bytes)!;
img.Image destImage = img.copyCrop(
src, _x!.toInt(), _y!.toInt(), src.width, src.height);
var jpg = img.encodeJpg(destImage);
await File(pictureFile!.path).writeAsBytes(jpg);
bloc.addFrontImage(File(pictureFile!.path));
Now, can anyone tell me how i can do this effectively? Right now, it does crop my image but not as I want it to be. It would be really great if someone could tell me how does copyCrop work and what is the meaning of all these different parameters that we pass into it.
Any help would be appreciated.
Edit:
Now, as you can see, i only want the image between this frame to be kept after being captured and rest to be cropped off.
How to convert an SVG file from the Flutter Assets to a Bitmap?
You need flutter_svg library, that you probably already use if you are playing with SVG.
You need also bitmap library.
import 'package:bitmap/bitmap.dart';
import 'package:flutter_svg/flutter_svg.dart';
String svgString = await DefaultAssetBundle.of(context).loadString(svg_path);
DrawableRoot svgDrawableRoot = await svg.fromSvgString(svgString, null);
// to have a nice rendering it is important to have the exact original height and width,
// the easier way to retrieve it is directly from the svg string
// but be careful, this is an ugly fix for a flutter_svg problem that works
// with my images
String temp = svgString.substring(svgString.indexOf('height="')+8);
int originalHeight = int.parse(temp.substring(0, temp.indexOf('p')));
temp = svgString.substring(svgString.indexOf('width="')+7);
int originalWidth = int.parse(temp.substring(0, temp.indexOf('p')));
// toPicture() and toImage() don't seem to be pixel ratio aware, so we calculate the actual sizes here
double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
double width = originalHeight * devicePixelRatio; // where 32 is your SVG's original width
double height = originalWidth * devicePixelRatio; // same thing
// Convert to ui.Picture
ui.Picture picture = svgDrawableRoot.toPicture(size: Size(width, height));
// Convert to ui.Image. toImage() takes width and height as parameters
// you need to find the best size to suit your needs and take into account the screen DPI
ui.Image image = await picture.toImage(width.toInt(), height.toInt());
ByteData bytes = await image.toByteData(format: ui.ImageByteFormat.png);
// finally to Bitmap
Bitmap bitmap = await Bitmap.fromHeadless(width.toInt(), height.toInt(),
bytes.buffer.asUint8List()
);
// if you need to save it:
File file = File('temporary_file_path/unique_name.bmp');
file.writeAsBytesSync(bitmap.content);
Some credit to this StackOverflow answer