Context2D QML Type

Proporciona contexto 2D para formas en un elemento Canvas. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• canvas : QtQuick::Canvas
• fillRule : enumeration
• fillStyle : variant
• font : string
• globalAlpha : real
• globalCompositeOperation : string
• lineCap : string
• lineDashOffset : real (since QtQuick 2.11)
• lineJoin : string
• lineWidth : real
• miterLimit : real
• shadowBlur : real
• shadowColor : string
• shadowOffsetX : real
• shadowOffsetY : real
• strokeStyle : variant
• textAlign : string
• textBaseline : string

Métodos

• object arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)
• object arcTo(real x1, real y1, real x2, real y2, real radius)
• object beginPath()
• object bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)
• object clearRect(real x, real y, real w, real h)
• object clip()
• object closePath()
• object createConicalGradient(real x, real y, real angle)
• CanvasImageData createImageData(CanvasImageData imageData)
• CanvasImageData createImageData(Url imageUrl)
• CanvasImageData createImageData(real sw, real sh)
• object createLinearGradient(real x0, real y0, real x1, real y1)
• variant createPattern(Image image, string repetition)
• variant createPattern(color color, enumeration patternMode)
• object createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)
• void drawImage(variant image, real dx, real dy)
• void drawImage(variant image, real dx, real dy, real dw, real dh)
• void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)
• object ellipse(real x, real y, real w, real h)
• object fill()
• object fillRect(real x, real y, real w, real h)
• object fillText(text, x, y)
• CanvasImageData getImageData(real x, real y, real w, real h)
• array getLineDash() (since QtQuick 2.11)
• object isPointInPath(real x, real y)
• object lineTo(real x, real y)
• object measureText(text)
• object moveTo(real x, real y)
• object putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)
• object quadraticCurveTo(real cpx, real cpy, real x, real y)
• object rect(real x, real y, real w, real h)
• object reset()
• object resetTransform()
• object restore()
• object rotate(real angle)
• object roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)
• object save()
• object scale(real x, real y)
• void setLineDash(array pattern) (since QtQuick 2.11)
• object setTransform(real a, real b, real c, real d, real e, real f)
• object shear(real sh, real sv)
• object stroke()
• object strokeRect(real x, real y, real w, real h)
• object strokeText(text, x, y)
• object text(string text, real x, real y)
• object transform(real a, real b, real c, real d, real e, real f)
• object translate(real x, real y)

Descripción detallada

El objeto Context2D puede crearse mediante el método getContext() del elemento Canvas:

Canvas {
  id:canvas
  onPaint:{
     var ctx = canvas.getContext('2d');
     //...
  }
}

La API Context2D implementa el mismo estándar W3C Canvas 2D Context API con algunas características mejoradas.

La API Context2D proporciona el contexto de renderizado que define los métodos y atributos necesarios para dibujar en el elemento Canvas. A continuación se asigna el contexto de renderizado del lienzo a una variable context:

var context = mycanvas.getContext("2d")

La API Context2D renderiza el lienzo como un sistema de coordenadas cuyo origen (0,0) está en la esquina superior izquierda, como se muestra en la siguiente figura. Las coordenadas aumentan a lo largo del eje x de izquierda a derecha y a lo largo del eje y de arriba a abajo del lienzo.

Documentación de propiedades

canvas : QtQuick::Canvas

Contiene el elemento del lienzo sobre el que pinta el contexto.

Esta propiedad es de sólo lectura.

fillRule : enumeration

Mantiene la regla de relleno actual utilizada para rellenar formas. Se admiten las siguientes reglas de relleno:

Véase también fillStyle.

fillStyle : variant

Contiene el estilo actual utilizado para rellenar las formas. El estilo puede ser una cadena que contenga un color CSS, un objeto CanvasGradient o CanvasPattern. Los valores no válidos se ignoran. Esta propiedad acepta varias sintaxis de color:

