Cómo determinar el arco de un gráfico al crear un mapa de imagen en html5

De acuerdo con el principio de mapeo de imágenes, se puede ver que se trata de un área circular. Simplemente determine las coordenadas centrales y el radio del círculo. ¿Cómo determinar el valor de (x, y, r)?

Hay dos métodos disponibles:

1. Medición de la herramienta de recorte QQ

Utilizamos la herramienta de recorte QQ (ctrl alt a). no Antes de liberar, capture los valores de retorno RGB y RGB del ancho y alto de un píxel en la ventana de captura de pantalla. Los valores correspondientes al ancho y alto (x, y) son los mismos que el radio del. área central, y se puede medir por intercepción.

En segundo lugar, es conveniente utilizar capturas de pantalla QQ para medir áreas circulares, pero cuando se trata de áreas poligonales, será muy problemático interceptarlas y medirlas una por una. En este momento, utilizamos el pensamiento inverso. para convertir las imágenes Al convertirlo en un mapeo de imágenes, puede obtener automáticamente las coordenadas de cada punto de la imagen, lo que se puede lograr usando el siguiente código.

lt;pgt;

lt;a href="/bmiddle/69c7be75jw1ec4tmykr6nj20c807sjrl.jpg" ismap alt="Té de la tarde con limón"gt;

lt; /agt;

lt;/p>

lt;/pgt;

La razón por la que se cita una URL antes del código de la imagen es para permitir que el mouse para moverse Cuando se muestra la imagen, puede ver el valor de las coordenadas del punto de retorno en la barra de estado de la ventana del navegador, como se muestra en la imagen:

El lugar señalado por el dedo meñique corresponde al Valores de coordenadas horizontales y verticales del píxel. Después de anotar el valor, la sintaxis del valor debe pasarse al mapa de imagen creado y se implementa el valor del área. Por ejemplo, las coordenadas son x=170; y=137;

Escribí este código para ver qué podemos lograr:

lt;pgt;

lt;img src="/bmiddle/69c7be75jw1ec4tmykr6nj20c807sjrl .jpg" usemap="#nurture" alt="Té de la tarde con limón"/gt;

lt; map name="Permacultura" id="Permacultura"gt;

lt; "circle" coords="170, 137, 102" href="/subview/7884/5060795.htm" target ="_blank" alt="rodaja de limón"/gt;

lt;

lt;/pgt;

Cuando el puntero permanezca en esta área circular, aparecerán las palabras "Lemon Slice". Haga clic en él y saltará a la página que especificamos. descripción.