flutter繪制基礎

1.前提條件

  • Flutter 開發(fā)環(huán)境搭建
  • Dart 基礎語法

2.繪制的說明

我們去繪畫的時候我們會想在哪畫，畫什么，怎么畫。相對于畫家這種創(chuàng)造性的職業(yè)，畫什么是他們最難的。
到我們我們程序員這里就不必考慮的太多。在哪畫都是固定的，畫什么需求都定好了，怎么畫這才是考驗我們程序員的。

繪畫需要的工具紙、筆、圖形、色彩，在我們的編程中也需要這些。

  • 紙- canvas
  • 筆-Paint
  • 圖形-Path
  • 色-Color

接下來，我們將圍繞著四要素展開，一起探索flutter繪制的世界。

3.關于繪制的代碼

代碼都會同步在github上，有需要的可以自己看 https://github.com/taleStone/flutter_draw

4.開始繪制

我們的目標

  • 創(chuàng)建繪制對象-一張紙
  • 畫一條紅色的線

CustomPaint組件

class Sample2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('flutter繪制的基礎實例'),
      ),
      body: Container(
        child: CustomPaint(
          // 這是我們能畫的地方，使用CustomPaint
          painter: Sample2Painter(),
        ),
      ),
    );
  }
}

CustomPainter

class Sample2Painter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    /// 創(chuàng)建畫筆 并設置顏色
    final paint = Paint()..color = Colors.red;

    /// 畫一條紅色的線
    canvas.drawLine(Offset.zero, Offset(100, 100), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

運行結果

這里不對CustomPaint和CustomPainter做介紹，應為后面我們會詳細的展開講述。

5. 繪制API

canvas的api比較多，主要是實現(xiàn)繪制的方法

/// 畫布狀態(tài)相關

void save() native 'Canvas_save';
void saveLayer(Rect? bounds, Paint paint)
void restore() native 'Canvas_restore';
int getSaveCount() native 'Canvas_getSaveCount';

/// 畫布變換相關
void translate(double dx, double dy) native 'Canvas_translate';
void scale(double sx, [double? sy]) => _scale(sx, sy ?? sx);
void rotate(double radians) native 'Canvas_rotate';
void skew(double sx, double sy) native 'Canvas_skew';
void transform(Float64List matrix4)

/// 畫布裁剪相關
void clipRect(Rect rect, { ClipOp clipOp = ClipOp.intersect, bool doAntiAlias = true })
void clipRRect(RRect rrect, {bool doAntiAlias = true})
void clipPath(Path path, {bool doAntiAlias = true})

/// 線
void drawLine(Offset p1, Offset p2, Paint paint)

///矩形
void drawRect(Rect rect, Paint paint) 
void drawRRect(RRect rrect, Paint paint)
void drawDRRect(RRect outer, RRect inner, Paint paint)

///圓相關
void drawOval(Rect rect, Paint paint)
void drawCircle(Offset c, double radius, Paint paint)
void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)

///圖片
void drawImage(Image image, Offset offset, Paint paint)
void drawImageRect(Image image, Rect src, Rect dst, Paint paint)
void drawImageNine(Image image, Rect center, Rect dst, Paint paint)
void drawPicture(Picture picture)
void drawAtlas(Image atlas,List<RSTransform> transforms,List<Rect> rects,List<Color>? colors,BlendMode? blendMode,Rect? cullRect,Paint paint)
 void drawRawAtlas(Image atlas,Float32List rstTransforms,Float32List rects,Int32List? colors,BlendMode? blendMode,Rect? cullRect,Paint paint) 

///文字
void drawParagraph(Paragraph paragraph, Offset offset) 

///點
void drawPoints(PointMode pointMode, List<Offset> points, Paint paint)
void drawRawPoints(PointMode pointMode, Float32List points, Paint paint)
void drawVertices(Vertices vertices, BlendMode blendMode, Paint paint)

