Geometria para Canvas 2D

Construtores de traçado e contas de ângulo para o Canvas 2D. Toda função de traçado apenas monta o traçado; ela nunca chama fill() nem stroke(), então quem a usa decide como pintar.

Uso

import { roundRectByArc, getLinearGradient } from 'ranuts/utils';

const ctx = canvas.getContext('2d')!;

roundRectByArc(ctx, 10, 10, 200, 80, 12);
ctx.fillStyle = getLinearGradient(ctx, 10, 10, 200, 80, 'linear-gradient(90deg, #06f, #0cf)');
ctx.fill();

API

getAngle

De graus para radianos.

Parâmetros

Retorna

getArcPointerByDeg

O ponto da circunferência que corresponde a um ângulo.

Parâmetros

Retorna

getTangentByPointer

A reta tangente num ponto da circunferência.

Parâmetros

Retorna

roundRectByArc

Traça um retângulo de cantos arredondados. Um raio maior que a metade do lado mais curto é cortado nessa metade, de modo que cantos vizinhos nunca se sobrepõem.

Parâmetros

Retorna

Sem valor de retorno (void)

fanShapedByArc

Traça uma fatia de pizza, incluindo o vão que a separa das outras.

Parâmetros

Retorna

Sem valor de retorno (void)

getLinearGradient

Traduz uma string linear-gradient(...) do CSS para um CanvasGradient do Canvas.

O createLinearGradient só aceita um ponto inicial e um final, enquanto o CSS descreve a direção como um ângulo. Por isso a circunferência é dividida em oito setores de 45° e a tangente devolve o ângulo em forma de coordenadas de início e fim sobre a borda do retângulo. As direções por palavra-chave (to top, to bottom, to left, to right) são tratadas diretamente.

Parâmetros

Retorna