如何更改 Flutter 中自定义绘制的来源？

Question

CustomPaint

代码：

return new Scaffold(
  body:
     new GestureDetector(
        onTap: () {
          debugPrint("hello");
        },
        child:
            new Container(
                alignment: FractionalOffset.center,
                child: new CustomPaint(

                     size: new Size(400.0, 400.0),
                     painter: new BarChartPainter(currentHeight),
    ))),
); 


  //x axis code 
  canvas.drawLine(new Offset(0.0, 0.0), new Offset(500.0, 0.0), paintAx);```

x 轴代码将从 (0,0) 到 (500,0) 绘制一条线，该线位于

Paint

框的顶部。原点位于框的左上角。如何更改原点以使 (0,0) 位于绘画框的左下角？

这是截图：

Answer 1

只需使用画布中的翻译方法：

canvas.translate(0, size.height)

。但请注意，在这种情况下，您将需要在 y 轴上使用负值。

如果您希望画布坐标表现得像经典图形，请使用方法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);
  }

Answer 2

我不太确定如何操纵

Canvas

区域的原点。但是，您可以在 translation

 坐标上应用 

Offset，这应该允许您最终将线放置在您想要的位置。

我做了这个简单的例子，可能会有帮助：

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

Answer 3

这是另一个例子。我创建了一种在需要的地方绘制箭头的方法。 如果您愿意，您还可以更改位置、颜色、旋转或缩放。

import 'package:flutter/material.dart';

void drawArrow(Size size, Canvas canvas, Offset position,
    {Color color = Colors.white, scale = 0.10, double angle = 0}) {
  final Paint axisPaint = Paint()..color = color;
  final width = size.width;
  final height = size.height;

/// adjust these values to change the look of the arrow
  const double arrowHeadWidth = 0.50;
  const double arrowHeadHeight = 0.30;
  const double arrowHeadIndent = 0.10;
  const double arrowStickWidth = 0.03;

  final path = Path()
    ..moveTo(width * arrowHeadWidth, height * arrowHeadHeight)
    ..lineTo(width, height * 0.50)
    ..lineTo(width * arrowHeadWidth, height * (1 - arrowHeadHeight))
    ..lineTo(width * arrowHeadWidth + (width * arrowHeadIndent), height * 0.50)
    ..close();
  path.addRect(Rect.fromPoints(
      Offset(width * arrowHeadWidth + (width * arrowHeadIndent),
          height * (0.50 + arrowStickWidth)),
      Offset(0, height * (0.50 - arrowStickWidth))));
  canvas.save();
  canvas.translate(position.dx, position.dy);
  canvas.scale(scale);
  rotate(canvas, width * 0.50, height * 0.50, 0);
  canvas.drawPath(path, axisPaint);
  canvas.restore();
}

void rotate(Canvas canvas, double cx, double cy, double angle) {
  canvas.translate(cx, cy);
  canvas.rotate(angle);
  canvas.translate(-cx, -cy);
}

然后根据需要调用绘制箭头的方法即可。

@override
  void paint(Canvas canvas, Size size) {
 
   drawArrow(size, canvas, Offset(size.width * 0.30,size.height * 0.20),
        scale: 0.30, angle: math.pi / 6);
 
/// more paint methods
 
  }