• 'rgb(rojo, verde, azul)' - por ejemplo: 'rgb(255, 100, 55)' o 'rgb(100%, 70%, 30%)'
• rgba(rojo, verde, azul, alfa)' - por ejemplo: 'rgb(255, 100, 55, 1.0)' o 'rgb(100%, 70%, 30%, 0.5)'.
• hsl(tono, saturación, luminosidad)
• hsla(tono, saturación, luminosidad, alfa)
• '#RRGGBB' - por ejemplo: '#00FFCC'
• Qt.rgba(rojo, verde, azul, alfa) - por ejemplo: Qt.rgba(0.3, 0.7, 1, 1.0)

Si el fillStyle o strokeStyle se asigna muchas veces en un bucle, la última sintaxis Qt.rgba() debe ser elegida, ya que tiene el mejor rendimiento, porque ya es un valor válido QColor, no necesita ser analizado cada vez.

El valor por defecto es '#000000'.

Véase también createLinearGradient(), createRadialGradient(), createPattern(), y strokeStyle.

font : string

Mantiene la configuración actual de la fuente.

Soporta un subconjunto del estándar w3C 2d context para fuentes:

• font-style (opcional): normal | cursiva | oblicua
• font-variant (opcional): normal | versalitas
• font-weight (opcional): normal | negrita | 1 ... 1000
• font-size: Npx | Npt (donde N es un número positivo)
• font-family: Véase http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family

El valor de fuente por defecto es "10px sans-serif".

globalAlpha : real

Mantiene el valor alfa actual aplicado a las operaciones de renderizado. El valor debe estar comprendido entre 0.0 (totalmente transparente) y 1.0 (totalmente opaco). El valor por defecto es 1.0.

globalCompositeOperation : string

Contiene la operación de composición actual. Las operaciones permitidas son:

En cumplimiento del estándar W3C, los modos de composición extendidos más allá de los modos requeridos se proporcionan como sintaxis "vendorName-operationName", por ejemplo: QPainter::CompositionMode_Exclusion se proporciona como "qt-exclusion".

lineCap : string

Mantiene el estilo de remate de línea actual. Los estilos posibles son:

Se ignoran otros valores.

lineDashOffset : real [since QtQuick 2.11]

Indica el desplazamiento de línea actual. El valor por defecto es 0.

Esta propiedad se introdujo en QtQuick 2.11.

Véase también getLineDash() y setLineDash().

lineJoin : string

Mantiene el estilo de unión de líneas actual. Existe una unión en cualquier punto de un subcamino compartido por dos líneas consecutivas. Cuando un subcamino está cerrado, también existe una unión en su primer punto (equivalente a su último punto) que conecta la primera y la última línea del subcamino.

Los posibles estilos de unión de líneas son

Se ignoran otros valores.

lineWidth : real

Mantiene el ancho de línea actual. Los valores no finitos mayores que cero se ignoran.

miterLimit : real

Mantiene la relación actual del límite de inglete. El valor por defecto del límite de inglete es 10.0.

shadowBlur : real

Mantiene el nivel actual de desenfoque aplicado a las sombras

shadowColor : string

Mantiene el color actual de la sombra.

shadowOffsetX : real

Mantiene el desplazamiento actual de la sombra en la distancia horizontal positiva.

Véase también shadowOffsetY.

shadowOffsetY : real

Mantiene el desplazamiento actual de la sombra en la distancia vertical positiva.

Véase también shadowOffsetX.

strokeStyle : variant

El estilo puede ser una cadena que contenga un color CSS, un objeto CanvasGradient o CanvasPattern. Los valores no válidos son ignorados.

El valor por defecto es '#000000'.

Véase también createLinearGradient(), createRadialGradient(), createPattern(), y fillStyle.

textAlign : string

Mantiene la configuración actual de la alineación del texto. Los valores posibles son:

Se ignoran otros valores.

textBaseline : string

Mantiene la configuración actual de la alineación de la línea de base. Los valores posibles son:

