세 가지 그리기 도구 클래스에 대한 자세한 설명

이 섹션 소개:

지난 두 섹션에서 우리는 이미지를 로드하는 Drawable과 Bitmap에 대해 배웠고, 이 섹션에서는 그리기에 대해 배울 것입니다. 일부 API는 Canvas(캔버스), Paint(브러시), Path(경로)입니다! 이 섹션은 매우 중요하며 우리의 보기 맞춤 설정의 기본~자, 이제 이 섹션을 시작하겠습니다~
공식 API 문서: Canvas; Path; 관련 방법에 대한 자세한 설명
1 )페인트(브러시):

선 너비(획 두께), 색상, 투명도 및 채우기 스타일 등과 같은 그리기 스타일을 설정하는 데 사용되는 브러시입니다. 매개변수 없는 생성 방법을 사용하여 직접 Paint 인스턴스를 생성할 수 있습니다.

Paint Paint = new Paint();

Paint(브러시) 관련 속성을 다음 방법을 통해 설정할 수 있습니다. 이 속성, 그래픽 드로잉 관련 및 텍스트 드로잉 관련:

setARGB(int a, int r, int g, int b): 그리기 색상을 설정합니다. a는 투명도를 나타내고 r, g, b는 색상 값을 나타냅니다.
setAlpha(int a): 그려진 그래픽의 투명도를 설정합니다.
setColor(int color): 투명도와 RGB 색상을 포함하는 색상 값으로 표현되는 그리기 색상을 설정합니다.
setAntiAlias(boolean aa): 리소스를 많이 소모하고 그래픽 그리기 속도를 느리게 만드는 앤티앨리어싱 기능 사용 여부를 설정합니다.
setDither(boolean dither): 그려진 그림의 색상을 더 부드럽고 풍성하게, 이미지를 더 선명하게 만드는 이미지 디더링 처리 사용 여부를 설정합니다.
setFilterBitmap(boolean filter): 이 항목이 설정된 경우 true로 설정하면 이미지는 애니메이션 중에 비트맵 이미지에 대한 최적화 작업을 필터링합니다. 디스플레이 속도를 높이기 위해 이 설정은 dither 및 xfermode
setMaskFilter(MaskFilter 마스크 필터) 설정에 따라 달라집니다. MaskFilter를 설정하면 다른 MaskFilter를 사용하여 필터링, 입체 등과 같은 필터 효과를 얻을 수 있습니다.
setColorFilter( ColorFilter colorfilter): 색상을 그릴 때 색상 없는 변형 효과를 얻을 수 있도록 색상 필터를 설정합니다
setPathEffect(PathEffect 효과) 점묘선 등 경로 그리기 효과를 설정합니다.
setShader( 셰이더 셰이더): 이미지 효과를 설정합니다. 셰이더를 사용하여 다양한 그라데이션 효과를 그릴 수 있습니다
setShadowLayer(float radius, float dx, float dy, int color): 그래픽 아래에 그림자 레이어를 설정하여 그림자 효과를 생성합니다. radius는 그림자의 각도, dx와 dy는 x축과 y축의 그림자 거리, color는 그림자의 색상입니다.
setStyle(Paint.Style 스타일): 스타일을 설정합니다. 브러시를 FILL, FILL_OR_STROKE 또는 STROKE
setStrokeCap(Paint.Cap cap)으로 설정: 브러시 스타일이 STROKE 또는 FILL_OR_STROKE인 경우 브러시의 그래픽 스타일을 설정합니다. 원형 스타일 Cap.ROUND, 정사각형 스타일 Cap.SQUARE
setSrokeJoin(Paint.Join 조인) : 스무딩 효과 등 그리기 시 그래픽을 결합하는 방식을 설정합니다.
setStrokeWidth(float width ): 브러시 스타일이 STROKE 또는 FILL_OR_STROKE 일 때 브러시의 굵기를 설정합니다
setXfermode(Xfermode xfermode): 지우개를 만들 때 자주 사용하는 병합, 교차, 결합 등 그래픽이 겹칠 때 처리 방법을 설정합니다. 지우개 효과
setFakeBoldText(boolean fakeBoldText): 굵은 텍스트 구현을 시뮬레이션하며 작은 글꼴에 설정하면 효과가 매우 떨어집니다.
setSubpixelText(boolean subpixelText): 이 항목을 true로 설정하면 도움이 됩니다. LCD 화면의 텍스트 표시 효과
setTextAlign(Paint.Align align): 그려진 텍스트의 정렬 방향 설정
setTextScaleX(float scaleX): 그려진 텍스트의 X축 크기 조정 비율 설정 , 텍스트의 늘이기 효과를 얻을 수 있습니다
setTextSize(float textSize): 그려진 텍스트의 글꼴 크기를 설정합니다
setTextSkewX(floatskewX): 기울임꼴 텍스트를 설정합니다. (서체 서체): 서체 개체, 즉 글꼴 스타일을 설정합니다. 볼드체, 이탤릭체, 세리프체, 산세리프체 등을 포함합니다.
setUnderlineText(boolean underlineText): 밑줄 텍스트 효과 설정
setStrikeThruText(boolean StrikeThruText): 취소선 효과 설정
setStrokeJoin(Paint.Join Join): 조인 모양 설정 , Miter: 관절은 예각이고, Round: 관절이 호형입니다. BEVEL: 관절이 직선입니다
setStrokeMiter(float miter): 브러시 기울기를 설정합니다.
setStrokeCap(Paint.Cap 캡): 회전 스타일을 설정합니다. 기타 일반적으로 사용되는 방법:
float ascent(): 기준선에서 문자의 가장 높은 지점까지의 거리를 측정합니다.
float descent(): 기준선으로부터의 거리를 측정합니다. 기준선을 문자의 가장 낮은 지점까지
int breakText(char[] text, int index, int count, float maxWidth, float[]measureWidth): 한 줄에 얼마나 많은 텍스트가 표시되는지 감지
clearShadowLayer(): 그림자 레이어 지우기 다른 문서는 직접 참고하세요~

