Last active
May 24, 2020 13:40
-
-
Save netsmertia/53170bf3a0b2e9fe7822d3786e00971a to your computer and use it in GitHub Desktop.
image rotate and scale
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'dart:async'; | |
import 'dart:math'; | |
import 'dart:typed_data'; | |
import 'dart:ui' as ui; | |
import 'package:flutter/services.dart' show rootBundle; | |
import 'package:flutter/material.dart' hide Image; | |
void main() => runApp(new MyApp()); | |
ThemeData theme = new ThemeData( | |
primaryColor: Colors.black, | |
backgroundColor: Colors.white10 | |
); | |
class MyApp extends StatelessWidget { | |
// This widget is the root of your application. | |
@override | |
Widget build(BuildContext context) { | |
return new MaterialApp( | |
title: 'Photo View example', | |
theme: theme, | |
home: new Scaffold( | |
body: new Home(), | |
), | |
); | |
} | |
} | |
class Home extends StatelessWidget{ | |
Future<ui.Image> loadImage() async { | |
ByteData data = await rootBundle.load("graphics/test.jpg"); | |
if (data == null) { | |
print("data is null"); | |
} else { | |
var codec = await ui.instantiateImageCodec(data.buffer.asUint8List()); | |
var frame = await codec.getNextFrame(); | |
return frame.image; | |
} | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Container( | |
constraints: BoxConstraints.expand(), | |
child: FutureBuilder( | |
future: loadImage(), | |
builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) { | |
switch(snapshot.connectionState) { | |
case ConnectionState.waiting : | |
return Center(child: Text("loading..."),); | |
default: | |
if (snapshot.hasError) { | |
return Center(child: Text("error: ${snapshot.error}"),); | |
} else { | |
return ImagePainter(image: snapshot.data); | |
} | |
} | |
}, | |
), | |
); | |
} | |
} | |
class ImagePainter extends StatefulWidget { | |
ui.Image image; | |
ImagePainter({this.image}) : assert(image != null); | |
@override | |
State<StatefulWidget> createState() { | |
return ImagePainterState(); | |
} | |
} | |
class ImagePainterState extends State<ImagePainter> { | |
@override | |
Widget build(BuildContext context) { | |
return CustomPaint( | |
painter: CustomImagePainter(image: widget.image), | |
); | |
} | |
} | |
class CustomImagePainter extends CustomPainter { | |
ui.Image image; | |
CustomImagePainter({this.image}): assert(image != null); | |
@override | |
void paint(ui.Canvas canvas, ui.Size size) { | |
// TODO: implement paint | |
Offset imageSize = Offset(image.width.toDouble(), image.height.toDouble()); | |
Paint paint = new Paint() | |
..color = Colors.green; | |
// canvas.drawCircle(size.center(Offset.zero), 20.0, paint); | |
print(size); | |
canvas.save(); | |
var scale = size.width / image.width; | |
canvas.scale(scale); | |
// canvas.translate(image.width/2 * scale, image.height/2 * scale); | |
// canvas.rotate(45 * PI /180); | |
// canvas.translate(- image.width /2/ scale, - image.height/2/scale); | |
canvas.drawImage(image, Offset.zero, paint); | |
} | |
@override | |
bool shouldRepaint(CustomPainter oldDelegate) { | |
return false; | |
} | |
} |
I tried implementing your code (without comments but it is clipped the image !) did you find any alternative?
Please check the demo app here
@nguyenbakim this also not working this gives error
This will not work properly. I have created this gist to link with a stackoverflow question seeking solution.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
did this rotate the image on canvas? I need to implement in my app!
Thank You in advance !