뷰 베이스 사용자화(2)

4279 단어

Canvas 드로잉에 대한 액세스 가능성


Canvas 드로잉에 대한 액세스 - 범위 트림 및 형상 변환

1범위 자르기


범위 자르기에는 clipRect()와 clipPath()가 있습니다.자르기 방법 이후의 그리기 코드는 모두 자르기 범위 내에 제한됩니다.
1.1 clipRect()
canvas.save()
canvas.translate(mDefaultWidth / 2f, mDefaultHeight / 2f)
val rectF = RectF(-100f, -100f, 200f, 100f)
canvas.clipRect(rectF)
canvas.drawBitmap(bitmap, -mDefaultWidth / 2f, -mDefaultHeight / 2f, mPaint)
canvas.restore()

1.2 clipPath()
canvas.save()
canvas.translate(mDefaultWidth / 2f, mDefaultHeight / 2f)
val path = Path()
path.addCircle(0f, 0f, 100f, Path.Direction.CW)
canvas.clipPath(path)
canvas.drawBitmap(bitmap, -mDefaultWidth / 2f, -mDefaultHeight / 2f, mPaint)

canvas.restore()

2 기하학적 변환


형상 변환의 사용은 크게 세 가지 유형으로 나뉜다.
4
  • 흔히 볼 수 있는 2차원 변환을 Canvas를 사용한다

  • 4
  • Matrix를 사용하여 흔하고 흔하지 않은 2차원 변환을 한다

  • 4
  • Camera를 사용하여 3차원 변환을 한다

  • 2.1 흔히 볼 수 있는 2D 변환에 Canvas 사용:


    2.1.1 Canvas.translate(float dx, float dy) 변환
    매개 변수의 dx와dy는 가로와 세로의 위치를 표시합니다.
    canvas.save()
    canvas.translate(200, 0)
    canvas.restore()`
    

    2.1.2 Canvas.rotate(float degrees, float px, float py) 회전:
    매개 변수 안의degrees는 회전 각도이고 단위는 도(즉 일주일에 360°가 있는 그 단위)이며 방향은 시계 방향으로 정방향이다.px와py는 축의 위치다.
    canvas.save()
    canvas.rotate(100, centerX, centerY)
    canvas.restore()
    

    2.1.3 Canvas.scale(float sx, float sy, float px, float py) 축소:
    매개 변수 안의 sxsy는 가로와 세로의 방축 배수이다.pxpy는 수축의 축이다.
    canvas.save()
    canvas.scale(1.5f, 1.5f, dx + mWidth / 2, dy + mHeight / 2)
    canvas.restore()
    

    2.1.4 skew(float sx, float sy) 오타:


    매개 변수 안의 sx와sy는 x방향과 y방향의 오절 계수이다.
    canvas.save()
    canvas.skew(0.5, 0.6f)
    canvas.restore()
    

    2.2 Matrix를 사용한 변환


    Matrix의 일반적인 변환 방법:
    Matrix 객체를 만들려면 다음과 같이 하십시오.
    4
  • Matrix의pre/postTranslate/Rotate/scale/Skew () 방법을 호출하여 기하학적 변환을 설정합니다

  • 4
  • Canvas 사용setMatrix(matrix) 또는 Canvas.concat(matrix)을 사용하여 Canvas에 형상 변환을 적용합니다
    val matrix = Matrix()
    matrix.reset()
    matrix.postTranslate(dx,dy)
    matrix.postRotate(degress)
    canvas.save()
    canvas.concat(matrix)
    canvas.drawBitmap(bitmap, x, y, paint)
    canvas.restore()
    

  • Canvas에 Matrix를 적용하는 방법에는 다음 두 가지가 있습니다.
  • Canvas.setMatrix(matrix) 및 Canvas.concat(matrix).
  • Canvas.setMatrix(matrix): Matrix로Canvas의 현재 변환 행렬을 직접 교체한다. 즉,Canvas의 현재 변환을 버리고 Matrix의 변환(서로 다른 휴대전화 시스템에서 setMatrix(matrix)의 행위가 일치하지 않을 수 있으므로 가능한 한 concat(matrix)을 사용하자
  • Canvas.concat(matrix):Canvas의 현재 변환 매트릭스와Matrix를 곱하기,Canvas의 현재 변환을 바탕으로Matrix의 변환을 중첩합니다

  • 2.2.2 Matrix를 사용한 사용자 정의 변환:


    Matrix의 사용자 정의 변환은 setPolyToPoly () 방법을 사용합니다.
    2.2.2.1 Matrix.setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex, int pointCount)
    매개 변수에서 src와 dst는 원점 집합 목표점 집합이다.srcIndex와 dstIndex는 첫 번째 점의 편이입니다.pointCount는 채집점의 개수입니다. (개수는 4보다 크면 안 됩니다. 4개보다 크면 변환을 계산할 수 없습니다.)
    점대점 매핑 방식으로 변환을 설정합니다.
    setPolyToPoly()의 역할은 여러 점의 매핑 방식을 통해 변환을 직접 설정하는 것이다.다점영사는 지정된 점을 주어진 위치로 이동시켜 변형을 일으키는 것이다.예를 들어 (0,0)->(500,500)은 (0,0) 위치의 픽셀을 (500,500)의 위치로 이동하는 것을 나타낸다. 이것은 단점의 비주얼이고 단점의 비주얼은 평이를 실현할 수 있다.여러 개의 비추면 그림 내용을 임의로 비뚤게 할 수 있다.
    val matrix = Matrix()
    val pointsSrc = arrayOf(left, top, right, top, left, bottom, right, bottom)//     
    val pointsDst = arrayOf(left - 10, top + 50, right + 120, top - 90, left + 20, bottom + 30, right + 20, bottom + 60)
    matrix.reset()
    matrix.setPolyToPoly(pointsSrc, 0, pointsDst, 0, 4);
    canvas.save()
    canvas.concat(matrix)
    canvas.drawBitmap(bitmap, dx, dy, paint)
    canvas.restore()
    

    2.3 Camera를 사용하여 3D 변환


    Camera의 3차원 변환은 회전, 평이, 이동 카메라 세 가지가 있다.
    2.3.1 Camera.rotate*() 3D 회전:
    Camera.rotate*()는 모두 네 가지 방법이 있습니다:rotateX(deg)rotateY(deg)rotateZ(deg)rotate(x, y,z). 주:Camera는Canvas와 마찬가지로 저장하고 회복해야 정상적으로 그릴 수 있습니다. 그렇지 않으면 인터페이스가 새로 고친 후에 그릴 때 문제가 발생합니다.
    2.3.2 Camera.translate(float x, float y, float z) 이동:
    2.3.3 Camera.setLocation(x, y, z) 가상 카메라 위치 설정:
    setLocation () 방법으로 카메라를 뒤로 이동하면 이런 문제를 복구할 수 있습니다.camera.setLocation(0, 0, newZ);Camera.setLocation(x, y,z)의 x와 y 매개 변수는 일반적으로 바뀌지 않으니 0을 직접 채우면 됩니다.

    좋은 웹페이지 즐겨찾기