Los demás valores se ignoran. El valor por defecto es "alfabético".

Documentación del método

object arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)

Añade un arco al subcamino actual que se encuentra en la circunferencia del círculo cuyo centro está en el punto (x, y) y cuyo radio es radius.

Tanto startAngle como endAngle se miden desde el eje x en radianes.

El parámetro anticlockwise es false para cada arco de la figura anterior porque todos están dibujados en el sentido de las agujas del reloj.

Véase también arcTo y el estándar de contexto 2D del W3C para arc().

object arcTo(real x1, real y1, real x2, real y2, real radius)

Añade un arco con los puntos de control y radio dados a la subtrayectoria actual, conectado al punto anterior por una línea recta. Para dibujar un arco, comienza con los mismos pasos que seguiste para crear una línea:

• Llama al método beginPath() para establecer una nueva trayectoria.
• Llama al método moveTo(x, y) para fijar tu posición inicial en el lienzo en el punto (x, y).
• Para dibujar un arco o un círculo, llama al método arcTo(x1, y1, x2, y2, radius). Esto añade un arco con punto inicial (x1, y1), punto final (x2, y2), y radius al subtrazado actual y lo conecta con el subtrazado anterior mediante una línea recta.

Véase también arc y el estándar de contexto 2D del W3C para arcTo().

object beginPath()

Restablece la ruta actual a una nueva ruta.

object bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)

Añade una curva bezier cúbica entre la posición actual y el punto final dado utilizando los puntos de control especificados por (cp1x, cp1y), y (cp2x, cp2y). Después de añadir la curva, la posición actual se actualiza para estar en el punto final (x, y) de la curva. El siguiente código produce la trayectoria que se muestra a continuación:

ctx.strokeStyle = Qt.rgba(0, 0, 0, 1);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(20, 0);//start point
ctx.bezierCurveTo(-10, 90, 210, 90, 180, 0);
ctx.stroke();

Ver también W3C 2d context standard for bezierCurveTo y The beautiful flower demo by using bezierCurveTo.

object clearRect(real x, real y, real w, real h)

Borra todos los píxeles del lienzo en el rectángulo especificado por (x, y, w, h) a negro transparente.

object clip()

Crea la región de recorte a partir del trazado actual. Las partes de la forma que queden fuera del trazado de recorte no se mostrarán. Para crear una forma compleja utilizando el método clip():

1. Llame al método context.beginPath() para definir el trazado de recorte.
2. Defina la trayectoria de recorte llamando a cualquier combinación de los métodos lineTo, arcTo, arc, moveTo, etc y closePath.
3. Llame al método context.clip().

Aparecerá la nueva forma. A continuación se muestra cómo un trazado de recorte puede modificar la visualización de una imagen:

Véase también beginPath(), closePath(), stroke(), fill(), y el estándar W3C 2d context para clip.

object closePath()

Cierra el subtrayecto actual trazando una línea hasta el principio del subtrayecto, iniciando automáticamente un nuevo trayecto. El punto actual del nuevo trayecto es el primer punto del subtrayecto anterior.

Véase también el estándar W3C 2d context para closePath.

object createConicalGradient(real x, real y, real angle)

Devuelve un objeto CanvasGradient que representa un gradiente cónico que interpola colores en sentido antihorario alrededor de un punto central (x, y) con un ángulo inicial angle en unidades de radianes.

Véase también CanvasGradient::addColorStop(), createLinearGradient(), createRadialGradient(), createPattern(), fillStyle, y strokeStyle.

CanvasImageData createImageData(CanvasImageData imageData)

Crea un objeto CanvasImageData con las mismas dimensiones que el argumento imageData.

CanvasImageData createImageData(Url imageUrl)

Crea un objeto CanvasImageData con la imagen dada cargada desde imageUrl.

Véase también Canvas::loadImage(), QtQuick::Canvas::unloadImage(), y QtQuick::Canvas::isImageLoaded.

CanvasImageData createImageData(real sw, real sh)

