Textural Triangle Canvas

Triângulo Textural para classificação do solo desenvolvido com o HTML Canvas. Ver demonstração.

💡 Como utilizar

Faça o download do projeto ou use pelo cdn.jsdelivr.net copiando um dos scripts abaixo:

<script src="https://cdn.jsdelivr.net/gh/netosep/textural-triangle-canvas/TexturalTriangleCanvas.js"></script>
// ou
<script src="https://cdn.jsdelivr.net/gh/netosep/textural-triangle-canvas/TexturalTriangleCanvas.min.js"></script>

Em seu HTML, crie sua tag canvas com um ID:

<canvas id="myCanvas" width="700" height="700"></canvas>

Note

— Use as medidas de width e height do canvas iguais! Quanto maior o tamanho melhor a resolução da imagem gerada.

Em seu código JavaScript, use:

<script>
    // passando como parâmetro (string), o id do seu Canvas
    let myTriangle = new TexturalTriangleCanvas('myCanvas');
</script>

Para somente desenhar o triângulo sem os valores, use:

myTriangle.draw();
// ou diretamente
new TexturalTriangleCanvas('myCanvas').draw();

🖼 Preview:

Para desenhar com valores, use:

let siltPercent = 15;
let sandPercent = 60;
let clayPercent = 25;

triangle.drawWithValues(siltPercent, sandPercent, clayPercent);
// ou também diretamente
new TexturalTriangleCanvas('myCanvas').drawWithValues(siltPercent, sandPercent, clayPercent);

Note

A sequencia dos parâmetros da função devem ser respectivamente: silte, areia e argila

Warning

A soma dos três valores deve resultar 100, caso contrário retornará um erro no console.

🖼 Preview:

🌟 Extras

Idiomas suportados: Inglês, Português Brasileiro e Espanhol (fique a vontade para utilizar o seu 😉).

myTriangle.setLanguage('pt-br'); // para usar o idioma português brasileiro (nativo)

Note

Caso queira utilizar um idioma diferente dos três citados, você pode passar um objeto json como segundo parâmetro da função. Para mais informações e padrões, veja o código fonte.

Utilize também o método refresh() para aplicar alterações de texto na imagem do triângulo:

myTriangle.refresh();

📌 Contribuições

Sinta-se à vontade para abrir issues e realizar pull requests. Contribuições são bem-vindas 😉.

📜 Licença

MIT

Developed with 🖤 by Neto Sepulveda