/// 其他
void drawColor(Color color, BlendMode blendMode) 
void drawPaint(Paint paint)
void drawPath(Path path, Paint paint)
void drawShadow(Path path, Color color, double elevation, bool transparentOccluder)

Paint的屬性

blendMode ? BlendMode - 混合模式 - 繪制形狀或合成圖層時要應用的混合模式
color ? Color - 顏色 - 當描邊或填充一個形狀時使用的顏色
colorFilter ? ColorFilter? -  顏色 - 當一個形狀被繪制或當一個層被合成時應用的顏色濾鏡。
filterQuality ? FilterQuality - 濾鏡質量 - 控制在應用濾鏡(如maskFilter)或繪制圖像(如drawImageRect、drawImageNine)時使用的性能與質量的權衡。。
imageFilter ? ImageFilter? - 圖片濾鏡 - 繪制光柵圖片時使用
invertColors ? bool - 是否反色 - 繪制圖像時顏色是否反色
isAntiAlias ? bool  - 是否抗鋸齒 -是否對繪制在畫布上的線條和圖像應用抗鋸齒
maskFilter ? MaskFilter?   - 遮罩濾鏡 -一個蒙版濾鏡(如blur)，用在一個形狀被繪制但還沒被合成到圖像之前。
shader ? Shader?   - 著色器 - 當描邊或填充一個形狀時使用的著色器
strokeCap ? StrokeCap - 線帽類型 - 樣式設置為PaintingStyle.stroke時，要在繪制的線條的末尾放置的結束點的種類。
strokeJoin ? StrokeJoin  - 線接類型 - 在線段之間的連接上放置的類型。
strokeMiterLimit ? double - 斜接限制 -
strokeWidth ? double - 線寬 - 將樣式設置為PaintingStyle.stroke時繪制的寬度。
style ? PaintingStyle - 畫筆樣式

Path的API

///屬性
fillType ? PathFillType ///Determines how the interior of this path is calculated.

///API

///路徑添加
addArc(Rect oval, double startAngle, double sweepAngle) → void
addOval(Rect oval) → void
addPath(Path path, Offset offset, {Float64List? matrix4}) → void
addPolygon(List<Offset> points, bool close) → void
addRect(Rect rect) → void
addRRect(RRect rrect) → void
extendWithPath(Path path, Offset offset, {Float64List? matrix4}) → void

/// 絕對移動
lineTo(double x, double y) → void
moveTo(double x, double y) → void
quadraticBezierTo(double x1, double y1, double x2, double y2) → void
cubicTo(double x1, double y1, double x2, double y2, double x3, double y3) → void
conicTo(double x1, double y1, double x2, double y2, double w) → void
arcTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo) → void
arcToPoint(Offset arcEnd, {Radius radius: Radius.zero, double rotation: 0.0, bool largeArc: false, bool clockwise: true}) → void

///相對移動
relativeArcToPoint(Offset arcEndDelta, {Radius radius: Radius.zero, double rotation: 0.0, bool largeArc: false, bool clockwise: true}) → void
relativeConicTo(double x1, double y1, double x2, double y2, double w) → void
relativeCubicTo(double x1, double y1, double x2, double y2, double x3, double y3) → void
relativeLineTo(double dx, double dy) → void
relativeMoveTo(double dx, double dy) → void
relativeQuadraticBezierTo(double x1, double y1, double x2, double y2) → void

///其他操作方法
close() → void
computeMetrics({bool forceClosed: false}) → PathMetrics
contains(Offset point) → bool
getBounds() → Rect
reset() → void
shift(Offset offset) → Path
transform(Float64List matrix4) → Path
/// 靜態(tài)方法
combine(PathOperation operation, Path path1, Path path2) → Path

所有的API都在這里了，學過h5的canvas應該是很熟悉的，沒學過的也沒關系，可以都看一遍。下篇我們將從paint講起。

示例代碼都放在 https://github.com/taleStone/flutter_draw ，后續(xù)都會同步更新。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容