Crea un objeto CanvasImageData con las dimensiones dadas(sw, sh).

object createLinearGradient(real x0, real y0, real x1, real y1)

Devuelve un objeto CanvasGradient que representa un gradiente lineal que realiza una transición de color a lo largo de una línea entre el punto inicial (x0, y0) y el punto final (x1, y1).

Un degradado es una transición suave entre colores. Existen dos tipos de degradados: lineales y radiales. Los degradados deben tener dos o más paradas de color, que representan desplazamientos de color situados de 0 a 1 entre los puntos o círculos inicial y final del degradado.

Véase también CanvasGradient::addColorStop(), createRadialGradient(), createConicalGradient(), createPattern(), fillStyle, y strokeStyle.

variant createPattern(Image image, string repetition)

Devuelve un objeto CanvasPattern que utiliza la imagen dada y se repite en la(s) dirección(es) dada(s) por el argumento repetición.

El parámetro image debe ser un elemento Image válido, un objeto CanvasImageData válido o una url de imagen cargada. Si no hay datos de imagen, esta función lanza una excepción INVALID_STATE_ERR.

Los valores permitidos para repetition son:

Si el argumento de repetición está vacío o es nulo, se utiliza el valor "repeat".

Véase también strokeStyle y fillStyle.

variant createPattern(color color, enumeration patternMode)

Esta es una función sobrecargada. Devuelve un objeto CanvasPattern que utiliza los campos color y patternMode. Los modos de patrón válidos son:

Véase también Qt::BrushStyle.

object createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)

Devuelve un objeto CanvasGradient que representa un degradado radial que pinta a lo largo del cono dado por el círculo inicial con origen (x0, y0) y radio r0, y el círculo final con origen (x1, y1) y radio r1.

Véase también CanvasGradient::addColorStop(), createLinearGradient(), createConicalGradient(), createPattern(), fillStyle, y strokeStyle.

void drawImage(variant image, real dx, real dy)

Dibuja el image dado en el lienzo en la posición (dx, dy). Nota: El tipo image puede ser un elemento Image, una url de imagen o un objeto CanvasImageData. Cuando se da como Image item, si la imagen no está completamente cargada, este método no dibuja nada. Cuando se da como cadena url, la imagen debe cargarse llamando primero al método Canvas::loadImage() del elemento Canvas. La imagen dibujada está sujeta a la ruta de clip del contexto actual, incluso si image es un objeto CanvasImageData.

Ver también CanvasImageData, Image, Canvas::loadImage, Canvas::isImageLoaded, Canvas::imageLoaded, y el estándar W3C 2d context para drawImage.

void drawImage(variant image, real dx, real dy, real dw, real dh)

Esta es una función sobrecargada. Dibuja el elemento dado como image en el lienzo en el punto (dx, dy) y con anchura dw, altura dh.

Nota: El tipo image puede ser un elemento Imagen, una url de imagen o un objeto CanvasImageData. Cuando se da como Image item, si la imagen no está completamente cargada, este método no dibuja nada. Cuando se da como cadena url, la imagen debe cargarse llamando primero al método Canvas::loadImage() del elemento Canvas. La imagen dibujada está sujeta a la ruta de clip del contexto actual, incluso si image es un objeto CanvasImageData.

Ver también CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded, y el estándar W3C 2d context para drawImage.

void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)

Esta es una función sobrecargada. Dibuja el elemento dado como image desde el punto de origen (sx, sy) y la anchura de origen sw, la altura de origen sh en el lienzo en el punto (dx, dy) y con la anchura dw, la altura dh.

Nota: El tipo image puede ser un elemento Image o Canvas, una url de imagen o un objeto CanvasImageData. Cuando se da como elemento Image, si la imagen no está completamente cargada, este método no dibuja nada. Cuando se da como cadena url, la imagen debe cargarse llamando primero al método Canvas::loadImage() del elemento Canvas. La imagen dibujada está sujeta a la ruta de clip del contexto actual, incluso si image es un objeto CanvasImageData.

