Kết quả 1 đến 7 của 7
  1. #1
    Ngày tham gia
    Feb 2015
    Bài viết
    0

    Một ví dụ đơn giản hướng dẫn sử dụng Canvas để vẽ trong lập trình Android

    sau đây long xin hướng dẫn các bạn một ví dụ về canvas, xin đừng nghĩ nhiều vấn đề phức tạp mà hãy tưởng tượng rằng canvas nó giống như "paint" trên máy tính vậy thôi nhé!


    [img]data/attachments/14/14934-4fb9a3277f378924f1ac76d8f8376952.jpg[/img]

    1) source code demo:
    click vào đây để download source code demo.

    2) canvas là gì?
    - đơn giản là một tờ giấy, một mảnh vải, hay 1 tấm bạc mà nhiệm vụ nó là để cho chúng ta vẽ lên.
    - và tất nhiên để vẽ lên chúng ta phải dùng đến 1 cây viết. và ta sẽ sử dụng đối tượng paint như một cây viết trong android.

    3) paint là gì?
    - paint là 1 class quan trọng trong android, vì nó thường được sử dụng không chỉ để vẽ mà còn nhiều mục đích khác nữa.
    - ta có thể thay đổi màu sắc, nét vẽ, hình dạng nét vé, và độ rộng nét vẽ ...

    4) hướng dẫn lấy màu sắc:
    xem hướng dẫn lấy màu sắc tại đây: http://android.vn/threads/16841/

    5) kết quả demo:


    [img]data/attachments/14/14933-e02e0b365e63e30a0731d891ddbcc096.jpg[/img]

    6) hướng dẫn code:
    - activity_main.xml


    Mã nguồn PHP:
    [color=#000000]
    [/color][color=#007700]<?[/color][color=#0000bb]xml version[/color][color=#007700]=[/color][color=#dd0000]"1.0" [/color][color=#0000bb]encoding[/color][color=#007700]=[/color][color=#dd0000]"utf-8"[/color][color=#0000bb]?>[/color]<framelayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/fl1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <textview android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margintop="5dp" android:gravity="center" android:text="@string/parsed_data" android:textappearance="?android:attr/textappearancemedium" android:textstyle="bold" /> </framelayout>
    - mainactivity.java


    Mã nguồn PHP:
    [color=#000000]
    package android[/color][color=#007700].[/color][color=#0000bb]vn[/color][color=#007700]; [/color][color=#0000bb]import java[/color][color=#007700].[/color][color=#0000bb]util[/color][color=#007700].[/color][color=#0000bb]arraylist[/color][color=#007700]; [/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]app[/color][color=#007700].[/color][color=#0000bb]activity[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]content[/color][color=#007700].[/color][color=#0000bb]context[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]graphics[/color][color=#007700].[/color][color=#0000bb]canvas[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]graphics[/color][color=#007700].[/color][color=#0000bb]color[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]graphics[/color][color=#007700].[/color][color=#0000bb]paint[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]graphics[/color][color=#007700].[/color][color=#0000bb]path[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]os[/color][color=#007700].[/color][color=#0000bb]bundle[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]view[/color][color=#007700].[/color][color=#0000bb]motionevent[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]view[/color][color=#007700].[/color][color=#0000bb]surfaceholder[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]view[/color][color=#007700].[/color][color=#0000bb]surfaceview[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]view[/color][color=#007700].[/color][color=#0000bb]view[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]view[/color][color=#007700].[/color][color=#0000bb]view[/color][color=#007700].[/color][color=#0000bb]ontouchlistener[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]view[/color][color=#007700].[/color][color=#0000bb]viewgroup[/color][color=#007700].[/color][color=#0000bb]layoutparams[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]view[/color][color=#007700].[/color][color=#0000bb]window[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]view[/color][color=#007700].[/color][color=#0000bb]windowmanager[/color][color=#007700];[/color][color=#0000bb]import android[/color][color=#007700].[/color][color=#0000bb]widget[/color][color=#007700].[/color][color=#0000bb]framelayout[/color][color=#007700]; public class [/color][color=#0000bb]mainactivity [/color][color=#007700]extends [/color][color=#0000bb]activity [/color][color=#007700]implements [/color][color=#0000bb]ontouchlistener[/color][color=#007700]{ [/color][color=#0000bb]drawpanel dp[/color][color=#007700]; private [/color][color=#0000bb]arraylist[/color][color=#007700]<[/color][color=#0000bb]path[/color][color=#007700]> [/color][color=#0000bb]pointstodraw [/color][color=#007700]= new [/color][color=#0000bb]arraylist[/color][color=#007700]<[/color][color=#0000bb]path[/color][color=#007700]>(); private [/color][color=#0000bb]paint mpaint [/color][color=#007700]= new [/color][color=#0000bb]paint[/color][color=#007700](); [/color][color=#0000bb]path path[/color][color=#007700]; @[/color][color=#0000bb]override [/color][color=#007700]public [/color][color=#0000bb]void oncreate[/color][color=#007700]([/color][color=#0000bb]bundle savedinstancestate[/color][color=#007700]) { [/color][color=#0000bb]super[/color][color=#007700].[/color][color=#0000bb]oncreate[/color][color=#007700]([/color][color=#0000bb]savedinstancestate[/color][color=#007700]); [/color][color=#ff8000]//thiết lập màn hình hình hiển thị không có thanh tiêu đề [/color][color=#0000bb]requestwindowfeature[/color][color=#007700]([/color][color=#0000bb]window[/color][color=#007700].[/color][color=#0000bb]feature_no_title[/color][color=#007700]); [/color][color=#0000bb]setcontentview[/color][color=#007700]([/color][color=#0000bb]r[/color][color=#007700].[/color][color=#0000bb]layout[/color][color=#007700].[/color][color=#0000bb]activity_main[/color][color=#007700]); [/color][color=#0000bb]dp [/color][color=#007700]= new [/color][color=#0000bb]drawpanel[/color][color=#007700]([/color][color=#0000bb]this[/color][color=#007700]); [/color][color=#0000bb]dp[/color][color=#007700].[/color][color=#0000bb]setontouchlistener[/color][color=#007700]([/color][color=#0000bb]this[/color][color=#007700]); [/color][color=#ff8000]//thiết lập full màn hình [/color][color=#0000bb]getwindow[/color][color=#007700]().[/color][color=#0000bb]setflags[/color][color=#007700]([/color][color=#0000bb]windowmanager[/color][color=#007700].[/color][color=#0000bb]layoutparams[/color][color=#007700].[/color][color=#0000bb]flag_fullscreen[/color][color=#007700], [/color][color=#0000bb]windowmanager[/color][color=#007700].[/color][color=#0000bb]layoutparams[/color][color=#007700].[/color][color=#0000bb]flag_fullscreen[/color][color=#007700]); [/color][color=#0000bb]mpaint[/color][color=#007700].[/color][color=#0000bb]setdither[/color][color=#007700]([/color][color=#0000bb]true[/color][color=#007700]); [/color][color=#ff8000]//thiết lập màu sắc của nét vẽ [/color][color=#0000bb]mpaint[/color][color=#007700].[/color][color=#0000bb]setcolor[/color][color=#007700]([/color][color=#0000bb]color[/color][color=#007700].[/color][color=#0000bb]white[/color][color=#007700]); [/color][color=#ff8000]//thiết lập nét vẽ [/color][color=#0000bb]mpaint[/color][color=#007700].[/color][color=#0000bb]setstyle[/color][color=#007700]([/color][color=#0000bb]paint[/color][color=#007700].[/color][color=#0000bb]style[/color][color=#007700].[/color][color=#0000bb]stroke[/color][color=#007700]); [/color][color=#0000bb]mpaint[/color][color=#007700].[/color][color=#0000bb]setstrokejoin[/color][color=#007700]([/color][color=#0000bb]paint[/color][color=#007700].[/color][color=#0000bb]join[/color][color=#007700].[/color][color=#0000bb]round[/color][color=#007700]); [/color][color=#0000bb]mpaint[/color][color=#007700].[/color][color=#0000bb]setstrokecap[/color][color=#007700]([/color][color=#0000bb]paint[/color][color=#007700].[/color][color=#0000bb]cap[/color][color=#007700].[/color][color=#0000bb]round[/color][color=#007700]); [/color][color=#ff8000]//độ rộng của nét vẽ [/color][color=#0000bb]mpaint[/color][color=#007700].[/color][color=#0000bb]setstrokewidth[/color][color=#007700]([/color][color=#0000bb]30[/color][color=#007700]); [/color][color=#ff8000]//framelayout fl = new framelayout(this); [/color][color=#0000bb]framelayout fl [/color][color=#007700]= ([/color][color=#0000bb]framelayout[/color][color=#007700]) [/color][color=#0000bb]findviewbyid[/color][color=#007700]([/color][color=#0000bb]r[/color][color=#007700].[/color][color=#0000bb]id[/color][color=#007700].[/color][color=#0000bb]fl1[/color][color=#007700]); [/color][color=#0000bb]fl[/color][color=#007700].[/color][color=#0000bb]setlayoutparams[/color][color=#007700](new [/color][color=#0000bb]layoutparams[/color][color=#007700]([/color][color=#0000bb]layoutparams[/color][color=#007700].[/color][color=#0000bb]fill_parent[/color][color=#007700], [/color][color=#0000bb]layoutparams[/color][color=#007700].[/color][color=#0000bb]fill_parent[/color][color=#007700])); [/color][color=#0000bb]fl[/color][color=#007700].[/color][color=#0000bb]addview[/color][color=#007700]([/color][color=#0000bb]dp[/color][color=#007700]); [/color][color=#0000bb]setcontentview[/color][color=#007700]([/color][color=#0000bb]fl[/color][color=#007700]); } @[/color][color=#0000bb]override [/color][color=#007700]protected [/color][color=#0000bb]void onpause[/color][color=#007700]() { [/color][color=#0000bb]super[/color][color=#007700].[/color][color=#0000bb]onpause[/color][color=#007700](); [/color][color=#0000bb]dp[/color][color=#007700].[/color][color=#0000bb]pause[/color][color=#007700](); } @[/color][color=#0000bb]override [/color][color=#007700]protected [/color][color=#0000bb]void onresume[/color][color=#007700]() { [/color][color=#0000bb]super[/color][color=#007700].[/color][color=#0000bb]onresume[/color][color=#007700](); [/color][color=#0000bb]dp[/color][color=#007700].[/color][color=#0000bb]resume[/color][color=#007700](); } public [/color][color=#0000bb]boolean ontouch[/color][color=#007700]([/color][color=#0000bb]view v[/color][color=#007700], [/color][color=#0000bb]motionevent me[/color][color=#007700]) { [/color][color=#0000bb]synchronized [/color][color=#007700]([/color][color=#0000bb]pointstodraw[/color][color=#007700]) { if ([/color][color=#0000bb]me[/color][color=#007700].[/color][color=#0000bb]getaction[/color][color=#007700]() == [/color][color=#0000bb]motionevent[/color][color=#007700].[/color][color=#0000bb]action_down[/color][color=#007700]) { [/color][color=#0000bb]path [/color][color=#007700]= new [/color][color=#0000bb]path[/color][color=#007700](); [/color][color=#0000bb]path[/color][color=#007700].[/color][color=#0000bb]moveto[/color][color=#007700]([/color][color=#0000bb]me[/color][color=#007700].[/color][color=#0000bb]getx[/color][color=#007700](), [/color][color=#0000bb]me[/color][color=#007700].[/color][color=#0000bb]gety[/color][color=#007700]()); [/color][color=#ff8000]// path.lineto(me.getx(), me.gety()); [/color][color=#0000bb]pointstodraw[/color][color=#007700].[/color][color=#0000bb]add[/color][color=#007700]([/color][color=#0000bb]path[/color][color=#007700]); } else if ([/color][color=#0000bb]me[/color][color=#007700].[/color][color=#0000bb]getaction[/color][color=#007700]() == [/color][color=#0000bb]motionevent[/color][color=#007700].[/color][color=#0000bb]action_move[/color][color=#007700]) { [/color][color=#0000bb]path[/color][color=#007700].[/color][color=#0000bb]lineto[/color][color=#007700]([/color][color=#0000bb]me[/color][color=#007700].[/color][color=#0000bb]getx[/color][color=#007700](), [/color][color=#0000bb]me[/color][color=#007700].[/color][color=#0000bb]gety[/color][color=#007700]()); } else if ([/color][color=#0000bb]me[/color][color=#007700].[/color][color=#0000bb]getaction[/color][color=#007700]() == [/color][color=#0000bb]motionevent[/color][color=#007700].[/color][color=#0000bb]action_up[/color][color=#007700]) { [/color][color=#ff8000]// path.lineto(me.getx(), me.gety()); [/color][color=#007700]} } return [/color][color=#0000bb]true[/color][color=#007700]; } [/color][color=#ff8000]//tạo một lớp con drawpanel [/color][color=#007700]public class [/color][color=#0000bb]drawpanel [/color][color=#007700]extends [/color][color=#0000bb]surfaceview [/color][color=#007700]implements [/color][color=#0000bb]runnable [/color][color=#007700]{ [/color][color=#0000bb]thread t [/color][color=#007700]= [/color][color=#0000bb]null[/color][color=#007700]; [/color][color=#0000bb]surfaceholder holder[/color][color=#007700]; [/color][color=#0000bb]boolean isitok [/color][color=#007700]= [/color][color=#0000bb]false[/color][color=#007700]; public [/color][color=#0000bb]drawpanel[/color][color=#007700]([/color][color=#0000bb]context context[/color][color=#007700]) { [/color][color=#0000bb]super[/color][color=#007700]([/color][color=#0000bb]context[/color][color=#007700]); [/color][color=#0000bb]holder [/color][color=#007700]= [/color][color=#0000bb]getholder[/color][color=#007700](); } public [/color][color=#0000bb]void run[/color][color=#007700]() { while ([/color][color=#0000bb]isitok [/color][color=#007700]== [/color][color=#0000bb]true[/color][color=#007700]) { if (![/color][color=#0000bb]holder[/color][color=#007700].[/color][color=#0000bb]getsurface[/color][color=#007700]().[/color][color=#0000bb]isvalid[/color][color=#007700]()) { continue; } [/color][color=#0000bb]canvas c [/color][color=#007700]= [/color][color=#0000bb]holder[/color][color=#007700].[/color][color=#0000bb]lockcanvas[/color][color=#007700](); [/color][color=#0000bb]c[/color][color=#007700].[/color][color=#0000bb]drawargb[/color][color=#007700]([/color][color=#0000bb]255[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700]); [/color][color=#0000bb]ondraw[/color][color=#007700]([/color][color=#0000bb]c[/color][color=#007700]); [/color][color=#0000bb]holder[/color][color=#007700].[/color][color=#0000bb]unlockcanvasandpost[/color][color=#007700]([/color][color=#0000bb]c[/color][color=#007700]); } } @[/color][color=#0000bb]override [/color][color=#007700]protected [/color][color=#0000bb]void ondraw[/color][color=#007700]([/color][color=#0000bb]canvas canvas[/color][color=#007700]) { [/color][color=#0000bb]super[/color][color=#007700].[/color][color=#0000bb]ondraw[/color][color=#007700]([/color][color=#0000bb]canvas[/color][color=#007700]); [/color][color=#0000bb]synchronized [/color][color=#007700]([/color][color=#0000bb]pointstodraw[/color][color=#007700]) { for ([/color][color=#0000bb]path path [/color][color=#007700]: [/color][color=#0000bb]pointstodraw[/color][color=#007700]) { [/color][color=#0000bb]canvas[/color][color=#007700].[/color][color=#0000bb]drawpath[/color][color=#007700]([/color][color=#0000bb]path[/color][color=#007700], [/color][color=#0000bb]mpaint[/color][color=#007700]); } } } public [/color][color=#0000bb]void pause[/color][color=#007700]() { [/color][color=#0000bb]isitok [/color][color=#007700]= [/color][color=#0000bb]false[/color][color=#007700]; while ([/color][color=#0000bb]true[/color][color=#007700]) { try { [/color][color=#0000bb]t[/color][color=#007700].[/color][color=#0000bb]join[/color][color=#007700](); } catch ([/color][color=#0000bb]interruptedexception e[/color][color=#007700]) { [/color][color=#0000bb]e[/color][color=#007700].[/color][color=#0000bb]printstacktrace[/color][color=#007700](); } break; } [/color][color=#0000bb]t [/color][color=#007700]= [/color][color=#0000bb]null[/color][color=#007700]; } public [/color][color=#0000bb]void resume[/color][color=#007700]() { [/color][color=#0000bb]isitok [/color][color=#007700]= [/color][color=#0000bb]true[/color][color=#007700]; [/color][color=#0000bb]t [/color][color=#007700]= new [/color][color=#0000bb]thread[/color][color=#007700]([/color][color=#0000bb]this[/color][color=#007700]); [/color][color=#0000bb]t[/color][color=#007700].[/color][color=#0000bb]start[/color][color=#007700](); } }}[/color] 
    7) video kết quả chạy demo:


    bài viết đăng lên diễn đàn khác vui lòng ghi rõ nguồn: android.vn
    pass giải nén: http://android.vn
    support: thanhlong90.it@gmail.com
    chúc các bạn thành công!

  2. #2
    Ngày tham gia
    Apr 2015
    Bài viết
    0
    khổ thân mình

  3. #3
    Ngày tham gia
    Jul 2015
    Bài viết
    0
    bạn cho mình hỏi làm cách nào có thể show 1 phần hình ảnh lên canvas vậy?

  4. #4
    Ngày tham gia
    Nov 2014
    Bài viết
    0
    thanks, bài viết rất chi tiết

  5. #5
    Ngày tham gia
    Apr 2015
    Bài viết
    0
    các bạn có thể xem tut của mình taih đây..nói rất chi tiết
    http://thanhcs.blogspot.com/2014/05/android-game-bai-2-hien-hinh-len-vung.html

  6. #6
    Ngày tham gia
    May 2014
    Bài viết
    0
    Trích dẫn Gửi bởi thanhcs
    các bạn có thể xem tut của mình tai đây..rất chi tiết
    http://thanhcs.blogspot.com/2014/05/android-game-bai-2-hien-hinh-len-vung.html

  7. #7
    Ngày tham gia
    Apr 2015
    Bài viết
    0
    hiện tại mình cần làm giống như hành động cào một cái thẻ cào điện thoại, khi cào thì phần mã số sẽ dần hiện ra, bạn có thể giúp đỡ mình không hay có thể cho mình một lib nào hỗ trợ cũng dc. cảm ơn bạn nhiều.

Quyền viết bài

  • Bạn Không thể gửi Chủ đề mới
  • Bạn Không thể Gửi trả lời
  • Bạn Không thể Gửi file đính kèm
  • Bạn Không thể Sửa bài viết của mình
  •