Tela

createCanvasContext

CanvasContext pz.createCanvasContext(string canvasId, Object this)

criar tela Contexto do desenho Objeto CanvasContext

parâmetro

string canvasId

Para obter o atributo canvas-id da montagem da tela de contexto

Object this

Em um componente personalizado, isto para a instância atual do componente indica que neste componente personalizado a pesquisa pelo ID da tela do canvas Se omitido, não procura dentro de nenhum componente personalizado

Valor de retorno

CanvasContext

canvasToTempFilePath

CanvasContext pz.canvasToTempFilePath(Object object, Object this) Gera uma imagem de tamanho especificado exportando o conteúdo da área especificada da tela atual. em draw() Callback chame este método para garantir que a exportação da imagem seja bem-sucedida

parâmetro

Object object

atributo	tipo	Valores padrão	Obrigatório	Apresentações	Versão mínima
x	number	0	não	A abscissa superior esquerda da área de tela especificada
y	number	0	não	A ordenada superior esquerda da área de tela especificada
width	number	canvas-width-x	no	Largura da área de tela especificada
height	number	altura da tela-y	não	Altura da área especificada da tela
destWidth	number	largura*Densidade de pixels da tela	não	Largura da imagem de saída
destHeight	number	altura*Densidade de pixels da tela	não	Altura da imagem de saída
canvasId	string		não	Identidade do canvas, passada no componente canvas canvas-id
canvas	Object		não	Identidade do canvas, passada na instância do componente canvas （canvas type="2d" Esta propriedade é usada quando o.
fileType	string	png	não	Tipo de arquivo de destino
quality	number		não	A qualidade da imagem atualmente é apenas jpg Efetiva. O intervalo é (0, 1]Quando não estiver dentro do escopo de 1.0 Lidar com.
success	function		não	A interface chama a função de retorno de chamada bem-sucedida
fail	function		não	Interface chama funções de retorno de chamada com falha
complete	function		não	A interface chama o fim da função de retorno de chamada (o sucesso ou a falha da chamada será executada)

object.fileType Legal value

valor	Apresentações	Versão mínima
jpg	imagem jpg
png	imagem png

object.success callback

parâmetro

Object res

atributo	tipo	Apresentações
tempFilePath	string	Caminho temporário para construir o arquivo (caminho local)

Object this

Em um componente personalizado, o this da instância do componente atual a ser manipulado na montagem da tela do componente

Código de amostra

pz.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath)
  }
})

canvasPutImageData

CanvasContext pz.canvasPutImageData(Object object, Object this) Desenha dados de pixel na tela. Em componentes personalizados, o segundo parâmetro passa na instância do componente personalizado. This para operar dentro da montagem do componente &ltcanvas&gt

parâmetro

Object object

atributo	tipo	Valores padrão	Obrigatório	Apresentações
canvasId	string		sim	Identidade da tela, passada na propriedade canvas-id do componente canvas.
data	Uint8ClampedArray		sim	Dados de pixel de imagem, array unidimensional, cada quatro itens representando um pixel rgba
x	number		sim	Deslocamento de posição dos dados da imagem de origem na tela de destino x Deslocamento na direção axial)
y	number		sim	Deslocamento de posição dos dados da imagem de origem na tela de destino e deslocamento na direção axial)
width	number		sim	Largura da região retangular dos dados da imagem de origem
height	number		sim	Altura da região retangular dos dados da imagem de origem
success	function		não	Interface chama a função de retorno de chamada bem-sucedida
fail	function		não	Interface chama funções de retorno de chamada com falha
complete	function		não	A interface chama o final da função de retorno de chamada (a chamada será executada com sucesso ou falha)

Object this

Em um componente personalizado, o this da instância do componente atual para manipular dentro da montagem da tela do componente

Código de amostra

const data = new Uint8ClampedArray([255, 0, 0, 1])
pz.canvasPutImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 1,
  height: 1,
  data: data,
  success (res) {}
})

canvasGetImageData

CanvasContext pz.canvasGetImageData(Object object, Object this) Obtenha a tela Os dados de pixel implícitos na região.

parâmetro

Object object

atributo	tipo	Valores padrão	Obrigatório	Apresentações
canvasId	string		sim	Identidade da tela, passada na propriedade canvas-id do componente canvas.
x	number		sim	A abcissa superior esquerda da região retangular dos dados da imagem a ser extraída
y	number		sim	A ordenada superior esquerda da região retangular dos dados da imagem a ser extraída
width	number		sim	Largura da região retangular dos dados da imagem a extrair
height	number		sim	A altura da área retangular dos dados de imagem a serem extraídos
success	function		não	Interface chama a função de retorno de chamada bem-sucedida
fail	function		não	Interface chama funções de retorno de chamada com falha
complete	function		não	A interface chama o final da função de retorno de chamada (a chamada será executada com sucesso ou falha)

