【Flutter】カスタマイズ描画（CustomPaint）

Flutterの描画

Flutterには、Canvas,　Paint,　Pathを用いてカスタマイズ描画できる(円形、多角形、直線、破線など)

• Paint編
• Canvas編
• Path編

※本記事は下記のZenn本にまとめました。

描画の属性

• Canvas(キャンバス)
• Paint(筆)
• Path(パス)

Canvas関数のまとめ

---->[キャンバスの状態]----
void save()
void saveLayer(Rect bounds, Paint paint)
void restore()
int getSaveCount()

---->[キャンバス変換]----
void skew(double sx, double sy)
void rotate(double radians)
void scale(double sx, [double sy])
void translate(double dx, double dy)
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 drawPoints(PointMode pointMode, List<Offset> points, Paint paint)
void drawRawPoints(PointMode pointMode, Float32List points, Paint paint)
void drawLine(Offset p1, Offset p2, Paint paint)
void drawVertices(Vertices vertices, BlendMode blendMode, 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 p, Paint paint)
void drawImageRect(Image image, Rect src, Rect dst, Paint paint)
void drawImageNine(Image image, Rect center, Rect dst, Paint paint)
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 drawColor(Color color, BlendMode blendMode)
void drawPath(Path path, Paint paint)
void drawPaint(Paint paint)
void drawShadow(Path path, Color color, double elevation, bool transparentOccluder)
void drawPicture(Picture picture)

Paintの属性

1. color: 筆のカラー
2. strokeWidth: 線の幅
3. style: 塡充方式
   • PaintingStyle.fill : 塡充
   • PaintingStyle.stroke: 中空
4. strokeCap: 線のキャップ

   enum StrokeCap {
    butt,
    round,
    square,
   }
   

5. blendMode

Pathの関数一覧

Pathの関数は下記の一覧にあり、CanvasのdrawPath(Path path, Paint paint)関数も用いて、色々カスタマイズ描画できる

---->[座標の移動(絶対座標)]----
void moveTo(double x, double y)
void lineTo(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 relativeMoveTo(double dx, double dy)
void relativeLineTo(double dx, double dy)
void relativeQuadraticBezierTo(double x1, double y1, double x2, double y2)
void relativeCubicTo(double x1, double y1, double x2, double y2, double x3, double y3)
void relativeConicTo(double x1, double y1, double x2, double y2, double w)
void relativeArcToPoint(Offset arcEndDelta, { Radius radius = Radius.zero, double rotation = 0.0, bool largeArc = false, bool clockwise = true, })

---->[パス追加]----
void addRect(Rect rect)
void addRRect(RRect rrect)
void addOval(Rect oval)
void addArc(Rect oval, double startAngle, double sweepAngle)
void addPolygon(List<Offset> points, bool close)
void addPath(Path path, Offset offset, {Float64List matrix4})
void extendWithPath(Path path, Offset offset, {Float64List matrix4})

---->[パス操作]----
void close()
void reset()
bool contains(Offset point)
Path shift(Offset offset)
Path transform(Float64List matrix4)
Rect getBounds()   
set fillType(PathFillType value)
static Path combine(PathOperation operation, Path path1, Path path2)
PathMetrics computeMetrics({bool forceClosed = false})