[Anderson Paraibano]

Resolvido: Como obter as coordenadas dos vértices das formas no Fabric.js

Introdução:
O Fabric.js é uma biblioteca poderosa e flexível para trabalhar com canvas em HTML5. Ele permite criar e manipular formas gráficas interativas, como retângulos, círculos e polígonos. No entanto, por padrão, o Fabric.js fornece as coordenadas dos cantos de controle das formas. Neste artigo, vamos explorar como obter as coordenadas dos vértices das formas em vez das coordenadas dos cantos de controle no Fabric.js. Faremos isso usando JavaScript e HTML.

Passo 1: Configurando o ambiente
Antes de começarmos, certifique-se de ter o Fabric.js instalado e incluído em seu projeto HTML. Você pode baixar a biblioteca no site oficial do Fabric.js ou usar um gerenciador de pacotes, como o npm, para instalá-lo.

Passo 2: Criando uma forma
Vamos começar criando uma forma no canvas do Fabric.js. Neste exemplo, vamos criar um retângulo.

javascript
Copy code
// Crie um objeto canvas usando o Fabric.js
var canvas = new fabric.Canvas(‘canvas’);

// Crie um retângulo no canvas
var rect = new fabric.Rect({
left: 100,
top: 100,
width: 200,
height: 150,
fill: ‘red’
});

// Adicione o retângulo ao canvas
canvas.add(rect);
Passo 3: Obtendo as coordenadas dos vértices
Agora, vamos nos concentrar em obter as coordenadas dos vértices do retângulo em vez das coordenadas dos cantos de controle. O Fabric.js não fornece diretamente as coordenadas dos vértices, mas podemos calcular facilmente com base nas coordenadas dos cantos de controle.

javascript
Copy code
// Obtenha as coordenadas dos cantos de controle do retângulo
var controlPoints = rect.oCoords;

// Calcule as coordenadas dos vértices usando as coordenadas dos cantos de controle
var vertices = [
{ x: controlPoints.tl.x, y: controlPoints.tl.y }, // Vértice superior esquerdo
{ x: controlPoints.tr.x, y: controlPoints.tr.y }, // Vértice superior direito
{ x: controlPoints.br.x, y: controlPoints.br.y }, // Vértice inferior direito
{ x: controlPoints.bl.x, y: controlPoints.bl.y } // Vértice inferior esquerdo
];

// Exiba as coordenadas dos vértices no console
console.log(vertices);
Passo 4: Testando e customizando
Agora que temos as coordenadas dos vértices do retângulo, podemos fazer o que quisermos com elas. Por exemplo, podemos exibi-las na tela ou realizar cálculos adicionais com base nelas.

javascript
Copy code
// Exiba as coordenadas dos vértices em algum elemento HTML
var vertexDisplay = document.getElementById(‘vertex-display’);
vertexDisplay.innerHTML = JSON.stringify(vertices);
Conclusão:
Ao seguir os passos acima, você poderá obter as coordenadas dos vértices das formas no Fabric.js. Embora o Fabric.js forneça as coordenadas dos cantos de controle por padrão, é possível calcular facilmente as coordenadas dos vértices com base nelas. Lembre-se de que este exemplo se concentra em retângulos, mas o mesmo conceito pode ser aplicado a outras formas suportadas pelo Fabric.js.

[Autor]

Posts