retorno de chamada object.success

parâmetro

Object res

atributo	tipo	Apresentações
width	number	Largura do retângulo de dados da imagem
height	number	Altura do retângulo de dados da imagem
data	Uint8ClampedArray	Dados de pixel de imagem, array unidimensional, cada quatro itens representando um pixel rgba

Object this

Em um componente personalizado, o this da instância do componente atual para manipular dentro da montagem da tela do componente

Código de amostra

pz.canvasGetImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  success(res) {
    console.log(res.width) // 100
    console.log(res.height) // 100
    console.log(res.data instanceof Uint8ClampedArray) // true
    console.log(res.data.length) // 100 * 100 * 4
  }
})

CanvasContext

contexto de desenho do componente canvas. CanvasContext É a interface antiga, nova edição Canvas 2D Interface e Web Consistente

atributo

• string|CanvasGradient fillStyle
  Preencha a cor. Use o mesmo CanvasContext.setFillStyle()。

• string|CanvasGradient strokeStyle
  Cor da borda. Use o mesmo CanvasContext.setStrokeStyle()。

• number shadowOffsetX
  Deslocamento horizontal da sombra em relação à forma

• number shadowOffsetY
  O desvio vertical da sombra da forma

• number shadowColor
  Cor das Sombras

• number shadowBlur
  Nível de desfoque da sombra

• number lineWidth
  A largura da linha. Use o mesmo CanvasContext.setLineWidth()。

• string lineCap
  O estilo do ponto final da linha. Use o mesmo CanvasContext.setLineCap()。

• string lineJoin
  Estilo de interseção de linhas. Use o mesmo CanvasContext.setLineJoin()。

lineJoin Legal value

valor	Apresentações	Versão mínima
order	bisel
round	Filé
miter	Cúspide

• number miterLimit
  Comprimento máximo da esquadria. Use o mesmo CanvasContext.setMiterLimit()。

• number lineDashOffset
  Deslocamento tracejado, valor inicial 0

• string font
  Propriedades do estilo de fonte atual. de acordo com a gramática de fonte CSS de DOMString Uma string que requer, no mínimo, o tamanho da fonte e o nome da família da fonte. O valor padrão é 10px sem serifa

• number globalAlpha
  Transparência global do pincel. intervalo 0-1,0 Para transparência completa, 1 Indica opacidade completa

• string globalCompositeOperation
  O tipo de operação de composição aplicada ao desenhar uma nova forma. A versão atual do Android está disponível apenas para preencher Síntese de bloco de preenchimento para traçado O efeito sintético dos segmentos é de origem。

As seguintes operações são atualmente suportadas
​

method

• CanvasContext.draw(boolean reserve, function callback)
  Desenha uma descrição (caminho, deformação, estilo) anteriormente no contexto do desenho para a tela.

• CanvasGradient CanvasContext.createLinearGradient(number x0, number y0, number x1, number y1)
  Cria uma cor gradiente linear. ReturnedCanvasGradientO objeto precisa usar CanvasGradient.addColorStop() Para especificar pontos de gradiente, você precisa de pelo menos dois.

• CanvasGradient CanvasContext.createCircularGradient(number x, number y, number r)
  Crie uma cor gradiente circular. O ponto inicial está no centro do círculo e o ponto final é o círculo. ReturnedCanvasGradientO objeto precisa usar CanvasGradient.addColorStop() Para especificar pontos de gradiente, você precisa de pelo menos dois

• CanvasContext.createPattern(string image, string repetition)
  Um método que cria um padrão para uma imagem específica, repetindo uma metaimagem em uma direção especificada

• Object CanvasContext.measureText(string text)
  Meça as informações de tamanho do texto. Atualmente apenas a largura do texto é retornada. Interface de sincronização

• CanvasContext.save()
  Salve o contexto do desenho

• CanvasContext.restore()
  Restaura um contexto de desenho salvo anteriormente

• CanvasContext.beginPath()
  Comece a criar um caminho. Precisa chamar preenchimento ou traçado Usará o caminho para preencher ou traçar

• CanvasContext.moveTo(number x, number y)
  Move o caminho para o ponto especificado na tela sem criar uma linha. use o método de traço para desenhar linhas

