How to change origin of the custom paint in Flutter?
Just use the method translate in canvas: canvas.translate(0, size.height)
. But mind that in such a case, you will need to use negative values in the y axis.
If you want your canvas coordinates to behave like a classical graph, use the method scale:
@override void paint(Canvas canvas, Size size) { canvas.translate(0, size.height); canvas.scale(1, -1); final paint = Paint(); paint.color = Colors.black; canvas.drawLine(Offset.zero, Offset(500, 500), paint); }
I am not really sure how can you manipulate the origin of Canvas
area. You can, however, apply a translation
on your Offset
coordinates, which should allow you to place your line where you want eventually.
I have made this simple example, it may be of help:
import "package:flutter/material.dart";void main() { runApp(new MaterialApp(home: new MyApp(), ));}class MyApp extends StatefulWidget { @override _MyAppState createState() => new _MyAppState();}class _MyAppState extends State<MyApp> { CustomPaint _myCustomPainter = new CustomPaint( size: new Size(400.0, 400.0), painter: new Line(), ); @override Widget build(BuildContext context) { final key = new GlobalKey<ScaffoldState>(); return new Scaffold( key: key, body: new GestureDetector( onTap: () { debugPrint("hello"); }, child: new Container( alignment: FractionalOffset.center, child: _myCustomPainter ), ),); }}class Line extends CustomPainter { @override void paint(Canvas canvas, Size size) { // canvas.translate(0.0, 100.0); canvas.drawLine(new Offset(100.0, -50.0).translate(0.0, 100.0), new Offset(0.0, 100.0).translate(0.0, 100.0), new Paint() ); } @override bool shouldRepaint(Line oldDelegate) { // Since this Line painter has no fields, it always paints // the same thing, and therefore we return false here. If // we had fields (set from the constructor) then we would // return true if any of them differed from the same // fields on the oldDelegate. return false; }}