El último artículo lo escribí viendo el video de la línea de lanzamiento. Después de escribir y jugar, descubrí que su artículo todavía tiene mucho contenido. Extraño.
Luego escribe el canto.
4 niveles de conocimiento de dibujo personalizado
1. Los métodos de la serie DrawXXX() de Canvas y algunos métodos comunes de la clase Paint.
El drawXXX() de canvas es la operación más básica del dibujo personalizado. Solo después de dominar estos métodos podemos saber cómo dibujar contenido. Por ejemplo, cómo dibujar un círculo, cómo dibujar un cuadrado, cómo dibujar texto. Estos contenidos, combinados con algunos métodos comunes de Paint para configurar simplemente el color y el estilo del contenido dibujado, pueden satisfacer la mayoría de las necesidades de dibujo.
2. Una guía completa para pintar
La pintura puede hacer más que solo establecer el color, la sombra y el grosor. Los estilos que puede hacer son realmente enormes y muy detallados. Como filtrado bilineal, formas de esquina, efectos especiales.
3. Asistencia de Canvas en el dibujo: corte de rango y cambios geométricos.
La mayoría de las veces, no se usan, pero cuando se usan, son características geniales.
En el futuro, no tenga miedo de las características geniales diseñadas por el diseñador.
4. Use diferentes métodos de dibujo para controlar el orden de dibujo.
Algunas personas dicen que necesito agregar algunas vistas más para el orden de dibujo, pero esto generalmente tiene problemas de rendimiento. Entonces, lo que resolvemos con el orden de dibujo es el problema de rendimiento. Debido al orden de dibujo, una vista puede hacerlo.
El contenido de la primera serie, el uso más básico de canvas.drawXXX y paint.
1. El comienzo de todo onDraw()
Si domina los métodos de la serie drawXXX() y los conceptos básicos de Paint, podrá satisfacer necesidades de dibujo simples. Incluyen principalmente:
1. Todos los métodos de dibujo bajo la clase Canvas. Por ejemplo dibujarCírculo(), dibujarBitmap()
2. Varios métodos comunes de la clase Pain, como:
modo de pintura paint.style
paint.color establece el color de la pintura
paint.strokeWidth establece el ancho del trazo
interruptor de suavizado paint.isAntiAlias
Relleno de color Canvas.drawColor
Este es el método drawXXX más básico, que consiste en pintar uniformemente el color especificado en toda el área de dibujo.
canvas.drawColor(resources.getColor(R.color.black))
Esto convertirá directamente el área de dibujo en negro.
Las máscaras también se pueden configurar a través de la transparencia.
Similar a drawRGB y drawARGB, el efecto es el mismo.
Este tipo de método de relleno de color se usa generalmente para establecer el color base antes de dibujar o establecer una máscara translúcida después de dibujar.
drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
Los primeros dos parámetros son las coordenadas del centro del círculo. El tercero es el radio del círculo. Juntos constituyen la información básica del círculo. El cuarto parámetro es Paint, proporciona toda la información de estilo excepto la información básica.
En Android, cada vista tiene su propio sistema de coordenadas. no se ven afectados entre sí. El origen del sistema de coordenadas es el punto en la esquina superior izquierda de la Vista. Entonces, cuando establecemos dibujar este círculo, por ejemplo, establecemos las coordenadas del centro del círculo en 300, 300, luego se ve así:
Si el círculo que desea dibujar no es sólido sino hueco, puede hacer esto:
pintura.estilo = Pintura.Estilo.STROKE
Aquí el estilo tiene tres modos, relleno, trazo, relleno y trazo. Estos son Relleno, Trazo, Relleno y Trazo respectivamente.
Estás en modo trazo y relleno y trazo, también puedes establecer el ancho de la línea:
pintura.strokeWidth = 20f
Al dibujar, para suavizar los bordes de los gráficos y el texto, a menudo es necesario activar el suavizado:
pintura.isAntiAlias = verdadero
Entonces, el suavizado es tan bueno, ¿por qué no activarlo de forma predeterminada?
En esencia, el suavizado ocurre porque la resolución de los gráficos es demasiado baja, lo que hace que el ojo humano perciba los granos de píxeles en la imagen.
Entonces, ¿por qué se ve suave cuando el suavizado está activado? Porque el principio del suavizado es modificar el color del borde del gráfico. Y hacer que los gráficos se vean más suaves.
Se puede ver que cuando el suavizado no está activado, el color de todos los píxeles también es negro. Cuando está encendido, el color del borde cambia ligeramente. Por lo tanto, el suavizado provocará una distorsión de los gráficos.
Además de drawCircle, también puede dibujar otros gráficos.
Además, tiene otros dos métodos sobrecargados, drawRect(RectF rect, Paint paint) y drawRect(Rect rect, Paint paint) , que le permiten rellenar directamente rectF o rect para dibujar un rectángulo.
lienzo.drawPoint(50f,50f,pintura)
Miremos de nuevo este drawPoint, que es dibujar un punto, y x e y son las coordenadas del punto. El tamaño del punto se puede establecer mediante strokeWidth.
La forma del punto se puede establecer mediante strokeCap.
Además de ROUND, strokeCap también puede usar BUTT y SQUARE
Un poco como drawCircle y drawRect en modo FILL. El efecto es el mismo, depende de cuál te guste.
Entonces, ¿por qué participar en dos API? Porque drawPoint puede dibujar múltiples puntos.
Aquí se usa drawPoints para pasar una matriz, y cada dos en esta matriz son un par de coordenadas.
El parámetro de compensación se refiere a omitir varios números en la matriz, y el conteo subsiguiente es dibujar varios puntos.
paint.style = Paint.Style.FILL
paint.strokeWidth = 20f
canvas.drawOval(50f,50f,300f,200f,paint)
paint.style = Paint.Style.STROKE下：
Además, tiene un método sobrecargado, drawOval(rect:RectF,paint) también puede usar RectF para dibujar.
Las líneas se pueden dibujar usando drawLine:
lienzo.drawLine(50f,50f,200f,500f,pintura)
Debido a que este no es un gráfico cerrado directamente, el estilo no tiene ningún efecto sobre él.
También es posible dibujar varios puntos a través de drawLines. Es decir, una copia de drawLine.
val floatArray = floatArrayOf(20f,20f,50f,50f,100f,100f,120f,300f,200f,400f,200f,100f) canvas.drawLines(floatArray, pintura)
A continuación, observe drawRoundRect, que es un rectángulo con esquinas redondeadas.
lienzo.drawRoundRect(100f, 100f, 200f, 200f, 10f, 10f, pintura)
A continuación, mire drawArc nuevamente. Esto es para dibujar arcos o sectores.
drawArc usa una elipse para describir un arco.
pintura.estilo = Pintura.Estilo.STROKE
canvas.drawArc(100f,100f,200f,200f,-100f,100f,verdadero,pintura)
En primer lugar, los primeros cuatro parámetros son las coordenadas de los cuatro puntos límite de la elipse y startAngle es el ángulo inicial del arco. La dirección positiva del eje X es la posición de 0 grados, el sentido contrario a las agujas del reloj es el ángulo negativo y el sentido de las agujas del reloj es el ángulo positivo. sweepAngle es el ángulo en el que se barre el arco. Tenga en cuenta que el barrido aquí se refiere al barrido en el sentido de las agujas del reloj en el ángulo inicial. userCenter indica si el radian inicial y la posición final después de deslizar están conectados al punto central. Si está conectado, es un arco. Si no está conectado, está festoneado.
canvas.drawArc(100f,100f,200f,200f,-100f,100f,falso,pintura)
Veamos de nuevo el modo de relleno.
pintura.estilo = Pintura.Estilo.FILL
canvas.drawArc(100f,100f,200f,200f,-100f,100f,verdadero,pintura)
paint.style = Paint.Style.FILL canvas.drawArc(100f,100f,200f,200f,-100f,100f,false,pintura)
Lo anterior es todo el dibujo de gráficos simples de cavans Además del dibujo de gráficos simples, también puede usar la ruta para dibujar gráficos personalizados complejos.
drawPath (ruta de ruta, pintura de pintura)
Este método es un poco complicado.
Todos los métodos mencionados anteriormente dibujan los gráficos dados. Y drawPath puede dibujar gráficos personalizados. Este método se utiliza para tableros de graffiti.
La ruta aquí es para describir el objeto de la ruta.
Por ejemplo, para dibujar una forma de corazón:
La ruta puede describir líneas rectas, curvas cuadráticas, curvas cúbicas, círculos, elipses, rectángulos, arcos y rectángulos redondeados. Al combinar estos gráficos, puede dibujar muchos gráficos complejos.
La ruta tiene dos tipos de métodos, uno es para describir directamente la ruta y el otro es una configuración o cálculo auxiliar.
El primer método de Path: describir directamente el camino
Este tipo de método se puede subdividir en 2 grupos: agregar subgráficos y dibujar líneas (líneas rectas o curvas)
El primer grupo: addXXx --- agregar subgráficos
addCircle(float x, float y, float radio, Dirección dir)
añadir círculo
Los tres primeros parámetros son la información básica del círculo y el último parámetro es la dirección de la trayectoria del círculo.
Pero para casos normales, complete en sentido antihorario o en sentido horario. Sin efecto. Por lo general, tenemos que elegir entre relleno de gráficos o trazo.
Y cuando los gráficos se cruzan, debemos juzgar el rango de llenado. Por ejemplo:
Después de usar Path.addCircle para agregar un círculo, puede usar canvas.drawPath para dibujarlo.
path.addCircle(300f,300f,200f,Path.Direction.CW)
canvas.drawPath(path,paint)
Además de addCircle, hay otros addOval, agregar elipse, addRect agregar rectángulo, addRoundRect agregar rectángulo redondeado, addPath (ruta) agregar otra ruta.
El uso de los métodos anteriores es similar al de addCircle.
El segundo grupo de métodos: xxxTo()-----dibujar una línea (línea recta o curva)
La diferencia con el primer grupo de métodos es que el primer grupo es para agregar una figura cerrada completa (excepto addPath), este grupo solo agrega una línea.
lineTo(float x, float y)/ rLineTo(floatx, float y) dibujar una línea recta
Dibuje una línea recta desde la posición actual hasta la posición de destino. xy son las coordenadas de la ubicación de destino. La diferencia entre estos dos métodos es que los parámetros de lineTo son objetivos absolutos, mientras que los parámetros de rLineTo son coordenadas relativas a la posición actual. El prefijo r significa relativo, relativo.
Posición actual: La llamada posición actual se refiere a la posición final de la última llamada para dibujar el método Path. El valor inicial es el origen (0,0)
paint.style = Paint.Style.STROKE
path.lineTo(100f,100f) //由当前位置(0,0)向(100,100)画一条直线
path.rLineTo(100f,0f) //由当前位置(0,0)向正右方100像素的位置画一条直线
canvas.drawPath(path,paint)
quadTo(float x1, float y1, float x2, float y2) / rQuadTo(float dx1, float dy1, float dx2, float dy2) dibuja una curva Bezier cuadrática
El punto inicial de esta curva Bezier es la posición actual, y x1, y1, x2 e y2 en los parámetros son las coordenadas del punto de control y el punto final, respectivamente.
cubicTo(float x1, float y1, float x2, float y2, float x3, float y3) / rCubicTo(float x1, float y1, float x2, float y2, float x3, float y3) dibuja una curva Bezier cúbica
Igual que la curva de Bézier cuadrática anterior
moveTo(float x, float y)/ rMoveTo(float x, float y) se mueve a la posición de destino
Ya sea una línea recta o una curva de Serre, la posición actual se utiliza como punto de inicio y no se puede especificar el punto de inicio. Pero podemos cambiar la posición actual a través de moveTo(x, y) o rMoveTo(x, y), para establecer indirectamente el punto de partida de estos métodos.
paint.style = Paint.Style.STROKE
path.lineTo(100f,100f) //由当前位置(0,0)向(100,100)画一条直线
path.moveTo(200f,100f)//移动
path.lineTo(200f,0f)//画竖线
canvas.drawPath(path,paint)
Aunque moveTo no puede agregar gráficos, puede establecer el punto de partida. Así que este es un método de ayuda muy importante.
arcTo(RectF oval, float startAngle, float barridoAngle, fuerza booleanaMoveTo) / arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(RectF oval, float startAngle, float sweepAngle)画弧形
Este método se compara con canvas.drawArc. Hay un parámetro menos useCenter, pero un parámetro más, forceMoveTo.
¿Por qué esto es tan? Porque arcTo solo se usa para dibujar arcos, no abanicos. Así que este parámetro es inútil.
Entonces, ¿qué significa forceMoveTo?
Al dibujar, levantas el bolígrafo o arrastras la escritura a mano. La diferencia es si dejar huellas de movimiento.
paint.style = Paint.Style.STROKE
path.lineTo(100f,100f) //由当前位置(0,0)向(100,100)画一条直线
path.arcTo(100f,100f,300f,300f,-90f,90f,true) //强制移动到弧形起点(无痕迹)
canvas.drawPath(path,paint)
path.arcTo(100f,100f,300f,300f,-90f,90f,false) //dejar rastros
addArc(flotar a la izquierda, flotar arriba, flotar a la derecha, flotar abajo, flotar ángulo de inicio, flotar ángulo de barrido) / addArc(RectF oval, flotar ángulo de inicio, flotar ángulo de barrido)
Este es nuevamente un método de arco. Un addArc, un arcTo, ¿cuál es la diferencia?
De hecho, es muy simple. Falta un parámetro forceMoveTo aquí, que por defecto es verdadero.
close() cierra el subgráfico actual
Lo que está cerrado, es dibujar una línea desde la posición actual hasta el punto de inicio del subgráfico actual.
Primero mira los que no están cerrados:
paint.style = Paint.Style.STROKE
path.moveTo(100f,100f)
path.lineTo(200f,100f) //由当前位置(0,0)向(100,100)画一条直线
path.lineTo(150f,150f)
¿Y si lo cerramos en este momento?
paint.style = Paint.Style.STROKE
path.moveTo(100f,100f)
path.lineTo(200f,100f) //由当前位置(0,0)向(100,100)画一条直线
path.lineTo(150f,150f)
path.close() 
Puede pensar que en este momento, también es posible usar el punto de inicio de lineTo.Sí, es completamente equivalente a Lineto en este momento.
El llamado subgrafo es una conexión ininterrumpida.
Además, cuando el estilo sea relleno o relleno y trazo, se conectará automáticamente.
El segundo tipo de método Path: ajuste o cálculo auxiliar.
Hay relativamente pocos escenarios de uso para este tipo de método. No tienes que aprender demasiado. Sólo uno de los más utilizados en el semestre:
setTipoRelleno(TipoRellenotiporelleno)
Como se mencionó anteriormente, path.setFillType se usa para establecer el algoritmo de llenado cuando el gráfico se interseca a sí mismo.
Hay 4 valores de FillType:
1.EVEN_ODD
2. Valor por defecto de BOBINADO
3.INVERSE_EVEN_ODD
4.BOBINADO_INVERSO
Los dos con el prefijo INVERSE son las versiones invertidas de 1 y 2.
WINDING es relleno completo, EVEN_ODD es relleno cruzado.
Esta es una versión simple y cruda, que suele ser el caso.
drawBitmap (mapa de bits de mapa de bits, flotar a la izquierda, flotar arriba, pintar pintura) 画 mapa de bits
Dibuje el objeto de mapa de bits, a mitad de término a la izquierda, arriba están las coordenadas de la ubicación donde se dibujará el mapa de bits.
dibujarTexto(Texto de cadena, x flotante, y flotante, Paint paint) dibujar texto
Se dibuja todo el contenido que se muestra en la interfaz, incluido el texto. El método drawText es para dibujar texto.
El texto del parámetro es la cadena utilizada para dibujar, y x, y son las coordenadas del punto de inicio del dibujo.