13. 그래픽(1)

• 커스텀 뷰 클래스 사용
  
  • 간단한 선 그리기
    

    class MainActivity : AppCompatActivity(){
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            //setContentView(R.layout.activity_main)
    
            //커스텀 뷰 사용
            val myView:MyView = MyView(this)
            setContentView(myView)
    
        }
        class MyView: View{
            constructor(context: Context):super(context){
                setBackgroundColor(Color.YELLOW)
            }
            override fun onDraw(canvas: Canvas?) {
                super.onDraw(canvas)
                if(canvas == null) return       //캔버스객체가 null이 아니어야 함
    
                //높이와 폭 변수
                val w = width.toFloat()
                val h = height.toFloat()
    
                //페인트 객체를 꼭 생성해야함(펜이 있어야 그림을 그림)
                val paint = Paint()
                paint.setARGB(255,255,0,0)  //색상설정
                paint.strokeWidth = 10f      //굵기설정
                canvas.drawLine(0f,50f,w,50f,paint) //마지막에 꼭 paint 넣어주기
            }
        }
    }​

  • 랜덤 점 찍기
    

    class MainActivity : AppCompatActivity(){
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            //setContentView(R.layout.activity_main)
    
            //커스텀 뷰 사용
            val myView:MyView = MyView(this)
            setContentView(myView)
    
        }
        class MyView(context: Context): View(context){
            init{
                setBackgroundColor(Color.BLACK)
            }
            override fun onDraw(canvas: Canvas?) {
                super.onDraw(canvas)
                if(canvas == null) return       //캔버스객체가 null이 아니어야 함
    
                val paint = Paint()
                paint.setARGB(255,255,255,255)
                for(x in 1..1000){
                    var dx = (Math.random()*width).toFloat()
                    var dy = (Math.random()*height).toFloat()
                    canvas.drawPoint(dx,dy,paint)
                }
            }
        }
    }​

  • RectF
    - left, top, right, bottom 의 점 정보를 담고 있는 클래스
    

    class MainActivity : AppCompatActivity(){
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            //setContentView(R.layout.activity_main)
    
            //커스텀 뷰 사용
            val myView:MyView = MyView(this)
            setContentView(myView)
    
        }
        class MyView(context: Context): View(context){
            init{
                setBackgroundColor(Color.BLACK)
            }
            override fun onDraw(canvas: Canvas?) {
                super.onDraw(canvas)
                if(canvas == null) return       //캔버스객체가 null이 아니어야 함
                val paint = Paint()
    
                val r1 = RectF(10f,10f,110f,110f)
                val r2 = RectF(150f,10f,350f,100f)
                val r3 = RectF(10f,120f,110f,220f)
    
                paint.color = Color.YELLOW
                canvas.drawRoundRect(r1,5f,5f,paint)    //모서리가 둥근 사각형
                canvas.drawOval(r2,paint)       //타원
    
                paint.color = Color.RED
                //(점, 호 파인거 시작, 호 파인거 끝, 파인 부분 원점이랑 연결할지, 펜)
                canvas.drawArc(r3,120f,270f,true,paint) //호
    
                paint.color = Color.YELLOW
                paint.strokeWidth = 10f
                val pts = floatArrayOf(10f, 250f, 100f, 270f,   //여러개의 라인 그리기
                    100f, 270f, 20f, 290f,
                    20f, 290f, 120f, 300f)
                canvas.drawLines(pts,paint)
            }
        }
    }

  • 커스텀 뷰를 xml 에 적용하기
    

    class MainActivity : AppCompatActivity(){
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
        }
    
        class MyView: View {
            constructor(context: Context): super(context)  {
                setBackgroundColor(Color.YELLOW)
            }
            //코틀린 코드에서 만든 것을 xml 에 포함시킬 때 반드시 필요한 생성자
            constructor(context: Context, attrs: AttributeSet): super(context, attrs)  {
                setBackgroundColor(Color.YELLOW)
            }
            override fun onDraw(canvas: Canvas?) {
    
                super.onDraw(canvas)
                if(canvas == null) return       //캔버스객체가 null 이 아니어야 함
                val paint = Paint()
    
                val r = RectF(100f,100f,300f,300f)
    
                //속이 빈 사각형 그리기
                paint.style = Paint.Style.STROKE
                paint.strokeWidth = 20f
                canvas.drawRect(r,paint)
    
                paint.color = Color.RED
                paint.style = Paint.Style.FILL
                canvas.drawArc(r,90f,270f,false, paint)
            }
        }
    }​

  • 내장 폰트 설정
    

    class MainActivity : AppCompatActivity(){
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
        }
    
        class MyView: View {
            constructor(context: Context): super(context)  {
                setBackgroundColor(Color.YELLOW)
            }
            //코틀린 코드에서 만든 것을 xml 에 포함시킬 때 반드시 필요한 생성자
            constructor(context: Context, attrs: AttributeSet): super(context, attrs)  {
                setBackgroundColor(Color.YELLOW)
            }
            override fun onDraw(canvas: Canvas?) {
                super.onDraw(canvas)
                if(canvas == null) return       //캔버스객체가 null 이 아니어야 함
                val paint = Paint()
                paint.textSize = 50f
    
                var t = Typeface.create(Typeface.DEFAULT,Typeface.NORMAL)
                paint.typeface = t
                canvas.drawText("DEFAULT 폰트",10f,100f,paint)
    
                t = Typeface.create(Typeface.MONOSPACE, Typeface.BOLD)
                paint.typeface = t
                canvas.drawText("MONOSPACE 폰트", 10f, 200f, paint)
    
                t = Typeface.create(Typeface.SERIF, Typeface.BOLD_ITALIC)
                paint.typeface = t
                canvas.drawText("SERIF 폰트", 10f, 300f, paint)
    
                t = Typeface.create(Typeface.SANS_SERIF, Typeface.ITALIC)
                paint.typeface = t
                canvas.drawText("SANS_SERIF 폰트", 10f, 400f, paint)
            }
        }
    }​

  • 외부 폰트 설정
    

    class MyView: View {
        constructor(context: Context): super(context)  {
            setBackgroundColor(Color.YELLOW)
        }
        //코틀린 코드에서 만든 것을 xml 에 포함시킬 때 반드시 필요한 생성자
        constructor(context: Context, attrs: AttributeSet): super(context, attrs)  {
            setBackgroundColor(Color.YELLOW)
        }
        override fun onDraw(canvas: Canvas?) {
            super.onDraw(canvas)
            if(canvas == null) return       //캔버스객체가 null 이 아니어야 함
            val paint = Paint()
            paint.textSize = 50f
    
            try{
                val myFont = Typeface.createFromAsset(context.assets,"ScriptoniteDemo.ttf")
                paint.typeface = myFont
                canvas.drawText("This is a new font",10f,100f,paint)
            }catch (e:Exception){
                e.printStackTrace()
            }
        }
    }​

  • Activity에서 bitmap 이미지 출력
    

    class MainActivity : AppCompatActivity(){
        
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            //그림을 그리는 공간 생성
            val myBitmap = Bitmap.createBitmap(800,600,Bitmap.Config.ARGB_8888)
    
            //비트맵 공간의 배경색을 파랑색으로
            val myCanvas = Canvas(myBitmap)
            myCanvas.drawColor(Color.argb(255,0,0,255))
    
            val paint = Paint()         //페인트 객체 생성하고
            paint.textSize = 100f       //글자크기 설정
            paint.color = Color.argb(255,255,255,255)   //페인트 색상 설정
            myCanvas.drawText("Hello World!",100f,100f,paint)
    
            paint.color=Color.argb(255,255,255,0)
            myCanvas.drawCircle(400f,300f,100f,paint)
    
            //ImageView 객체에 비트맵 공간에서 그린 것을 전달
            val myImageView = ImageView(this)
            myImageView.setImageBitmap(myBitmap)
            setContentView(myImageView) //ImageView 객체를 화면에 출력
        }
        
    }​

  • 이미지 리소스를 비트맵 객체로 변환해 화면에 출력
    

    class MainActivity : AppCompatActivity(){
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(MyView(this))
        }
    
        class MyView(context: Context): View(context) {
            override fun onDraw(canvas: Canvas?) {
                super.onDraw(canvas)
                if (canvas == null) return
    
                canvas.drawColor(Color.LTGRAY)      //캔버스의 배경색 설정
    
                val paint = Paint()     //페인트 객체 생성
                val b: Bitmap = BitmapFactory.decodeResource(resources, R.drawable.harubang)    //리소르->비트맵 변환
                canvas.drawBitmap(b,0f,0f,null)
                
            }
        }
    }​

  • 부분 이미지 확대 및 축소