2) 캔버스:

이제 붓이 생겼으니 붓(캔버스)으로 그냥 칠하면 되지 않겠습니까~ 일반적인 방법은 다음과 같습니다.
첫 번째는 구조 방법이며 캔버스에는 두 가지 구성 방법이 있습니다.
Canvas(): 빈 캔버스를 만들고 setBitmap() 방법을 사용하여 그리기 위한 특정 캔버스.
Canvas(Bitmap bitmap): 비트맵 객체로 캔버스를 생성하고 비트맵에 내용을 그리므로 비트맵이 null이 아니어야 합니다.
그런 다음 1.drawXXX() 메소드 계열이 나옵니다. 현재 그리기 영역에 특정 좌표 값으로 그림을 그리면 레이어가 겹쳐집니다. 즉, 나중에 칠한 레이어가 이전에 칠한 레이어를 덮게 됩니다. 예:
drawRect(RectF ect, Paint Paint): 영역 그리기, 매개변수 1은 RectF 영역
drawPath(Path path, Paint Paint): 경로 그리기, 매개변수 1은 경로 경로 객체
drawBitmap(비트맵 비트맵, Rect src, Rect dst, 페인트 페인트): Texture의 첫 번째 매개변수는 일반 Bitmap 객체이고, 두 번째 매개변수는 소스 영역(여기서는 비트맵입니다)입니다. 매개변수 3은 대상 영역(캔버스의 위치 및 크기여야 함)이고, 매개변수 4는 페인트 브러시 개체입니다. 크기 조정 및 확장 가능성으로 인해 원본 Rect가 대상 Rect와 같지 않으면 상당한 성능 손실이 발생합니다.
drawLine(float startX, float startY, float stopX, float stopY, Paintpaint): 매개변수 1의 시작점의 x축 위치, 매개변수 2의 시작점의 y축 위치, 매개변수 3의 끝점의 x축 가로 위치를 선으로 그리고, 4개의 매개변수는 y축의 수직 위치이고, 마지막 매개변수는 페인트 브러시 개체입니다.
drawPoint(float x, float y, 페인트 페인트): 점을 그리려면 첫 번째 매개변수는 가로 x축, 두 번째 매개변수는 세로 y축, 세 번째 매개변수는 Paint 개체입니다.
drawText(문자열 텍스트, 부동 x, 부동, 페인트 페인트): 텍스트를 렌더링하기 위해 Canvas 클래스는 위 항목 외에 텍스트를 그릴 수도 있습니다. 매개변수 1은 문자열 유형의 텍스트입니다. 두 번째 매개변수는 x축, 세 번째 매개변수는 y축, 네 번째 매개변수는 Paint 개체입니다.
drawOval(RectF oval, Paint Paint): 타원을 그립니다. 첫 번째 매개변수는 스캔 영역이고 두 번째 매개변수는 페인트 개체입니다.
drawCircle(float cx, float cy, float radius, Paint 페인트): 원 그리기, 매개변수 1은 중심점의 x축, 매개변수 2는 중심점의 y축, 매개변수 3은 반지름, 매개변수 4는 페인트 개체
drawArc(RectF; 타원형, 부동 startAngle, 부동 스위프 각도, 부울 useCenter, 페인트 페인트): 호를 그리기 위한 첫 번째 매개변수는 직사각형 영역과 타원의 경계를 사용하여 모양, 크기 및 호를 정의합니다. (도) 호의 시작 부분에서 매개변수 3 스캔 각도(도)가 시계 방향으로 측정되기 시작합니다. 이것이 사실인 경우 매개변수 4는 타원 중심의 호를 포함합니다. 호를 닫고 거짓이면 호가 됩니다. 매개변수 5는 Paint 객체입니다.
clipXXX()
메서드 계열: 현재 그리기 영역에서 새 항목을 잘라냅니다. 그리기 영역은 캔버스입니다 객체의 현재 그리기 영역입니다. 예:clipRect(new Rect()), 직사각형 영역은 캔버스
3.save()
및
restore()메서드: save():의 현재 그리기 영역입니다. Canvas의 상태를 저장합니다. 저장 후 Canvas의 번역, 크기 조정, 회전, 교차 절단, 자르기 및 기타 작업을 호출할 수 있습니다! restore(): 이전에 저장된 Canvas 상태를 복원하는 데 사용됩니다. 저장 후 캔버스에서 수행되는 작업이 후속 드로잉에 영향을 미치지 않도록 합니다. Save()와 Restore()는 쌍으로 사용해야 합니다(복원은 저장보다 적을 수 있지만 그 이상은 불가능). 복원이 저장보다 많이 호출되면 오류가 보고됩니다!
4.translate(float dx, float dy)： 변환하고 캔버스 x의 좌표 원점을 왼쪽과 오른쪽으로, y를 위아래로 이동합니다. 캔버스의 기본 위치는 (0,0)
5.scale(float sx, float sy)입니다. 확장, x는 가로 방향의 배율, y는 세로 방향의 배율입니다
6.rotate(부동 각도): 회전, 각도는 회전 각도를 나타내며 시계 방향으로 회전