Ver también CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded, y el estándar W3C 2d context para drawImage.

object ellipse(real x, real y, real w, real h)

Crea una elipse dentro del rectángulo delimitador definido por su esquina superior izquierda en (x, y), anchura w y altura h, y la añade al trazado como un subtrazado cerrado.

La elipse se compone de una curva en el sentido de las agujas del reloj, que comienza y termina en cero grados (la posición de las 3 en punto).

object fill()

Rellena las sub-rutas con el estilo de relleno actual.

Véase también el estándar W3C 2d context para relleno y fillStyle.

object fillRect(real x, real y, real w, real h)

Pinta un área rectangular especificada por (x, y, w, h) utilizando fillStyle.

Véase también fillStyle.

object fillText(text, x, y)

Rellena el text especificado en la posición dada (x, y).

Véase también font, textAlign, textBaseline, y strokeText.

CanvasImageData getImageData(real x, real y, real w, real h)

Devuelve un objeto CanvasImageData que contiene los datos de imagen del rectángulo del lienzo especificado por (x, y, w, h).

[since QtQuick 2.11] array getLineDash()

Devuelve un array de qreals representando el patrón de guiones de la línea.

Este método se introdujo en QtQuick 2.11.

Véase también setLineDash() y lineDashOffset.

object isPointInPath(real x, real y)

Devuelve true si el punto (x, y) está en la ruta actual.

Véase también el estándar W3C 2d context para isPointInPath.

object lineTo(real x, real y)

Dibuja una línea desde la posición actual hasta el punto situado en (x, y).

object measureText(text)

Devuelve un objeto con una propiedad width, cuyo valor es equivalente a llamar a QFontMetrics::horizontalAdvance() con el text dado en la fuente actual.

object moveTo(real x, real y)

Crea un nuevo subcamino con un punto en (x, y).

object putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)

Pinta los datos del objeto imageData en el lienzo en (dx, dy).

Si se proporciona un rectángulo sucio (dirtyX, dirtyY, dirtyWidth, dirtyHeight), sólo se pintan los píxeles de ese rectángulo.

object quadraticCurveTo(real cpx, real cpy, real x, real y)

Añade una curva de Bézier cuadrática entre el punto actual y el punto final (x, y) con el punto de control especificado por (cpx, cpy).

Véase también el estándar W3C 2d context para quadraticCurveTo.

object rect(real x, real y, real w, real h)

Añade un rectángulo en la posición (x, y), con la anchura w y la altura h, como un subcamino cerrado.

object reset()

Restablece el estado y las propiedades del contexto a los valores por defecto.

object resetTransform()

Restablece la matriz de transformación al valor por defecto (equivalente a llamar a setTransform(1, 0, 0, 1, 0, 0)).

Véase también transform(), setTransform() y reset().

object restore()

Despliega el estado superior de la pila, restaurando el contexto a ese estado.

Véase también save().

object rotate(real angle)

Rota el lienzo alrededor del origen actual en angle en radianes y en el sentido de las agujas del reloj.

ctx.rotate(Math.PI/2);

La matriz de transformación de rotación es la siguiente

donde angle de rotación está en radianes.

object roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)

Añade un rectángulo de esquinas redondeadas, especificado por (x, y, w, h), a la ruta. Los argumentos xRadius y yRadius especifican el radio de las elipses que definen las esquinas del rectángulo redondeado.

object save()

Coloca el estado actual en la pila de estados.

Antes de cambiar cualquier atributo de estado, debe guardar el estado actual para futuras referencias. El contexto mantiene una pila de estados de dibujo. Cada estado consta de la matriz de transformación actual, la región de recorte y los valores de los siguientes atributos:

• strokeStyle
• fillStyle
• fillRule
• globalAlpha
• lineWidth
• lineCap
• lineJoin
• miterLimit
• shadowOffsetX
• shadowOffsetY
• shadowBlur
• shadowColor
• globalCompositeOperation
• font
• textAlign
• textBaseline

