{"id":542,"date":"2014-04-03T16:27:51","date_gmt":"2014-04-03T15:27:51","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=542"},"modified":"2021-08-06T17:16:43","modified_gmt":"2021-08-06T16:16:43","slug":"relleno-2-d","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/relleno-2-d\/","title":{"rendered":"Relleno 2-D"},"content":{"rendered":"<p><span style=\"line-height: 1.5em;\">El panel de configuraci\u00f3n espec\u00edfico del tipo <\/span><span style=\"font-family: Courier New;\"><small><strong>relleno<\/strong><\/small><\/span><span style=\"line-height: 1.5em;\"> tiene este aspecto:<\/span><\/p>\n<p><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/03\/graficos_relleno.jpg\"><img class=\"wp-image-298 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/03\/graficos_relleno.jpg\" alt=\"graficos_relleno\" width=\"543\" height=\"344\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/03\/graficos_relleno.jpg 849w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/03\/graficos_relleno-300x190.jpg 300w\" sizes=\"(max-width: 543px) 100vw, 543px\" \/><\/a><\/p>\n<p>Como puede verse, se trata \u00fanicamente de un punto y un color. El punto funciona como la semilla o punto inicial de un proceso de relleno o coloreado, que llena, con el color seleccionado, la regi\u00f3n cerrada dentro de la cual se encuentra el punto. Los gr\u00e1ficos que son de fondo no cuentan como fronteras para el relleno, a menos que el relleno mismo sea de fondo.<\/p>\n<p><span style=\"color: #004080; font-family: Arial;\"><span style=\"color: #000000;\">El \u00fanico campo espec\u00edfico de este objeto es:<\/span><\/span><\/p>\n<table style=\"width: 90%;\" border=\"3\" cellspacing=\"2\" cellpadding=\"2\" align=\"center\">\n<tbody>\n<tr>\n<td width=\"26%\">\n<div class=\"tabla\" align=\"center\">\n<p><strong>expresi\u00f3n<\/strong><\/p>\n<\/div>\n<\/td>\n<td width=\"74%\">\n<p class=\"tabla\" style=\"text-align: justify;\">Es un campo de texto. Su contenido es un par ordenado de expresiones que indica el punto que ser\u00e1 la semilla del relleno.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>En la siguiente escena podemos ver una aplicaci\u00f3n del objeto relleno para colorear diversas provincias de Espa\u00f1a.<\/p>\n<p><iframe class=\"iframe-class\" src=\"https:\/\/descartesjs.org\/repositorio\/Colorea_con_relleno\/relleno.html\" width=\"970\" height=\"550\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p style=\"text-align: center;\">(Puedes descargar esta escena desde <a href=\"https:\/\/descartesjs.org\/repositorio\/Colorea_con_relleno\/Colorea_con_relleno.zip\">este enlace<\/a>)<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/descartesjs.org\/repositorio\/Colorea_con_relleno\/relleno.html\" target=\"_blank\" rel=\"noopener noreferrer\">Aqu\u00ed<\/a> podemos ver la escena en otra ventana<\/p>\n<p>Lo que se ha hecho es utilizar una imagen sin color y poner una semilla en cada regi\u00f3n que quiere colorearse. El c\u00f3digo correspondiente est\u00e1 reflejado en la siguiente imagen:<br \/>\n<a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/rellenos.png\"><img class=\"alignnone size-full wp-image-3060\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/rellenos.png\" alt=\"C\u00f3digo del uso de relleno\" width=\"982\" height=\"199\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/rellenos.png 982w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/rellenos-300x61.png 300w\" sizes=\"(max-width: 982px) 100vw, 982px\" \/><\/a><\/p>\n<p>El relleno de una regi\u00f3n arbitraria a partir de una semilla, en general, tiene una carga computacional alta, especialmente en el contexto de DescartesJS, ya que internamente requiere ir comparando pixel a pixel si est\u00e1 en la regi\u00f3n deseada y cambiar su atributo color en caso de que sea as\u00ed. Por ello, en los casos que sea posible, es aconsejable usar el relleno de pol\u00edgonos ya que esta acci\u00f3n s\u00ed est\u00e1 incluida en el propio <a href=\"https:\/\/www.w3schools.com\/html\/html5_canvas.asp\" target=\"_blank\" rel=\"noopener noreferrer\"> Canvas<\/a>. Por esta particularidad la opci\u00f3n de a\u00f1adir el rastro del relleno est\u00e1 deshabilitada para el int\u00e9rprete en javascript.<\/p>\n<p>Adicionalmente, nos encontramos con un problema al utilizar el navegador Chrome cuando una escena que usa el relleno se ejecuta en local. Chrome restringe la modificaci\u00f3n de los atributos de los p\u00edxeles en local por cuestiones de seguridad. En la siguiente imagen podemos observar la escena anterior al abrirla en local con Chrome (a la izquierda) y con Firefox (a la derecha). En Chorme la escena no termina de cargarse y consultando la consola podemos observar el error que acontece, sin embargo en Firefox no existe esa restricci\u00f3n y la escena tambi\u00e9n funciona en local.<br \/>\n<a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/explica-relleno-local-chrome-firefox-mitad.png\"><img class=\"alignnone size-full wp-image-3055\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/explica-relleno-local-chrome-firefox-mitad.png\" alt=\"Error en Chrome\" width=\"930\" height=\"488\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/explica-relleno-local-chrome-firefox-mitad.png 930w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/explica-relleno-local-chrome-firefox-mitad-300x157.png 300w\" sizes=\"(max-width: 930px) 100vw, 930px\" \/><\/a><\/p>\n<p>Desde Descartes, obviamente, no es posible salvar esta restricci\u00f3n, por tanto si se desea trabajar en local con Chrome \u00fanicamente procede que el desarrollador de la escena use otros objetos cartesianos para conseguir el mismo objetivo. Una posibilidad es la superposici\u00f3n o capas de im\u00e1genes que es lo que se realiza en la siguiente escena:<\/p>\n<p><iframe class=\"iframe-class\" src=\"https:\/\/descartesjs.org\/repositorio\/Colorea_con_relleno\/superposicion.html\" width=\"970\" height=\"550\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p style=\"text-align: center;\">(Puedes descargar esta escena desde <a href=\"https:\/\/descartesjs.org\/repositorio\/Colorea_con_relleno\/Colorea_con_relleno.zip\">este enlace<\/a>)<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/descartesjs.org\/repositorio\/Colorea_con_relleno\/superposicion.html\" target=\"_blank\" rel=\"noopener noreferrer\">Aqu\u00ed<\/a> podemos ver la escena en otra ventana<\/p>\n<p>Aqu\u00ed se han superpuesto im\u00e1genes en las que est\u00e1 coloreada una de cada provincia que se desea colorear. El c\u00f3digo correspondiente es:<br \/>\n<a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagenes.png\"><img class=\"alignnone size-full wp-image-3061\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagenes.png\" alt=\"Capas de im\u00e1genes\" width=\"1000\" height=\"218\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagenes.png 1000w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/imagenes-300x65.png 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p>Veamos una aplicaci\u00f3n del relleno en un objeto educativo:<\/p>\n<p><iframe class=\"iframe-class\" src=\"https:\/\/descartesjs.org\/repositorio\/Colorea_guiado\/index.html\" width=\"970\" height=\"550\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p style=\"text-align: center;\">(Puedes descargar esta escena desde <a href=\"https:\/\/descartesjs.org\/repositorio\/Colorea_guiado\/Colorea_guiado.zip\">este enlace<\/a>)<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/descartesjs.org\/repositorio\/Colorea_guiado\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Aqu\u00ed<\/a> podemos ver la escena en otra ventana<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El panel de configuraci\u00f3n espec\u00edfico del tipo relleno tiene este aspecto: Como puede verse, se trata \u00fanicamente de un punto y un color. El punto funciona como la semilla o punto inicial de un proceso de relleno o coloreado, que llena, con el color seleccionado, la regi\u00f3n cerrada dentro de la cual se encuentra el punto. Los gr\u00e1ficos que son de fondo no cuentan como fronteras para el relleno, a menos que el relleno mismo sea de fondo. El \u00fanico campo espec\u00edfico de este objeto es: expresi\u00f3n Es un campo de texto. Su contenido es un par ordenado de expresiones<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/relleno-2-d\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[38],"tags":[6,59],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/542"}],"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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=542"}],"version-history":[{"count":21,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/542\/revisions"}],"predecessor-version":[{"id":3346,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/542\/revisions\/3346"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}