• CanvasContext.lineTo(number x, number y)
  Adiciona um novo ponto e, em seguida, cria uma linha do último ponto especificado até o ponto de destino. use o método de traço para desenhar linhas

• CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)
  Cria um caminho de curva de Bézier quadrática. O ponto inicial de uma curva é o ponto anterior no caminho

• CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
  Crie um caminho de curva cúbica de Bézier. O ponto inicial de uma curva é o ponto anterior no caminho

• CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
  Crie um arco Crie um círculo que especifique o radiano inicial como 0, terminando em radianos 2 * Math.PI。 use o método de traço ou preenchimento para entrar na tela Desenhe um arco

• CanvasContext.rect(number x, number y, number width, number height)
  Cria um caminho retangular. Precisa de preenchimento ou traço O método desenha o retângulo na tela em

• CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)
  Desenha caminhos de arco com base em pontos de controle e raio

• CanvasContext.clip()
  Corte formas e tamanhos arbitrários da tela original. Depois que uma região é recortada, todos os desenhos subsequentes ficam restritos à região que está sendo recortada (sem acesso a outras regiões da tela). Pode ser usado o método clip usando o método save para salvar a área atual da tela e, a qualquer momento posterior, passar o método restore para restaurá-la

• CanvasContext.fillRect(number x, number y, number width, number height)
  Preenche um retângulo. use setFillStyle Defina a cor de preenchimento do retângulo. Se não estiver definido, o padrão é preto

• CanvasContext.strokeRect(number x, number y, number width, number height)
  Desenhe um retângulo(Não preenchido)。 use setStrokeStyle Define a cor da linha retangular. Se não estiver definido, o padrão é preto

• CanvasContext.clearRect(number x, number y, number width, number height)
  Limpa o conteúdo da tela dentro da área retangular

• CanvasContext.fill()
  Preenche o conteúdo do caminho atual. A cor de preenchimento padrão é preta

• CanvasContext.stroke()
  Desenha uma borda para o caminho atual. A cor padrão é preta

• CanvasContext.closePath()
  Feche um caminho. Conectará o começo e o fim. Se o caminho estiver fechado e não for chamado de preenchimento ou traçado E abre um novo caminho onde o caminho anterior não será renderizado

• CanvasContext.scale(number scaleWidth, number scaleHeight)
  Após a chamada, os seguintes caminhos são criados com suas escalas de ordenadas e abscissas. Várias chamadas se multiplicam.

• CanvasContext.rotate(number rotate)
  Gire o eixo atual no sentido horário a partir da origem. Os ângulos de rotação de múltiplas invocações se acumulam. A origem pode ser usada para traduzir Modificação do método

• CanvasContext.translate(number x, number y)
  Para a origem do sistema de coordenadas atual (0, 0) Transforme. A origem da coordenada padrão é o canto superior esquerdo da página

• CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)
  Desenhar imagem na tela

• CanvasContext.strokeText(string texto, número x, número y, número maxWidth)
  Dado (x, e) um método de traçado de texto para desenho de posição

• CanvasContext.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
  Método para sobrepor a transformação atual várias vezes usando matrizes
  ​

• CanvasContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
  Método para redefinir (sobrescrever) a transformação atual usando uma matriz

• CanvasContext.setFillStyle(string|CanvasGradient color)
  Defina a cor de preenchimento

• CanvasContext.setStrokeStyle(string|CanvasGradient color)
  Definir cor do traço

• CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)
  Defina o estilo de sombra

• CanvasContext.setGlobalAlpha(number alpha)
  Define a transparência global do pincel

• CanvasContext.setLineWidth(number lineWidth)
  Defina a largura da linha

• CanvasContext.setLineJoin(string lineJoin)
  Defina o estilo de interseção da linha

• CanvasContext.setLineCap(string lineCap)
  Definir o estilo do ponto final de uma linha

• CanvasContext.setLineDash(Array.<number> pattern, number offset)
  Define o estilo da linha tracejada

• CanvasContext.setMiterLimit(number miterLimit)
  Define o comprimento máximo da esquadria. O comprimento da esquadria refere-se à distância entre os cantos internos e externos onde duas linhas se encontram. quando CanvasContext.setLineJoin() para mitra Somente quando for eficaz. Se o comprimento máximo inclinado for excedido, a conexão será lineJoin para ordem Para exibir

• CanvasContext.fillText(string text, number x, number y, number maxWidth)
  Desenha texto preenchido na tela

• CanvasContext.setFontSize(number fontSize)
  Definir tamanho da fonte

• CanvasContext.setTextAlign(string align)
  Definir alinhamento de texto

