I have a project that uses the "flutter_painter" library to draw on top of an image, the problem is that when I zoom in on the image, the coordinates are still from the original image and not with the zoom applied, I need to map these coordinates to draw under the zoomed image, and when you unzoom it stays in the drawn location.
I use the "onSecondaryTapUp: (details){}" from the "GestureDetector" widget around the "Flutter_Painter" library to get the click position on the image.
try transformationController.toScene(update.localPosition);
_onDragUpdate(BuildContext context, DragUpdateDetails update) {
RenderBox getBox = context.findRenderObject() as RenderBox;
var local = getBox.globalToLocal(update.globalPosition);
final Offset scenePoint = transformationController.toScene(update.localPosition);
print("Update Point");
debugPrint("local: $local");
debugPrint("scenePoint: $scenePoint");
}
Related
I'm trying to build a simple side-scroller game with a level built of square tiles using Flame.
#override
Future<void> onLoad() async {
final orange = Paint()..color = Color(0xFFFF9000);
final double tileSize = 64;
for (var i = 0; i <= 100; i++) {
add(RectangleComponent(position: Vector2(i * tileSize, 100), size: Vector2.all(tileSize), paint: orange));
}
}
When the screen is static, everything works as expected. However, when I add camera movement, I see vertical lines between the tiles.
#override
void update(double dt) {
camera.moveTo((Vector2(camera.position.x + 1, 0)));
super.update(dt);
}
I suspect it might be something to do with Flutter antialiasing bug. Does anybody know if there's a workaround? Thanks!
This is indeed that bug, we have it documented on a few of our issues too (like this one for example https://github.com/flame-engine/flame/issues/1888)
You can try to use Impeller if that is an option for you, where this bug shouldn't be present.
Other workarounds would be to draw the same color underneath the tiles where they are overlapping, that is of course not always possible though.
And the other option is to use a camera that only moves in full pixels, so that there are no rounding errors.
I'm working on drawing shapes and editing them using CustomPainr() and GestureDetector().
I've successfully drawn the shapes and now I'm going to select and drag the drawn shapes to move them.
I didn't understand much about implementing it yet, but dragging and moving the rectangle succeeded in the following way.
List<Rectangle>? _rects;
List<Line>? _lines;
GestureDetector(
onScaleStart: (details) {
RenderBox box = context.findRenderObject() as RenderBox;
Offset point = box.globalToLocal(details.focalPoint);
// check point on shape
final selectedRectIndex =
_rects!.lastIndexWhere((rect) => rect.rect!.contains(point));
}
// canvas
canvas.drawOval(shape.rect!, shape.paint);
canvas.drawLine(shape.p1!, shape.p2!, shape.paint);
The contents() could be used to determine if the offset was in a Rect() of rectangle.
And the move was successful by updating points in onScaleUpdate().
Then, how do I check if the point I touched is in the Line shape?
Is there a method for this, like "rect!.contains(point)"?
And then I'm going to add this function, when the shape is selected like in the image below, there's a point at the vertex, and drag it to change the rotation or scale.
Can I get some advice to do this?
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.
I'm doing an app in my app. I'm using google maps flutter and I'm having an issue regarding scrolling. When I scroll the map I want to get the center points (long, lat) of the map that is if I scroll the map and stop at certain place it would grab the location points of center.
Can anyone suggest how to solve this issue? It can be very helpful Thank you in advance..
I would get the bounds of the screen, and then find the center of those bounds. If you have a GoogleMapController for the GoogleMap, just use a function like this:
getCenter() async {
LatLngBounds bounds = await mapsController.getVisibleRegion();
LatLng center = LatLng(
(bounds.northeast.latitude + bounds.southwest.latitude) / 2,
(bounds.northeast.longitude + bounds.southwest.longitude) / 2,
);
return center;
}
In the latest version of google maps flutter we can get the coordinates of location by passing in the screen coordinatinates,
// some code here
Size screen = MediaQuery.of(context).size;
// some code here
final coords = await mapController.getLatLng(ScreenCoordinate( x: screen.width/2, y:
screen.width/2));
I'm using an imageoverlay in leaflet
var imageUrl = 'img.png';
L.imageOverlay(imageUrl,mapBounds1).addTo(map);
When i zoom the map, the image zooms also , is there any way to make the image static ?
I also tried tiles (from the image), and it zooms also, i'm wondering if the only way is to create multiple tiles for each zoom.
Any help ?
You could try something like this...
map.on('zoomstart', function(e) {
//remove layer
});
map.on('zoomend', function(e) {
//add layer back with new bounds
});
You need to subscribe somehow to the viewreset event
viewreset is fired when the map needs to reposition its layers (e.g. on zoom), and latLngToLayerPoint is used to get coordinates for the layer's new position. (http://leafletjs.com/reference.html#map-viewreset)
I'm not sure this will work, but try something like
var imageUrl = 'img.png';
var overlay = L.imageOverlay(imageUrl,mapBounds1).addTo(map);
overlay.off('viewreset');