CHAP 8. 고급 그래픽과 OpenGL

CHAP 8. 고급 그래픽과 OpenGL

Canvas 클래스와 Paint 클래스

그래디언트 • 연속하여 변화되는 색상 • 선형 그래디언트 • 원형 그래디언트 • 비트맵 그래디언트

선형 그래디언트 예제(1/3) ... classMyViewextends View { publicMyView(Context context) { super(context); } publicvoid onDraw(Canvas canvas) { Paint paint = new Paint(); paint.setShader(newLinearGradient(0, 0, 100, 0, Color.WHITE, Color.BLUE, TileMode.CLAMP)); canvas.drawRect(0, 0, 300, 50, paint); canvas.drawText("CLAMP", 0, 70, paint); paint.setShader(newLinearGradient(0, 0, 100, 0, Color.WHITE, Color.BLUE, TileMode.MIRROR));

선형 그래디언트 예제(2/3) canvas.drawRect(0, 70, 300, 120, paint); canvas.drawText("MIRROR", 0, 140, paint); paint.setShader(newLinearGradient(0, 0, 100, 0, Color.WHITE, Color.BLUE, TileMode.REPEAT)); canvas.drawRect(0, 140, 300, 190, paint); canvas.drawText("REPEAT", 0, 210, paint); int[] colors = { Color.WHITE, Color.RED, Color.BLUE }; float[] positions = { 0.0f, 0.8f, 1.0f }; paint.setShader(newLinearGradient(0, 0, 320, 0, colors, null, TileMode.CLAMP)); canvas.drawRect(0, 210, 300, 260, paint); canvas.drawText("colors[]", 0, 280, paint); paint.setShader(newLinearGradient(0, 0, 320, 0, colors, positions, TileMode.CLAMP)); canvas.drawRect(0, 280, 300, 330, paint); canvas.drawText("colors[]와 positions[]", 0, 350, paint); } }

선형 그래디언트 예제(3/3) publicclassGradientTestextends Activity { /** Called when the activity is first created. */ @Override publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(newMyView(this)); } }

원형 그래디언트

원형 그래디언트 예제 publicvoidonDraw(Canvas canvas) { Paint paint = new Paint(); paint.setShader(newRadialGradient(100, 100, 50, Color.RED, Color.YELLOW, TileMode.CLAMP)); canvas.drawCircle(100, 100, 50, paint); paint.setShader(newRadialGradient(250, 100, 50, Color.YELLOW, Color.RED, TileMode.CLAMP)); canvas.drawCircle(250, 100, 50, paint); paint.setShader(newSweepGradient(100, 250, Color.RED, Color.YELLOW)); canvas.drawCircle(100, 250, 50, paint); paint.setShader(newSweepGradient(250, 250, Color.YELLOW, Color.RED)); canvas.drawCircle(250, 250, 50, paint); }

비트맴그래디언트 classMyViewextends View { publicMyView(Context context) { super(context); } publicvoid onDraw(Canvas canvas) { Paint paint = new Paint(); Bitmap bitmap = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.bitmap); paint.setShader(newBitmapShader(bitmap, TileMode.REPEAT, TileMode.REPEAT)); canvas.drawRect(0, 0, this.getMeasuredWidth(), this.getMeasuredHeight(), paint); } }

트랜스퍼 모드 • 이미지와 이미지를 겹쳐서 화면에 그리는 경우에 어떤 연산을 할 것인지를 정의

트랜스퍼 모드 예제 classMyViewextends View { privatestaticfinalintW = 80; privatestaticfinalintH = 80; privatestaticfinalintROW_MAX = 4; // 한 행의 샘플 개수 private Bitmap mSrcB; private Bitmap mDstB; // 비트맵을 생성한다. Bitmap makeDst(int w, int h) { Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); Canvas c = new Canvas(bm); Paint p = new Paint(Paint.ANTI_ALIAS_FLAG); p.setColor(0xFFFFCC44); c.drawOval(newRectF(0, 0, w * 3 / 4, h * 3 / 4), p); returnbm; } // 비트맵을 생성한다. Bitmap makeSrc(int w, int h) { Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); Canvas c = new Canvas(bm); Paint p = new Paint(Paint.ANTI_ALIAS_FLAG); p.setColor(0xFF66AAFF); c.drawRect(w / 3, h / 3, w * 19 / 20, h * 19 / 20, p); returnbm; }

트랜스퍼 모드 예제 @Override protectedvoidonDraw(Canvas canvas) { canvas.drawColor(Color.WHITE); Paint paint = new Paint(); // paint.setFilterBitmap(false); paint.setXfermode(null); canvas.drawBitmap(mDstB, 0, 100, paint); paint.setXfermode(newPorterDuffXfermode(PorterDuff.Mode.SRC_OVER)); canvas.drawBitmap(mSrcB, 0, 100, paint); } …

2차원 변환 • 평행 이동, 신축, 회전과 같은 기본 변환 뿐만 아니라 밀림 변환(skew transformation)과 같은 추가적인 변환도 가능

회전

신축

영상처리 • 영상의 각 픽셀 값에 변화를 주는 것이다. • 영상처리의 예 • 영상을 흐리게 하거나 영상을 선명하게 하는 것 • 영상에서 에지(edge)를 추출하는 것

마스크 필터 • 픽셀(pixel)을 중심으로 마스크를 씌워서 연산을 한 후에 연산의 결과값으로 픽셀값을 변경하는 것 • 블러 마스크 필터 • 엠보스마스크 필터

엠보스 마스크 필터

OpenGL • 1.1버전과 2.0 버전을지원

OpenGL ES 그래픽을 위한 액티비티생성하기

MyGLSurfaceView클래스 작성

Renderer 클래스 작성

삼각형 정의

삼각형 그리기

삼각형에 컬러 정보 추가

삼각형 회전

CHAP 8. 고급 그래픽과 OpenGL