• CanvasContext.setTextBaseline(string textBaseline)
  Defina o alinhamento vertical do texto

Canvas

Instâncias de canvas, disponíveis via SelectorQuery.

Se o canvas estiver configurado com o atributo native prop, ele será tratado com renderização nativa, compatível com a biblioteca base 2.12.1, iOS/Android 2.35.1.

<!-- canvas.fxml -->
<canvas type="2d" id="canvas"></canvas>

// canvas.js
Page({
  onReady() {
    const query = pz.createSelectorQuery().select('#canvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = 2
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.fillRect(0, 0, 100, 100)
      })
  }
})

Canvas.getContext()

Este método retorna o contexto do Canvas Drawing

A tela obtida pela consulta do seletor tem a mesma API de contexto que a tela da web

Canvas.createImage()

Crie um objeto de imagem. Suporte em Canvas 2D e WebGL Canvas Em uso, mas não suporta mistura de 2D e WebGL O método

const img = canvas.createImage()
img.onload = () => {
  const pat = context.createPattern(img, "repeat")
  context.fillStyle = pat
  context.rect(0, 0, 150, 100)
  context.fill()
}
//Caminho da imagem
img.src = '../../../image/icon_cloud_HL.png'

CanvasGradient.addColorStop

CanvasGradient.addColorStop(number stop, string color)

Adiciona um ponto de gradiente para a cor. Menor que a parada mínima A parte da parada da cor A renderizar, maior que a parada máxima A parte da parada da cor A renderizar

parâmetro

atributo	tipo	Apresentações
stop	number	Representa a posição entre o início e o fim de um gradiente, o intervalo 0-1。
color	string	A cor do ponto de gradiente.

Código de amostra

const ctx = pz.createCanvasContext('myCanvas')

// Cria gradiente circular
const grd = ctx.createLinearGradient(30, 10, 120, 10)
grd.addColorStop(0, 'red')
grd.addColorStop(0.16, 'orange')
grd.addColorStop(0.33, 'yellow')
grd.addColorStop(0.5, 'green')
grd.addColorStop(0.66, 'cyan')
grd.addColorStop(0.83, 'blue')
grd.addColorStop(1, 'purple')

//Preencher com gradiente
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

Color

Cor. As cores da tela usadas podem ser expressas das seguintes maneiras::

Cor RGB: como 'rgb (255, 0, 0)'

Cor RGBA: como 'rgba (255, 0, 0, 0,3)'

16 Cor base: como '#FF0000'

Cores predefinidas: como 'red'

Image

Objeto de imagem

atributo

string src

URL pictórico

number width

Largura real da imagem

number height

Altura real da imagem

string referrerPolicy

origin: Envie o referenciador completo no-referrer: Não envie. Formato fixado em https://servicewechat.com/{appid}/{version}/page-frame.htmlOnde {appid} Para o phizclip appid，{version} É o número da versão do phizclip, que é 0 Representa um desenvolvimento versão, uma versão de teste e uma versão de revisão com um número de versão de devtools Representados como ferramentas de desenvolvedor e o restante como versões oficiais

function onload

Uma função de retorno de chamada que é acionada quando a imagem é carregada

function onerror

Uma função de retorno de chamada acionada após um erro no carregamento da imagem

ImageData

Objeto ImageData

atributo

number width

Use Pixel Descrição ImageData A largura real de

number height

Usar Pixel Descrição ImageData Altura real

Uint8ClampedArray data

Matriz unidimensional contendo os dados sequenciais RGBA, uso de dados de 0 a representação inteira de 255 inclusive

OffscreenCanvas

Exemplo de tela fora da tela, você pode usar o pz.createOffscreenCanvas Create

atributo

number width

Largura da tela

number height

Altura da tela

OffscreenCanvas.createImage()

Crie um objeto de imagem.

Valor de retorno

Image

Tenha cuidado para não misturar webgl e 2d Canvas para criar um objeto de imagem. Observe que ao usar o canvas Self createImage Crie um objeto de imagem.

OffscreenCanvas.getContext()

Este método retorna o contexto do desenho OffscreenCanvas

parâmetro

string contextType

Tipo de contexto de desenho, que requer createOffscreenCanvas passado quando o tipo Agreement

contextType Legal value

valor	Apresentações	Versão mínima
webgl	Contexto do tipo Webgl
2d	Contexto do tipo 2d

Valor de retorno

RenderingContext

Tenha cuidado para não misturar contexto de webgl e desenho 2d, contextType de entrada Você deve trabalhar com pz.createOffscreenCanvas Tipo de entrada Mesmo tipo.