-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
teste.js
72 lines (63 loc) Β· 2.81 KB
/
teste.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { createCanvas, loadImage } from 'canvas'
import fs from 'fs'
// Configuraçáes do mapa
const largura = 800;
const altura = 600;
// Criar um canvas com as dimensΓ΅es do mapa
const canvas = createCanvas(largura, altura);
const context = canvas.getContext('2d');
// Carregar a imagem de fundo do mapa
loadImage('./src/glx/fundomapa.jpg').then((imagemMapa) => {
// Desenhar a imagem de fundo do mapa
context.drawImage(imagemMapa, 0, 0, largura, altura);
// COLONIA 1
const xInicio = 300; // Inicio da linha Horizontal da esquerda para direita
const xFim = 400; // Inicio da linha Horizontal da esquerda para direita
const yInicio = 160; // inicio da linha vertical de cima para baixo
const yFim = 260; // Fim da linha vertical de cima para baixo
const larguraBorda = 3;
context.strokeStyle = 'red'; // Cor da borda
context.lineWidth = larguraBorda;
context.strokeRect(xInicio, yInicio, xFim - xInicio, yFim - yInicio);
// Função para desenhar uma caixa de texto com cantos arredondados
function drawRoundRect(x, y, largura, altura, raio, corFundo, corBorda, opacidade) {
context.beginPath();
context.moveTo(x + raio, y);
context.arcTo(x + largura, y, x + largura, y + altura, raio);
context.arcTo(x + largura, y + altura, x, y + altura, raio);
context.arcTo(x, y + altura, x, y, raio);
context.arcTo(x, y, x + largura, y, raio);
context.closePath();
context.fillStyle = `rgba(255, 255, 255, ${opacidade})`; // Fundo branco quase transparente
context.strokeStyle = corBorda;
context.lineWidth = 1;
context.fill();
context.stroke();
}
// TΓtulos das cidades
const titulosCidades = [
{ nome: ' π- COLONIA 1', x: 380, y: 210 },
{ nome: ' π- COLONIA 2', x: 80, y: 130 },
{ nome: ' π- COLONIA 3', x: 570, y: 400 },
// Adicione mais tΓtulos conforme necessΓ‘rio
];
// Desenhar os tΓtulos das cidades
context.fillStyle = 'red'; // Cor das letras
context.font = 'bold 18px Arial'; // Estilo da fonte
titulosCidades.forEach(titulo => {
// Determinar a largura do texto para centralizΓ‘-lo na caixa
const larguraTexto = context.measureText(titulo.nome).width;
// Desenhar a caixa de texto com cantos arredondados
drawRoundRect(titulo.x - larguraTexto / 2 - 5, titulo.y - 20, larguraTexto + 10, 30, 5, 'white', 'white', 0.3); // Opacidade de 70%
// Definir a cor do texto como marrom
context.fillStyle = 'brown';
context.arc(titulosCidades.x, titulosCidades.y, 5, 0, Math.PI * 3);
// Escrever o texto dentro da caixa
context.fillText(titulo.nome, titulo.x - larguraTexto / 2, titulo.y);
});
// Salvar o mapa como uma imagem
const buffer = canvas.toBuffer('image/png');
fs.writeFileSync('mapa_com_posicoes.png', buffer);
}).catch((error) => {
console.error('Erro ao carregar imagem do mapa:', error);
});