3 )Path

간단한 포인팅은 점을 그리고 선을 연결하는 것을 의미합니다~ Path를 만든 후 Canvas의 drawPath(path, Paint)를 호출할 수 있습니다. 그래픽을 그립니다~ 일반적인 방법은 다음과 같습니다:
addArc(RectF oval, float startAngle, floatweepAngle: 경로에 다각형 추가
addCircle(float x, float y, float radius, Path. Direction dir) : path
addOval(RectF oval, Path.Direction dir): 타원 추가
addRect(RectF ect, Path.Direction dir): 영역 추가
addRoundRect에 원 추가 (RectF ret, float[] radii, Path.Direction dir): 둥근 영역 추가
isEmpty(): 경로가 비어 있는지 확인
transform(행렬 행렬): 행렬 변환 적용
transform (행렬 행렬, 경로 dst): 행렬 변환을 적용하고 결과를 두 번째 매개변수인 새 경로에 넣습니다.
더 많은 고급 효과는 PathEffect 클래스를 사용할 수 있습니다.
moveTo
(float x, float y): 그리지 않으며 모바일 브러시를 이동하는 데만 사용됩니다.
lineTo
(float x, float y): 직선 그리기에 사용되며 기본적으로 (0, 0)부터 시작합니다. moveTo 이동! 예를 들어 mPath.lineTo(300, 300); canvas.drawPath(mPath, mPaint);
quadTo
(float x1, float y1, float x2, float y2): 부드러운 곡선, 즉 베지어 곡선을 그리는 데 사용되며 moveTo!와 함께 사용할 수도 있습니다.
rCubicTo
(float x1, float y1, float x2, float y2, float x3, float y3) 베지어 곡선을 구현하는 데에도 사용됩니다. (x1,y1)은 제어점, (x2,y2)는 제어점, (x3,y3)은 끝점입니다. CubanTo와 동일하지만 좌표는 현재 점을 기준으로 간주됩니다. 이 윤곽선에 제어점을 하나만 더 추가하세요~ 위의 곡선을 그립니다. mPath.moveTo(100, 500); mPath.cubicTo(100, 500, 300, 100, 600, 500); 위에서 moveTo를 추가하지 않은 경우: (0,0)을 시작점으로, (100,500) 및 (300,100)을 제어점으로 사용하여 베지어 곡선을 그립니다
arcTo(RectF 타원, 부동 startAngle, 부동 스위핑 각도): 원호 또는 타원의 일부를 실제로 가로채는 호를 그립니다. ovalRectF는 타원의 직사각형이고, startAngle은 시작 각도입니다. SweepAngle은 끝 각도입니다.

2. 한번 해보세요:

속성이 너무 많아서 손으로 직접 시도해야 이미지가 깊어지죠~ ㅎㅎ View나 SurfaceView에서 그림을 그려야 합니다. 여기서는 View로 그려보겠습니다. View 클래스를 정의한 다음 onDraw()에서 그리기 작업을 완료합니다!

/**
 * Created by Jay on 2015/10/15 0015.
 */
public class MyView extends View{

    private Paint mPaint;


    public MyView(Context context) {
        super(context);
        init();
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init(){
        mPaint = new Paint();
        mPaint.setAntiAlias(true);          //抗锯齿
        mPaint.setColor(getResources().getColor(R.color.puple));//画笔颜色
        mPaint.setStyle(Paint.Style.FILL);  //画笔风格
        mPaint.setTextSize(36);             //绘制文字大小，单位px
        mPaint.setStrokeWidth(5);           //画笔粗细
    }
    
    //重写该方法，在这里绘图
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
    
}

그런 다음 레이아웃에서 이 View를 설정하면 됩니다. 다음 코드는 onDrawable에 작성됩니다~

1) 캔버스 색상 설정:

canvas.drawColor(getResources().getColor(R.color.yellow));   //设置画布背景颜色

2) 원 그리기:

