How to change origin of the custom paint in Flutter? How to change origin of the custom paint in Flutter? flutter flutter

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:

enter image description here

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;  }}