La ruta actual NO forma parte del estado de dibujo. El trazado puede restablecerse invocando el método beginPath().

object scale(real x, real y)

Aumenta o disminuye el tamaño de cada unidad en la cuadrícula del lienzo multiplicando los factores de escala por la matriz de transformación actual. x es el factor de escala en la dirección horizontal y y es el factor de escala en la dirección vertical.

El siguiente código duplica el tamaño horizontal de un objeto dibujado en el lienzo y reduce a la mitad su tamaño vertical:

ctx.scale(2.0, 0.5);

[since QtQuick 2.11] void setLineDash(array pattern)

Establece el patrón de guiones al patrón dado.

pattern una lista de números que especifica las distancias para dibujar alternativamente una línea y un espacio.

Si el número de elementos de la matriz es impar, los elementos de la matriz se copian y concatenan. Por ejemplo, [5, 15, 25] se convertirá en [5, 15, 25, 5, 15, 25].

var space = 4 ctx.setLineDash([1, space, 3, space, 9, space, 27, space, 9, space]) ... ctx.stroke();

Este método se introdujo en QtQuick 2.11.

Véase también getLineDash() y lineDashOffset.

object setTransform(real a, real b, real c, real d, real e, real f)

Cambia la matriz de transformación a la matriz dada por los argumentos como se describe a continuación.

Modificar directamente la matriz de transformación permite realizar transformaciones de escala, rotación y traslación en un solo paso.

Cada punto del lienzo se multiplica por la matriz antes de dibujar nada. La especificación HTML Canvas 2D Context define la matriz de transformación como:

donde

• a es el factor de escala en la dirección horizontal (x)

  

• c es el factor de inclinación en la dirección x

  

• e es la traslación en la dirección x

  

• b es el factor de inclinación en la dirección y (vertical)

  

• d es el factor de escala en la dirección y

  

• f es la traslación en la dirección y

  

• la última fila permanece constante

Los factores de escala y de inclinación son múltiplos; e y f son unidades de espacio de coordenadas, igual que las unidades del método translate(x,y).

Véase también transform().

object shear(real sh, real sv)

Corta la matriz de transformación en sh en dirección horizontal y sv en dirección vertical.

object stroke()

Traza las subtrayectorias con el estilo de trazo actual.

Véase también strokeStyle y W3C 2d context standard for stroke.

object strokeRect(real x, real y, real w, real h)

Traza el recorrido del rectángulo especificado por (x, y, w, h) utilizando los atributos strokeStyle, lineWidth, lineJoin, y (si procede) miterLimit.

Véase también strokeStyle, lineWidth, lineJoin, y miterLimit.

object strokeText(text, x, y)

Traza el text dado en una posición especificada por (x, y).

Véase también font, textAlign, textBaseline, y fillText.

object text(string text, real x, real y)

Añade el text dado a la ruta como un conjunto de sub-rutas cerradas creadas a partir de la fuente contextual actual suministrada.

Las subtrayectorias se colocan de modo que el extremo izquierdo de la línea de base del texto se encuentre en el punto especificado por (x, y).

object transform(real a, real b, real c, real d, real e, real f)

Este método es muy similar a setTransform(), pero en lugar de reemplazar la antigua matriz de transformación, este método aplica la matriz de transformación dada a la matriz actual multiplicándola.

El método setTransform(a, b, c, d, e, f) en realidad restablece la transformada actual a la matriz identidad, y luego invoca el método transform(a, b, c, d, e, f) con los mismos argumentos.

Véase también setTransform().

object translate(real x, real y)

Traslada el origen del lienzo una distancia horizontal de x, y una distancia vertical de y, en unidades de espacio de coordenadas.

Trasladar el origen te permite dibujar patrones de diferentes objetos en el lienzo sin tener que medir las coordenadas manualmente para cada forma.