{"id":1072,"date":"2014-04-12T03:59:38","date_gmt":"2014-04-12T01:59:38","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=1072"},"modified":"2021-08-06T20:06:17","modified_gmt":"2021-08-06T19:06:17","slug":"imagenes-graficos-2d","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/imagenes-graficos-2d\/","title":{"rendered":"Im\u00e1genes en Gr\u00e1ficos 2D"},"content":{"rendered":"<p>Las im\u00e1genes se pueden insertar como <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=1358\">fondo de un espacio<\/a>,<a href=\"https:\/\/descartesjs.org\/documentacion\/?p=1763\"> asociados a controles<\/a> y, como lo explicamos en este apartado, como un elemento tipo gr\u00e1fico 2D. En este caso, el panel de configuraci\u00f3n espec\u00edfico del tipo <strong>imagen<\/strong>\u00a0tiene este aspecto:<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen1.png\"><img class=\" wp-image-1073 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen1.png\" alt=\"imagen1\" width=\"752\" height=\"196\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen1.png 835w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen1-300x78.png 300w\" sizes=\"(max-width: 752px) 100vw, 752px\" \/><\/a><\/p>\n<p>A continuaci\u00f3n se explican los campos espec\u00edficos.<\/p>\n<div align=\"center\">\n<table class=\" aligncenter\" style=\"width: 690px;\" border=\"1\">\n<tbody>\n<tr>\n<td><strong>Expresi\u00f3n<\/strong><\/td>\n<td>La expresi\u00f3n es un campo de texto. Su contenido puede ser de dos tipos:<\/p>\n<ul>\n<li><span style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;\">S\u00f3lo uso de las coordenadas (x, y). En este caso, se asumen estas coordenadas como el extremo superior izquierdo de la imagen.<\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen2.png\"><img class=\" wp-image-1079 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen2.png\" alt=\"imagen2\" width=\"673\" height=\"418\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen2.png 841w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen2-300x186.png 300w\" sizes=\"(max-width: 673px) 100vw, 673px\" \/><\/a><\/p>\n<ul>\n<li><span style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;\">Uso de coordenadas y tama\u00f1o de la imagen (x, y, w, h). Esta opci\u00f3n permite incluir dos valores (ancho y alto), que definen el tama\u00f1o relativo de la imagen. La imagen en su tama\u00f1o original se logra con la expresi\u00f3n (x, y, 1, 1). Una imagen reducida a la mitad ser\u00eda (x, y, 0.5, 0.5). Las coordenadas, en este caso, corresponden al centro de la imagen.<\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen3.png\"><img class=\" wp-image-1084 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen3.png\" alt=\"imagen3\" width=\"756\" height=\"409\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen3.png 840w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen3-300x162.png 300w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div align=\"center\">\n<table border=\"1\">\n<tbody>\n<tr>\n<td><strong>Archivo<\/strong><\/td>\n<td>Es un campo de texto libre en el que debe escribirse el nombre del archivo que contiene la imagen que se desea usar como objeto gr\u00e1fico. S\u00f3lo pueden utilizarse archivos png, jpg y gif. Los archivos de im\u00e1genes pueden colocarse \u00a0en la carpeta donde se encuentra la p\u00e1gina que contiene la escena o en subdirectorios de ella. En el nombre del archivo hay que escribir los subdirectorios (ver im\u00e1genes anteriores). Tambi\u00e9n es posible usar el nombre de un archivo, cuyo contenido es el archivo de la imagen, incluidos los subdirectorios.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen4.png\"><img class=\" wp-image-1087 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen4.png\" alt=\"imagen4\" width=\"740\" height=\"411\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen4.png 822w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagen4-300x166.png 300w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Animado<\/strong><\/td>\n<td>\u00a0Selector para indicar si se trata de una imagen animada\u00a0(gif animado). Los gif animados s\u00f3lo se representan como tales con el int\u00e9rprete de Java, con el int\u00e9rprete DescartesJS s\u00f3lo se ver\u00e1 la primera imagen que compone ese gif. Para usar gr\u00e1ficos animados con DescartesJS ha de usarse un espacio HTMLIframe (consulte el art\u00edculo \u00ab<a href=\"https:\/\/descartesjs.org\/documentacion\/?p=1751\">Espacios HTMLIframe<\/a>\u00ab)<\/td>\n<\/tr>\n<tr>\n<td><strong><strong>Frecuencia<\/strong><\/strong><\/td>\n<td>Lapso de tiempo en milisegundos que debe haber entre una y otra actualizaci\u00f3n de la imagen animada.<\/td>\n<\/tr>\n<tr>\n<td><strong>Rotini<\/strong><\/td>\n<td>Determina el \u00e1ngulo de rotaci\u00f3n de la imagen. Para una rotaci\u00f3n con respecto al centro de la imagen, se recomienda la expresi\u00f3n con coordenadas y tama\u00f1o de la imagen (ver escena de ejemplo, al final de este apartado).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p style=\"text-align: left;\">En la siguiente escena se puede observar el funcionamiento de los par\u00e1metros \u00abExpresi\u00f3n\u00bb y \u00abRotini\u00bb. Usa los controles y observa el comportamiento de la imagen, si haces clic en el bot\u00f3n \u00abCoordenadas y tama\u00f1o\u00bb, podr\u00e1s practicar, adem\u00e1s, con el <strong>rotini<\/strong> o rotaci\u00f3n de la imagen:<\/p>\n<div style=\"text-align: center;\">\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/documentacion_4D\/Imagenes_JS\/ejemplo1.html\" width=\"610\" height=\"520\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/div>\n<\/div>\n<p>Si prestaste atenci\u00f3n, seguramente notaste que para valores negativos en el tama\u00f1o, la imagen se invierte. La siguiente escena, muestra una utilidad de este comportamiento del tama\u00f1o de la imagen:<\/p>\n<div style=\"text-align: center;\">\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/documentacion_4D\/Imagenes_JS\/ejemplo2.html\" width=\"320\" height=\"320\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/div>\n<div style=\"text-align: center;\">(Puede descargar esta escena y la anterior desde <a href=\"https:\/\/descartesjs.org\/repositorio\/documentacion_4D\/Imagenes_JS.zip\">este enlace<\/a>)<\/div>\n<p>Finalmente, la opci\u00f3n familia que trae el panel de configuraci\u00f3n, tambi\u00e9n es posible usarla con im\u00e1genes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Las im\u00e1genes se pueden insertar como fondo de un espacio, asociados a controles y, como lo explicamos en este apartado, como un elemento tipo gr\u00e1fico 2D. En este caso, el panel de configuraci\u00f3n espec\u00edfico del tipo imagen\u00a0tiene este aspecto: A continuaci\u00f3n se explican los campos espec\u00edficos. Expresi\u00f3n La expresi\u00f3n es un campo de texto. Su contenido puede ser de dos tipos: S\u00f3lo uso de las coordenadas (x, y). En este caso, se asumen estas coordenadas como el extremo superior izquierdo de la imagen. Uso de coordenadas y tama\u00f1o de la imagen (x, y, w, h). Esta opci\u00f3n permite incluir dos<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/imagenes-graficos-2d\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41],"tags":[56,112],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/1072"}],"collection":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=1072"}],"version-history":[{"count":21,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/1072\/revisions"}],"predecessor-version":[{"id":3465,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/1072\/revisions\/3465"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=1072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=1072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=1072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}