Obteniendo todas las coordenadas del polígono del área específica de la imagen?

Question

Tengo una imagen donde pongo enlaces y texto con el mapa de imagen html. Eso funciona bien Me gustaría tener algún efecto de desplazamiento sobre áreas específicas de la imagen. Por ejemplo, tome un mapa del mundo y cuando pase el ratón sobre un país, ese se resaltará. Con el mapa de imagen html y algunos CSS, no hay problema, es decir, si tiene una lista de todas las coordenadas de polígonos de todos los países.

Entonces, ¿cómo puedo obtenerlos? No puedes hacer eso manualmente.

No soy un experto en photoshop, pero me imagino que harías una selección de "varita mágica" en un área y luego de alguna manera enumerar las coordenadas que se utilizan para crear la selección. ¿Hay tal funcionalidad?

Yo personalmente uso Paint.Net para la edición de imágenes simples y no tiene esa característica que yo sepa.

¿Conoces la manera de hacerlo?

Answer 1

no hay ninguna opción en ps que deba hacer las coordenadas en Dreamweaver.

Answer 2

Te diré cómo hacerlo con JavaScript, ya que este es un sitio de Q/A de programación.

para obtener las coordenadas rectangulares de los límites de selección es más fácil:

#target photoshop 

// Save the current unit preferences (optional) 
var startRulerUnits = app.preferences.rulerUnits 
var startTypeUnits = app.preferences.typeUnits 



// Set units to PIXELS 
app.preferences.rulerUnits = Units.PIXELS 
app.preferences.typeUnits = TypeUnits.PIXELS 

// Use the top-most document 
var doc = app.activeDocument; 

var coords = doc.selection.bounds; 

// Write coords to textfile on the desktop. Thanks krasatos 
var f = File('~/Desktop/coords.txt'); 
f.open('w'); 
f.write(coords); 
f.close(); 



// Reset to previous unit prefs (optional) 
app.preferences.rulerUnits = startRulerUnits; 
app.preferences.typeUnits = startTypeUnits; 

Esto dará a los límites rectangulares (pensar en el cuadro delimitador que se ve cuando la transformación) de la selección en el documento activo actual. Sale en el orden minX, minY, maxX, maxY. Esto debería ser información suficiente para traducir a coordenadas CSS.

Para obtener las coordenadas de los puntos de polígonos individuales se puede realizar la selección en una ruta de acceso y salida de cada pathPoint.anchor en el camino usando este script:

#target photoshop 

// Save the current unit preferences (optional) 
var startRulerUnits = app.preferences.rulerUnits 
var startTypeUnits = app.preferences.typeUnits 



// Set units to PIXELS 
app.preferences.rulerUnits = Units.PIXELS 
app.preferences.typeUnits = TypeUnits.PIXELS 

// Use the top-most document 
var doc = app.activeDocument; 

// Turn the selection into a work path and give it reference 
doc.selection.makeWorkPath(); 
var wPath = doc.pathItems['Work Path']; 

// This will be a string with the final output coordinates 
var coords = ''; 

// Loop through all path points and add their anchor coordinates to the output text 
for (var i=0; i<wPath.subPathItems[0].pathPoints.length; i++) { 
     coords += wPath.subPathItems[0].pathPoints[i].anchor + "\n"; 
} 


// Write coords to textfile on the desktop. Thanks krasatos 
var f = File('~/Desktop/coords.txt'); 
f.open('w'); 
f.write(coords); 
f.close(); 


// Remove the work path 
wPath.remove(); 




// Reset to previous unit prefs (optional) 
app.preferences.rulerUnits = startRulerUnits; 
app.preferences.typeUnits = startTypeUnits; 

Instrucciones:

-open su mapa imagen

-hacer una selección de la región utilizando la herramienta de selección favorita

-run el script con el ExtendScript demasiado lkit o seleccionando Archivo> Scripts> Buscar ... y selecciona el archivo .jsx donde se guarda el script.