Being a Developer: Canvas

Showing posts with label Canvas. Show all posts

2012/05/24

Windows Gadget에 HTML5 적용하기

Windows Gadget에 HTML5를 적용하는 방법을 찾아 보았다.

검색을 해 보았지만 쉽게 나오지 않았다. 어렵사리 찾았는데 방법이 생각보다 쉬웠다. 레지스트리를 수정하는 것도 아니고 단순히 HTML 파일에 아래 내용만 더 기술하면 되는 것이였다.

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>

물론 시스템에 IE9가 설치 되어 있어야 한다.

HTML5의 중요한 속성중 하나인 Canvas를 테스트 해 봤다.

(HTML5 Canvas 소스 출처: http://www.w3schools.com/html5/html5_canvas.asp)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9"/>
        <meta http-equiv="Content-Type"    content="text/html;    charset=Unicode" />
        <style type="text/css">
        body
        {
            margin: 0;
            width: 200px;
            height: 100px;
            font-family: verdana;
            font-weight: bold;
            font-size: 20px;
        }
        #gadgetContent
        {
            margin-top: 0px;
            width: 100%: middle;
            text-align: center;
            overflow: hidden;
        }
        </style>
    </head>
    
    <body>
        <div id="gadgetContent">
        Canvas
        <canvas    id="myCanvas" width="200" height="50"></canvas>
        </div>
    </body>

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var grd=ctx.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    ctx.fillStyle=grd;
    ctx.fillRect(0,0,175,50);
</script>
</html>

실행한 결과 아래와 같이 HTML5 Canvas위에 그라데이션이 그려졌다.

&

Original Post : http://neodreamer-dev.tistory.com/657

2010/05/06

[Android Dev.] Canvas.drawPosText 의 불편한 진실

이전 Android 에서의 2D Drawing 에 관련한 글을 올렸었는데 그 글에서 drawPosText 함수의 에러에 대한 글을 썼었다.

2010/05/06 - [Dev Story/Android] - [Android Dev.] 2D Drawing

다른 텍스트 출력은 문제가 없는데 drawPosText 함수만 호출하면 문제가 발생하여 그에 대한 원인을 찾느라 시간을 좀 허비했다. API 문서를 좀더 자세히 읽어 봤더라면 시간을 절약할 수 있었을 것이다.

이 함수는 아래와 같은 형태를 갖고 있다.

public void drawPosText(String text, float[] pos, Paint paint)

Parameters

text     The text to be drawn

pos     Array of [x,y] positions, used to position each character

paint     The paint used for the text (e.g. color, size, style)

함수만 보고 이 함수의 기능이 주어진 문자를 주어진 좌표 배열에 출력을 해주는 것이라고 생각하고 아래와 같은 코드로 테스트를 해 보았다.

myPaint.setARGB( 0, 255, 0, 255 );
float[] pos = new float[] {
        60, 50, 
        60, 420 
        };
canvas.drawPosText( "Android drawPosText", pos, myPaint );

이 코드가 60,50 과 60,420 좌표에 "Android drawPosText"를 그려 줄 것이라고 예상을 했지만 예상을 깨고 에러 화면만을 보여 주었다.

잘못 된 drawPosText 함수 사용에 따른 에러화면

어렵게 예제 자료를 찾아서 확인해 보았더니 drawPosText 함수의 기능을 주어진 문자열의 각 문자를 좌표 배열의 각각의 위치에 출력하는 기능이였다. API 문서에도 아래와 같이 설명이 되어 있었다.

Draw the text in the array, with each character's origin specified by the pos array.

그래서 아래와 같은 코드로 테스트를 해 보았더니 에러 없이 문자를 출력해 주었다. (보라색 비뚤비뚤 Android 글자)

myPaint.setARGB( 128, 255, 0, 255 );
float[] pos = new float[] {
        160, 20,  
        170, 25,
        180, 20,
        190, 25,
        200, 20,
        210, 25,
        220, 20
        };
canvas.drawPosText( "Android", pos, myPaint );

Canvas의 drawPosText 를 이용한 문자 출력

아래 코드를 수행하여 보면 보다 명확하게 알 수 있다.

Paint paint = new Paint();
paint.setColor( Color.GREEN );
float[] pos = new float[] { 60, 50, 60, 420 };
String strMsg = "AB";
canvas.drawPosText( strMsg.toCharArray(), 0, strMsg.length(), pos, paint );

Canvas의 drawPosText 를 이용한 문자 출력

<

Original Post : http://neodreamer-dev.tistory.com/432

[Android Dev.] 2D Drawing

Android 의 2D 드로잉은 Canvas 객체를 이용하여 하는데 Canvas 의 사용에 있어 중요한 객체가 Paint 객체인데 이 Paint 객체에는 드로잉에 필요한 각종 설정을 담고 있다.

위의 이미지를 출력하기위한 코드이다.

public class My2D extends Activity 
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        
        requestWindowFeature(Window.FEATURE_NO_TITLE); // 타이틀바 제거
        setContentView( new My2DView( this ) );
        //setContentView(R.layout.main);
    }
    
    class My2DView extends View
    {
        public My2DView(Context context) 
        {
            super(context);
        }
        
        @Override
        public void onDraw(Canvas canvas) 
        {
            // Canvas 배경 설정
            canvas.drawColor(Color.parseColor("#030303"));
            
            // Bitmap 을 Canvas 에 뿌리기
            Bitmap bm = BitmapFactory.decodeResource(
                        getResources(), R.drawable.icon);
            canvas.drawBitmap(bm, 100, 100, null);
            
            // 드로잉을 위핸 Paint 객체 생성
            Paint myPaint = new Paint();
            myPaint.setAntiAlias( true ); // AntiAliasing 설정
            
            // 선 그리기
            myPaint.setColor( Color.parseColor("#FF0000") ); // 선 색상 설정
            canvas.drawLine( 10, 10, 100, 100, myPaint );

            // 도형 그리기
            myPaint.setARGB( 128, 0, 255, 255 ); // 색상 설정
            canvas.drawCircle( 200, 300, 100, myPaint ); // 원 그리기
            myPaint.setARGB( 128, 255, 0, 255 ); // 색상 설정
            canvas.drawCircle( 100, 250, 100, myPaint ); // 원 그리기       
            
            myPaint.setARGB( 128, 255, 0, 0 ); // 색상 설정
            // 10x10 크기의 모서리가 둥근 사각형 그리기  
            canvas.drawRoundRect( 
                    new RectF(150.0f, 60.0f, 300.0f, 160.0f), 
                    10.0f, 10.0f, myPaint );         
            
            Path myPath = new Path(); // 패스 생성
            // 패스에 시계방향 원형 추가
            myPath.addCircle( 200, 300, 100, Direction.CW ); 
            myPaint.setARGB( 128, 0, 255, 255 ); // 색상 설정
            myPaint.setTextSize( 15 ); // 폰트 크기 설정
            // 패스를 따라 5pixel 떨어진 글자 출력
            canvas.drawTextOnPath( 
                    "Hello Android 2D", 
                    myPath, 0.0f, -5.0f, myPaint ); 
            
            // 문자 출력
            myPaint.setColor( Color.CYAN ); // 색상 설정
            canvas.drawText( "Android drawText", 20, 20, myPaint ); 
            
            myPaint.setARGB( 0, 255, 0, 255 );
            float[] pos = new float[] { 60, 50, 60, 420 };
            //canvas.drawPosText( "Android drawPosText", pos, myPaint );
        }        
    }
}

다른 것은 어렵지 않게 되는데 맨 마지막 시도한 drawPosText 는 잘 되지 않는데 이 함수만 실행하면 프로그램이 다운되어 버린다. 관련 자료를 찾고 있는데 쉽지가 않다.<

Original Post : http://neodreamer-dev.tistory.com/431

Subscribe to: Posts ( Atom )