[2D-Graphics] TUT Tạo Hình đơn giản với Canvas, Path, Pain

Thảo luận trong 'Điện thoại, viễn thông' bắt đầu bởi g08ct, 18/9/12.

  1. g08ct New Member

    g08ct

    Tham gia ngày:
    15/8/12
    Bài viết:
    1,116
    Đã được thích:
    55
    Điểm thành tích:
    0
    Giới tính:
    Nam
    Đầu tiên mình giải thích sơ qua về các lớp này:
    +Canvas(Vải bạt): Lớp Canvas đại diện cho một bề mặt mà bạn có thể kẻ vẽ trên nó
    Các phương thức trong lớp Canvas cho phép bạn vẽ các dòng, các hình CN, các hình tròn,
    hoặc các đồ hoạ tuỳ ý khác trên bề mặt
    +Paint: Nó giữ kiểu cách (style), màu sắc, và các thông tin khác cần để vẽ đồ hoạ bao gồm: bitmaps (jpg, png, gif), văn bản (text), và hình dạng hình học .
    VD: Để vẽ một một đường kẻ màu xanh đậm thì set màu hiển thị chứa đựng trong Paint sẽ là:
    Paint.setColor(Color.BLUE);
    +Path(Đường đi):
    Lớp Path giữ một tập hợp lệnh Vector – Drawing như là lines(các đường), rectangle (các HCN) và curves (các đường cong)
    (Còn một lớp để tạo các màu là lớp Color, lớp này chứa các giá trị color nguyên,cái này các bạn tự tìm hiểu nha
    )
    Nói qua thế, còn now
    CODE:
    Đầu tiên tạo lớp Graphics.java

    PHP:
    package yuchi.example.graphics;
    import android.app.Activity;
    import android.os.Bundle;
    public class 
    Graphics extends Activity {
        
    /** Called when the activity is first created. 
    */
        
    @Override
        
    public void onCreate(Bundle savedInstanceState) {
            
    super.onCreate(savedInstanceState);
        
    //Gán nội dung khung nhìn là thể hiện của lớp GraphicsView
            
    setContentView(new GraphicsView(this));
        }
    }  
    Sau đó tạo ra lớp GraphicsView.java (CHứa các lệnh kẻ vẽ trên Canvas)

    PHP:
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Paint.Style;
    import android.graphics.Path;
    import android.graphics.Path.Direction;
    import android.view.View;
    public class 
    GraphicsView extends View {
     
    Path circle;//Biến chứa đựng các câu lệnh kẻ Vector (vector Drawing)
     
    public GraphicsView(Context context) { //Contructor để tạo một View từ CODE
      
    super(context);
     }
     
    //Chuỗi văn bản để viết lên trên đường hình học
     
    private static final String QUOTE "Demo 2D Graphics  - PIT Yuchi"
     
    "Tutorial use Color, Paint,Path,Canvas" ;
    //Các biến lưa trữ màu sắc, style, thông tin về đồ hoạ: bitmaps,text,hình học...
     
    Paint tPaint = new Paint();
     
    Paint cPaint = new Paint();
     
    //Phương thức để vẽ lên Canvas (View.onDraw())
     
    @Override
     
    protected void onDraw(Canvas canvas)
     {
      
    //Tạo ra đường hình học cho Vector (Path)
      
    circle = new Path();//Tạo một thể hiện của lớp Path
      //Thêm đường tròn và theo chiều kim đồng hồ cho PATH, bắt đầu từ vt 3h
      //addCircle(150,150,100,Direction.CW):
      //-> một đường tròn tại vị trí (x,y) theo trục toạ độ x=150, y=150, với một bán kính là 100px
      
    circle.addCircle(150,150,100,Direction.CW);
      
    cPaint.setColor(Color.YELLOW);//Set màu cho hình tròn
      
    cPaint.setShadowLayer(500, +50Color.YELLOW);//set bóng đổ
      
    cPaint.setStyle(Style.STROKE);//set phong cách cho hình, STROKE: Viền xuông, FILL: Đậm đặc
      
    tPaint.setColor(Color.RED);
      
    tPaint.setTextSize(20);//Set cỡ chữ
      
    tPaint.setStyle(Style.FILL);
      
    tPaint.setShadowLayer(50, -2Color.WHITE);
      
    //Kẻ các đường hình học trên Canvas (Lớp khung trong suốt để vẽ đồ hoạ)
    //Vẽ đường hình học là đường tròn (circle), và mang các đặc tính style của cPaint
    canvas.drawPath(circlecPaint);
    canvas.drawTextOnPath(QUOTEcircle0,+20tPaint);//Vẽ văn bản trên đường hình học
      /*Giải thích: drawTextOnPath(QUOTE, circle, 0,+20, tPaint);
       * <Theo thứ tự>
       * Vẽ văn bản trên đường hình học: với văn bản là QUOTE
       * + Vẽ trên đường hình học là circle
       * + Viết văn bản từ cách vị trí bắt đầu vẽ đường hình học là ? px (0)
       * + Và cách phía trên (-) hay phía dưới (+) của đường hình học ? px (trên 20px)
       * (Chú ý: Phía trên của đường hình học là phần nằm gần về phía trục toạ độ)
       * + Với các đặc tính mô tả của tPaint (textfield Paint)
       * */
     
    }
    }  
    Mình đã comment tương đối đầy đủ, đây là một số hình ảnh

    [​IMG][​IMG][​IMG]

    *Chú thích: Hướng để vẽ
    + CW (Clockwise): Theo chiều kim đồng hồ
    + CCW (Counterclockwise): Ngược chiều kim đông hồ
    Chúc các bạn CODE vui vẻ
     
    2 people like this.
    Đang tải...
  2. lamchihieuvnn New Member

    lamchihieuvnn

    Tham gia ngày:
    21/3/13
    Bài viết:
    19
    Đã được thích:
    0
    Điểm thành tích:
    0
    Giới tính:
    Nam
    hình die hết roài mấy anh ơi
     
  3. tong90.it New Member

    tong90.it

    Tham gia ngày:
    8/1/13
    Bài viết:
    531
    Đã được thích:
    867
    Điểm thành tích:
    0
    Giới tính:
    Nam
    Nghề nghiệp:
    Lap Trinh Vien
    Nơi ở:
    TP Hue
    cập nhật lại link tải về kìa sutugau ơi ^^
     
  4. seven New Member

    seven

    Tham gia ngày:
    5/3/13
    Bài viết:
    68
    Đã được thích:
    6
    Điểm thành tích:
    0
    Giới tính:
    Nam
    bai nay very good! thank you
     

Chia sẻ trang này