canvas.drawCircle(200, 200, 100, mPaint);           //画实心圆

3 ) 직사각형 그리기:

canvas.drawRect(0, 0, 200, 100, mPaint);            //画矩形

4) 비트맵 그리기:

canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher), 0, 0, mPaint);

5) 호 영역 그리기:

canvas.drawArc(new RectF(0, 0, 100, 100),0,90,true,mPaint);  //绘制弧形区域

true가 false로 변경된 경우:

6) 둥근 직사각형 그리기

canvas.drawRoundRect(new RectF(10,10,210,110),15,15,mPaint); //画圆角矩形

7) 타원 그리기

canvas.drawOval(new RectF(0,0,200,300),mPaint); //画椭圆

8) 다각형 그리기:

Path path = new Path();
path.moveTo(10, 10); //移动到 坐标10,10
path.lineTo(100, 50);
path.lineTo(200,40);
path.lineTo(300, 20);
path.lineTo(200, 10);
path.lineTo(100, 70);
path.lineTo(50, 40);
path.close();
canvas.drawPath(path,mPaint);

9) 텍스트 그리기:

canvas.drawText("最喜欢看曹神日狗了~",50,50,mPaint);    //绘制文字

팔로잉도 가능합니다 이러한 텍스트를 그리는 특정 경로:

Path path = new Path();
path.moveTo(50,50);
path.lineTo(100, 100);
path.lineTo(200, 200);
path.lineTo(300, 300);
path.close();
canvas.drawTextOnPath("最喜欢看曹神日狗了~", path, 50, 50, mPaint);    //绘制文字

10) 사용자 정의 그래픽 그리기:

코드는 인터넷에서 제공됩니다:

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.translate(canvas.getWidth()/2, 200); //将位置移动画纸的坐标点:150,150
    canvas.drawCircle(0, 0, 100, mPaint); //画圆圈

    //使用path绘制路径文字
    canvas.save();
    canvas.translate(-75, -75);
    Path path = new Path();
    path.addArc(new RectF(0,0,150,150), -180, 180);
    Paint citePaint = new Paint(mPaint);
    citePaint.setTextSize(14);
    citePaint.setStrokeWidth(1);
    canvas.drawTextOnPath("绘制表盘~", path, 28, 0, citePaint);
    canvas.restore();

    Paint tmpPaint = new Paint(mPaint); //小刻度画笔对象
    tmpPaint.setStrokeWidth(1);

    float  y=100;
    int count = 60; //总刻度数

    for(int i=0 ; i <count ; i++){
        if(i%5 == 0){
            canvas.drawLine(0f, y, 0, y+12f, mPaint);
            canvas.drawText(String.valueOf(i/5+1), -4f, y+25f, tmpPaint);

        }else{
            canvas.drawLine(0f, y, 0f, y +5f, tmpPaint);
        }
        canvas.rotate(360/count,0f,0f); //旋转画纸
    }

    //绘制指针
    tmpPaint.setColor(Color.GRAY);
    tmpPaint.setStrokeWidth(4);
    canvas.drawCircle(0, 0, 7, tmpPaint);
    tmpPaint.setStyle(Paint.Style.FILL);
    tmpPaint.setColor(Color.YELLOW);
    canvas.drawCircle(0, 0, 5, tmpPaint);
    canvas.drawLine(0, 10, 0, -65, mPaint);
}

이 섹션 요약:

이 섹션에서는 android.graphics 인터페이스 클래스의 세 가지 그리기 API인 Canvas(캔버스), Paint(브러시), Path(경로)에 대해 논의합니다. 학습하는 방법은 다양합니다. 암기하지 말고 필요할 때 찾아보세요. 먼저 대략적인 이미지가 있습니다. 사용자 정의 컨트롤은 어디에 있나요? 천천히 들어가보자~ 알았어, 됐어, 고마워~