luisgulo/Regla-nautica_Portland
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajuste de puntos al hacer zoom

Browse Source
This commit is contained in:
Luis Gutierrez Lopez committed 2026-11-05 15:54:19 +01:00
1 parent 75201c4626
commit 4023a3ea7a
2 files changed
+48 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

regla_portland.html
+24 -17
View File
@@ -408,6 +408,8 @@
// --- LÍNEAS FINAS DE COORDENADAS (LATITUD Y LONGITUD) PARA CADA PUNTO --- // --- LÍNEAS FINAS DE COORDENADAS (LATITUD Y LONGITUD) PARA CADA PUNTO ---
state.points.forEach((p, idx) => { state.points.forEach((p, idx) => {
const color = pointColors[idx % pointColors.length]; const color = pointColors[idx % pointColors.length];
const px = p.x * state.zoom;
const py = p.y * state.zoom;
ctx.strokeStyle = color; ctx.strokeStyle = color;
ctx.lineWidth = 1; ctx.lineWidth = 1;
@@ -415,14 +417,14 @@
// Línea Horizontal (Latitud - l) a través de todo el Canvas // Línea Horizontal (Latitud - l) a través de todo el Canvas
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(0, p.y); ctx.moveTo(0, py);
ctx.lineTo(canvas.width, p.y); ctx.lineTo(canvas.width, py);
ctx.stroke(); ctx.stroke();
// Línea Vertical (Longitud - L) a través de todo el Canvas // Línea Vertical (Longitud - L) a través de todo el Canvas
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(p.x, 0); ctx.moveTo(px, 0);
ctx.lineTo(p.x, canvas.height); ctx.lineTo(px, canvas.height);
ctx.stroke(); ctx.stroke();
ctx.setLineDash([]); ctx.setLineDash([]);
@@ -434,24 +436,24 @@
ctx.lineWidth = 3; ctx.lineWidth = 3;
ctx.setLineDash([6, 4]); ctx.setLineDash([6, 4]);
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(state.points[0].x, state.points[0].y); ctx.moveTo(state.points[0].x * state.zoom, state.points[0].y * state.zoom);
for (let i = 1; i < state.points.length; i++) { for (let i = 1; i < state.points.length; i++) {
ctx.lineTo(state.points[i].x, state.points[i].y); ctx.lineTo(state.points[i].x * state.zoom, state.points[i].y * state.zoom);
} }
ctx.stroke(); ctx.stroke();
ctx.setLineDash([]); ctx.setLineDash([]);
// Escribir la distancia en millas náuticas sobre cada segmento // Escribir la distancia en millas náuticas sobre cada segmento
if (state.pixelsPerNauticalMileBase !== null) { if (state.pixelsPerNauticalMileBase !== null) {
let currentPixelsPerNM = state.pixelsPerNauticalMileBase * state.zoom;
for (let i = 0; i < state.points.length - 1; i++) { for (let i = 0; i < state.points.length - 1; i++) {
let pA = state.points[i]; let pA = state.points[i];
let pB = state.points[i + 1]; let pB = state.points[i + 1];
let distPixels = Math.hypot(pB.x - pA.x, pB.y - pA.y); // Distancia en coordenadas base
let distNM = distPixels / currentPixelsPerNM; let distPixelsBase = Math.hypot(pB.x - pA.x, pB.y - pA.y);
let distNM = distPixelsBase / state.pixelsPerNauticalMileBase;
let midX = (pA.x + pB.x) / 2; let midX = ((pA.x + pB.x) / 2) * state.zoom;
let midY = (pA.y + pB.y) / 2; let midY = ((pA.y + pB.y) / 2) * state.zoom;
ctx.save(); ctx.save();
ctx.translate(midX, midY); ctx.translate(midX, midY);
@@ -477,10 +479,12 @@
// Dibujar marcadores de puntos de ruta con el color correspondiente // Dibujar marcadores de puntos de ruta con el color correspondiente
state.points.forEach((p, idx) => { state.points.forEach((p, idx) => {
const color = pointColors[idx % pointColors.length]; const color = pointColors[idx % pointColors.length];
const px = p.x * state.zoom;
const py = p.y * state.zoom;
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.beginPath(); ctx.beginPath();
ctx.arc(p.x, p.y, 6, 0, Math.PI * 2); ctx.arc(px, py, 6, 0, Math.PI * 2);
ctx.fill(); ctx.fill();
ctx.strokeStyle = '#ffffff'; ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 2; ctx.lineWidth = 2;
@@ -488,11 +492,11 @@
// Fondo para mejor legibilidad del nombre del punto // Fondo para mejor legibilidad del nombre del punto
ctx.fillStyle = 'rgba(15, 23, 42, 0.75)'; ctx.fillStyle = 'rgba(15, 23, 42, 0.75)';
ctx.fillRect(p.x + 8, p.y - 12, 55, 16); ctx.fillRect(px + 8, py - 12, 55, 16);
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.font = 'bold 11px sans-serif'; ctx.font = 'bold 11px sans-serif';
ctx.fillText(`Punto ${p.label}`, p.x + 12, p.y); ctx.fillText(`Punto ${p.label}`, px + 12, py);
}); });
} }
@@ -781,7 +785,10 @@
if (state.mode === 'ADD_POINTS') { if (state.mode === 'ADD_POINTS') {
const nextChar = String.fromCharCode(65 + state.points.length); const nextChar = String.fromCharCode(65 + state.points.length);
state.points.push({ x: clickX, y: clickY, label: nextChar }); // Almacenar coordenadas base (independientes del zoom)
const baseX = clickX / state.zoom;
const baseY = clickY / state.zoom;
state.points.push({ x: baseX, y: baseY, label: nextChar });
if (state.points.length === 2) { if (state.points.length === 2) {
const pA = state.points[0]; const pA = state.points[0];
@@ -799,8 +806,8 @@
document.getElementById('ruler-angle-slider').value = state.rulerAngle; document.getElementById('ruler-angle-slider').value = state.rulerAngle;
document.getElementById('disk-angle-slider').value = state.diskAngle; document.getElementById('disk-angle-slider').value = state.diskAngle;
state.rulerX = (pA.x + pB.x) / 2; state.rulerX = ((pA.x + pB.x) / 2) * state.zoom;
state.rulerY = (pA.y + pB.y) / 2; state.rulerY = ((pA.y + pB.y) / 2) * state.zoom;
} }
draw(); draw();
regla_portland_offline.html
+24 -17
View File
@@ -408,6 +408,8 @@
// --- LÍNEAS FINAS DE COORDENADAS (LATITUD Y LONGITUD) PARA CADA PUNTO --- // --- LÍNEAS FINAS DE COORDENADAS (LATITUD Y LONGITUD) PARA CADA PUNTO ---
state.points.forEach((p, idx) => { state.points.forEach((p, idx) => {
const color = pointColors[idx % pointColors.length]; const color = pointColors[idx % pointColors.length];
const px = p.x * state.zoom;
const py = p.y * state.zoom;
ctx.strokeStyle = color; ctx.strokeStyle = color;
ctx.lineWidth = 1; ctx.lineWidth = 1;
@@ -415,14 +417,14 @@
// Línea Horizontal (Latitud - l) a través de todo el Canvas // Línea Horizontal (Latitud - l) a través de todo el Canvas
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(0, p.y); ctx.moveTo(0, py);
ctx.lineTo(canvas.width, p.y); ctx.lineTo(canvas.width, py);
ctx.stroke(); ctx.stroke();
// Línea Vertical (Longitud - L) a través de todo el Canvas // Línea Vertical (Longitud - L) a través de todo el Canvas
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(p.x, 0); ctx.moveTo(px, 0);
ctx.lineTo(p.x, canvas.height); ctx.lineTo(px, canvas.height);
ctx.stroke(); ctx.stroke();
ctx.setLineDash([]); ctx.setLineDash([]);
@@ -434,24 +436,24 @@
ctx.lineWidth = 3; ctx.lineWidth = 3;
ctx.setLineDash([6, 4]); ctx.setLineDash([6, 4]);
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(state.points[0].x, state.points[0].y); ctx.moveTo(state.points[0].x * state.zoom, state.points[0].y * state.zoom);
for (let i = 1; i < state.points.length; i++) { for (let i = 1; i < state.points.length; i++) {
ctx.lineTo(state.points[i].x, state.points[i].y); ctx.lineTo(state.points[i].x * state.zoom, state.points[i].y * state.zoom);
} }
ctx.stroke(); ctx.stroke();
ctx.setLineDash([]); ctx.setLineDash([]);
// Escribir la distancia en millas náuticas sobre cada segmento // Escribir la distancia en millas náuticas sobre cada segmento
if (state.pixelsPerNauticalMileBase !== null) { if (state.pixelsPerNauticalMileBase !== null) {
let currentPixelsPerNM = state.pixelsPerNauticalMileBase * state.zoom;
for (let i = 0; i < state.points.length - 1; i++) { for (let i = 0; i < state.points.length - 1; i++) {
let pA = state.points[i]; let pA = state.points[i];
let pB = state.points[i + 1]; let pB = state.points[i + 1];
let distPixels = Math.hypot(pB.x - pA.x, pB.y - pA.y); // Distancia en coordenadas base
let distNM = distPixels / currentPixelsPerNM; let distPixelsBase = Math.hypot(pB.x - pA.x, pB.y - pA.y);
let distNM = distPixelsBase / state.pixelsPerNauticalMileBase;
let midX = (pA.x + pB.x) / 2; let midX = ((pA.x + pB.x) / 2) * state.zoom;
let midY = (pA.y + pB.y) / 2; let midY = ((pA.y + pB.y) / 2) * state.zoom;
ctx.save(); ctx.save();
ctx.translate(midX, midY); ctx.translate(midX, midY);
@@ -477,10 +479,12 @@
// Dibujar marcadores de puntos de ruta con el color correspondiente // Dibujar marcadores de puntos de ruta con el color correspondiente
state.points.forEach((p, idx) => { state.points.forEach((p, idx) => {
const color = pointColors[idx % pointColors.length]; const color = pointColors[idx % pointColors.length];
const px = p.x * state.zoom;
const py = p.y * state.zoom;
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.beginPath(); ctx.beginPath();
ctx.arc(p.x, p.y, 6, 0, Math.PI * 2); ctx.arc(px, py, 6, 0, Math.PI * 2);
ctx.fill(); ctx.fill();
ctx.strokeStyle = '#ffffff'; ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 2; ctx.lineWidth = 2;
@@ -488,11 +492,11 @@
// Fondo para mejor legibilidad del nombre del punto // Fondo para mejor legibilidad del nombre del punto
ctx.fillStyle = 'rgba(15, 23, 42, 0.75)'; ctx.fillStyle = 'rgba(15, 23, 42, 0.75)';
ctx.fillRect(p.x + 8, p.y - 12, 55, 16); ctx.fillRect(px + 8, py - 12, 55, 16);
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.font = 'bold 11px sans-serif'; ctx.font = 'bold 11px sans-serif';
ctx.fillText(`Punto ${p.label}`, p.x + 12, p.y); ctx.fillText(`Punto ${p.label}`, px + 12, py);
}); });
} }
@@ -781,7 +785,10 @@
if (state.mode === 'ADD_POINTS') { if (state.mode === 'ADD_POINTS') {
const nextChar = String.fromCharCode(65 + state.points.length); const nextChar = String.fromCharCode(65 + state.points.length);
state.points.push({ x: clickX, y: clickY, label: nextChar }); // Almacenar coordenadas base (independientes del zoom)
const baseX = clickX / state.zoom;
const baseY = clickY / state.zoom;
state.points.push({ x: baseX, y: baseY, label: nextChar });
if (state.points.length === 2) { if (state.points.length === 2) {
const pA = state.points[0]; const pA = state.points[0];
@@ -799,8 +806,8 @@
document.getElementById('ruler-angle-slider').value = state.rulerAngle; document.getElementById('ruler-angle-slider').value = state.rulerAngle;
document.getElementById('disk-angle-slider').value = state.diskAngle; document.getElementById('disk-angle-slider').value = state.diskAngle;
state.rulerX = (pA.x + pB.x) / 2; state.rulerX = ((pA.x + pB.x) / 2) * state.zoom;
state.rulerY = (pA.y + pB.y) / 2; state.rulerY = ((pA.y + pB.y) / 2) * state.zoom;
} }
draw(); draw();