Flutter: CustomPaint [Phần 2]

Thứ Sáu, 29/01/2021

Tram Ho

Nhưng bạn muốn hơn thế nữa, muốn vẽ các đường cong uốn lượn hay chỉ một phần của đường tròn… Thì bài này là dành cho điều đó.
Lớp Path ngoài việc vẽ các đường thẳng như được giới thiệu trong bài trước, nó còn cung cấp những hàm đặc biệt giúp ta vẽ các đường cong.

Vẽ đường cong

quadraticBezierTo

quadraticBezierTo là hàm vẽ 1 đường cong Bezier bậc 2.

Ví dụ sau ta vẽ 1 đường cong Bezier từ 3 điểm (0, height/2) (trung điểm của cạnh trái) (width / 2,height) (trung điểm của cạnh dưới – điểm kiểm soát) (width, height/2) (trung điểm của cạnh phải)

  <span class="token metadata symbol">@override</span>
  <span class="token keyword">void</span> <span class="token function">paint</span><span class="token punctuation">(</span>Canvas canvas<span class="token punctuation">,</span> Size size<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    Paint paint <span class="token operator">=</span> <span class="token function">Paint</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token punctuation">.</span>color <span class="token operator">=</span> Colors<span class="token punctuation">.</span>red
      <span class="token punctuation">.</span><span class="token punctuation">.</span>style <span class="token operator">=</span> PaintingStyle<span class="token punctuation">.</span>stroke
      <span class="token punctuation">.</span><span class="token punctuation">.</span>strokeWidth <span class="token operator">=</span> <span class="token number">8.0</span><span class="token punctuation">;</span>

    Path path <span class="token operator">=</span> <span class="token function">Path</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    path<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    path<span class="token punctuation">.</span><span class="token function">quadraticBezierTo</span><span class="token punctuation">(</span>size<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>height<span class="token punctuation">,</span> size<span class="token punctuation">.</span>width<span class="token punctuation">,</span> size<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    canvas<span class="token punctuation">.</span><span class="token function">drawPath</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> paint<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

@override

void paint(Canvas canvas, Size size) {

Paint paint = Paint()

..color = Colors.red

..style = PaintingStyle.stroke

..strokeWidth = 8.0;

Path path = Path();

path.moveTo(0, size.height / 2);

path.quadraticBezierTo(size.width / 2, size.height, size.width, size.height / 2);

canvas.drawPath(path, paint);

}

Bạn có thể chạy thử code ở đây Run

cubicTo

Là hàm vẽ 1 đường cong Bezier bậc 3. Không giống như quadraticBezierTo, cubicTo có tới 2 điểm kiểm soát . Do đó bạn có thể tính toán chọn điểm kiểm soát để có thể tạo được 1 đường lượn sóng.

 <span class="token metadata symbol">@override</span>
 <span class="token keyword">void</span> <span class="token function">paint</span><span class="token punctuation">(</span>Canvas canvas<span class="token punctuation">,</span> Size size<span class="token punctuation">)</span> <span class="token punctuation">{</span>
   Paint paint <span class="token operator">=</span> <span class="token function">Paint</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
     <span class="token punctuation">.</span><span class="token punctuation">.</span>color <span class="token operator">=</span> Colors<span class="token punctuation">.</span>red
     <span class="token punctuation">.</span><span class="token punctuation">.</span>style <span class="token operator">=</span> PaintingStyle<span class="token punctuation">.</span>stroke
     <span class="token punctuation">.</span><span class="token punctuation">.</span>strokeWidth <span class="token operator">=</span> <span class="token number">8.0</span><span class="token punctuation">;</span>
   
   Path path <span class="token operator">=</span> <span class="token function">Path</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   path<span class="token punctuation">.</span><span class="token function">cubicTo</span><span class="token punctuation">(</span>size<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span> <span class="token operator">*</span> size<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span> <span class="token operator">*</span> size<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>width<span class="token punctuation">,</span> size<span class="token punctuation">.</span>height<span class="token punctuation">)</span><span class="token punctuation">;</span>
   canvas<span class="token punctuation">.</span><span class="token function">drawPath</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> paint<span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>

@override

Paint paint = Paint()

..color = Colors.red

..style = PaintingStyle.stroke

path.cubicTo(size.width / 4, 3 * size.height / 4, 3 * size.width / 4, size.height / 4, size.width, size.height);

}

Run

conicTo

conicTo về cơ bản cũng hoạt động giống như quadraticBeizerTo với sự khác biệt duy nhất là biến trọng số. Nếu trọng số lớn hơn 1, hình được vẽ là hyperbol. Nếu trọng số là 1 thì hình được vẽ là hình parabol và nếu nó nhỏ hơn 1, hình được vẽ sẽ là hình elip.

  <span class="token metadata symbol">@override</span>
  <span class="token keyword">void</span> <span class="token function">paint</span><span class="token punctuation">(</span>Canvas canvas<span class="token punctuation">,</span> Size size<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    Paint paint <span class="token operator">=</span> <span class="token function">Paint</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token punctuation">.</span>color <span class="token operator">=</span> Colors<span class="token punctuation">.</span>red
      <span class="token punctuation">.</span><span class="token punctuation">.</span>style <span class="token operator">=</span> PaintingStyle<span class="token punctuation">.</span>stroke
      <span class="token punctuation">.</span><span class="token punctuation">.</span>strokeWidth <span class="token operator">=</span> <span class="token number">8.0</span><span class="token punctuation">;</span>

    Path path <span class="token operator">=</span> <span class="token function">Path</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    path<span class="token punctuation">.</span><span class="token function">conicTo</span><span class="token punctuation">(</span>size<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span> <span class="token operator">*</span> size<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>width<span class="token punctuation">,</span> size<span class="token punctuation">.</span>height<span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    canvas<span class="token punctuation">.</span><span class="token function">drawPath</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> paint<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

@override

Paint paint = Paint()

..color = Colors.red

..style = PaintingStyle.stroke

path.conicTo(size.width / 4, 3 * size.height / 4, size.width, size.height, 20);

}

Run

arcTo

arcTo là hàm vẽ 1 phần hình oval từ góc bắt đầu đến góc kết thúc (đo bằng radian)

  <span class="token metadata symbol">@override</span>
  <span class="token keyword">void</span> <span class="token function">paint</span><span class="token punctuation">(</span>Canvas canvas<span class="token punctuation">,</span> Size size<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    Paint paint <span class="token operator">=</span> <span class="token function">Paint</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token punctuation">.</span>color <span class="token operator">=</span> Colors<span class="token punctuation">.</span>red
      <span class="token punctuation">.</span><span class="token punctuation">.</span>style <span class="token operator">=</span> PaintingStyle<span class="token punctuation">.</span>stroke
      <span class="token punctuation">.</span><span class="token punctuation">.</span>strokeWidth <span class="token operator">=</span> <span class="token number">8.0</span><span class="token punctuation">;</span>

    <span class="token comment">// Method to convert degree to radians</span>
    num <span class="token function">degToRad</span><span class="token punctuation">(</span>num deg<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> deg <span class="token operator">*</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span>pi <span class="token operator">/</span> <span class="token number">180.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    Path path <span class="token operator">=</span> <span class="token function">Path</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    path<span class="token punctuation">.</span><span class="token function">arcTo</span><span class="token punctuation">(</span>Rect<span class="token punctuation">.</span><span class="token function">fromLTWH</span><span class="token punctuation">(</span>size<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">degToRad</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">degToRad</span><span class="token punctuation">(</span><span class="token number">90</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    canvas<span class="token punctuation">.</span><span class="token function">drawPath</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> paint<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

@override

Paint paint = Paint()

..color = Colors.red

..style = PaintingStyle.stroke

// Method to convert degree to radians

num degToRad(num deg) => deg * (Math.pi / 180.0);

path.arcTo(Rect.fromLTWH(size.width / 2, size.height / 2, size.width / 4, size.height / 4), degToRad(0), degToRad(90), true);

}

Run

Các fuction khác

addRect

  <span class="token metadata symbol">@override</span>
  <span class="token keyword">void</span> <span class="token function">paint</span><span class="token punctuation">(</span>Canvas canvas<span class="token punctuation">,</span> Size size<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    Paint paint <span class="token operator">=</span> <span class="token function">Paint</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token punctuation">.</span>color <span class="token operator">=</span> Colors<span class="token punctuation">.</span>red
      <span class="token punctuation">.</span><span class="token punctuation">.</span>style <span class="token operator">=</span> PaintingStyle<span class="token punctuation">.</span>stroke
      <span class="token punctuation">.</span><span class="token punctuation">.</span>strokeWidth <span class="token operator">=</span> <span class="token number">8.0</span><span class="token punctuation">;</span>

    Path path <span class="token operator">=</span> <span class="token function">Path</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// Adds a rectangle</span>
    path<span class="token punctuation">.</span><span class="token function">addRect</span><span class="token punctuation">(</span>Rect<span class="token punctuation">.</span><span class="token function">fromLTWH</span><span class="token punctuation">(</span>size<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    canvas<span class="token punctuation">.</span><span class="token function">drawPath</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> paint<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

@override

Paint paint = Paint()

..color = Colors.red

..style = PaintingStyle.stroke

// Adds a rectangle

path.addRect(Rect.fromLTWH(size.width / 2, size.height / 2, size.width / 4, size.height / 4));

}

addRRect

Hình chữ nhật với các góc được bo tròn

  <span class="token metadata symbol">@override</span>
  <span class="token keyword">void</span> <span class="token function">paint</span><span class="token punctuation">(</span>Canvas canvas<span class="token punctuation">,</span> Size size<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    Paint paint <span class="token operator">=</span> <span class="token function">Paint</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token punctuation">.</span>color <span class="token operator">=</span> Colors<span class="token punctuation">.</span>red
      <span class="token punctuation">.</span><span class="token punctuation">.</span>style <span class="token operator">=</span> PaintingStyle<span class="token punctuation">.</span>stroke
      <span class="token punctuation">.</span><span class="token punctuation">.</span>strokeWidth <span class="token operator">=</span> <span class="token number">8.0</span><span class="token punctuation">;</span>

    Path path <span class="token operator">=</span> <span class="token function">Path</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    path<span class="token punctuation">.</span><span class="token function">addRRect</span><span class="token punctuation">(</span>
      RRect<span class="token punctuation">.</span><span class="token function">fromRectAndRadius</span><span class="token punctuation">(</span>Rect<span class="token punctuation">.</span><span class="token function">fromLTWH</span><span class="token punctuation">(</span>size<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">,</span> size<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> Radius<span class="token punctuation">.</span><span class="token function">circular</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
    canvas<span class="token punctuation">.</span><span class="token function">drawPath</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> paint<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

@override

Paint paint = Paint()

..color = Colors.red

..style = PaintingStyle.stroke

path.addRRect(

RRect.fromRectAndRadius(Rect.fromLTWH(size.width / 2, size.height / 2, size.width / 4, size.height / 4), Radius.circular(16))

);

}

Cảm ơn các bạn đã theo dõi bài viết !!

Nguồn

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Flutter: CustomPaint [Phần 2]

Vẽ đường cong

quadraticBezierTo

cubicTo

conicTo

arcTo

Các fuction khác

addRect

addRRect

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript