{"id":533,"date":"2019-03-25T17:31:13","date_gmt":"2019-03-25T20:31:13","guid":{"rendered":"http:\/\/xexeu.elipse.com.br\/pt\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/"},"modified":"2019-03-25T17:31:13","modified_gmt":"2019-03-25T20:31:13","slug":"e3-tips-criando-objetos-de-tela-que-nao-deformam","status":"publish","type":"post","link":"https:\/\/kb.elipse.com.br\/en\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/","title":{"rendered":"E3 Tips: Criando objetos de tela que n\u00e3o ‘deformam’."},"content":{"rendered":"

Problema:<\/font><\/strong><\/p>\n

\n \n<\/div>\n
\n

\n“O problema \u00e9 que<\/font><\/font>, dependendo da sua posi\u00e7\u00e3o na tela, <\/font><\/font>os objetos ficam “deformados”. Por exemplo, foi feito um teste com um c\u00edrculo de 150 X 150. Ao mudar a posi\u00e7\u00e3o do c\u00edrculo na tela, em algumas posi\u00e7\u00f5es seu tamanho era visualmente menor do que o inicial, mas as propriedades continuavam apontando 150 X 150. Como <\/font>resolver este problema? Isto tamb\u00e9m ocorre em casos onde \u00e9 necess\u00e1rio utilizar o zoom para ajustar a tela ao tamanho do Viewer ou do Quadro devido a alguma altera\u00e7\u00e3o de resolu\u00e7\u00e3o, por exemplo.”<\/font><\/font><\/p><\/blockquote>\n<\/div>\n

\n 
\n
Causa:<\/font><\/strong>
\n
 
\n<\/div>\n
Este problema acontece devido aos arredondamentos (truncagem) que ocorrem na convers\u00e3o de coordenadas HIMETRIC para Pixels. Por exemplo, s\u00e3o dados dois c\u00edrculos de tamanho 150×150 (em HIMETRIC): <\/font><\/div>\n
\n<\/div>\n
    \n
  • Circle1<\/span>:  X=0  Y=0  Coordenadas = (0, 0, 150, 150)<\/font> <\/font>\n<\/li>\n
  • Circle2<\/span>:  X=1000  Y=1000  Coordenadas = (1000, 1000, 1150, 1150)<\/font><\/li>\n<\/ul>\n
    \n<\/div>\n
    Supondo que o Zoom seja 100%, e o micro esteja configurado com a resolu\u00e7\u00e3o normal (96 DPI), o c\u00e1lculo de HIMETRIC para Pixel ser\u00e1 o seguinte:<\/font><\/div>\n
    \n

    \nPIXEL = (HIMETRIC * 96) \/ 2540<\/font><\/p><\/blockquote>\n

    Utilizando a f\u00f3rmula acima, as coordenadas dos objetos em pixels seriam:<\/font><\/div>\n<\/div>\n
      \n
    • Circle1<\/span>:  CoordenadasBrutasEmPixel = (0, 0, 5.67, 5.67)<\/font> <\/font>\n<\/li>\n
    • Circle2<\/span>:  CoordenadasBrutasEmPixel = (37.8, 37.8, 43.46, 43.46)<\/font><\/li>\n<\/ul>\n
      \n<\/div>\n
      Por\u00e9m, como na tela n\u00e3o existem \u2018meios-p\u00edxels\u2019, os valores acabam truncados:<\/font><\/div>\n
      \n<\/div>\n
        \n
      • Circle1<\/span>:  CoordenadasTruncadasEmPixel = (0, 0, 5, 5), di\u00e2metro = 5 pixels<\/font> <\/font>\n<\/li>\n
      • Circle2<\/span>:  CoordenadasTruncadasEmPixel = (37, 37, 43, 43), di\u00e2metro = 6 pixels<\/font><\/li>\n<\/ul>\n
        \n<\/div>\n
        Note que o Circle2 <\/span>ficou 1 pixel maior que o Circle1<\/span>!<\/font>
        \n<\/div>\n
         
        \n
         
        \n
        Solu\u00e7\u00e3o:<\/font><\/strong>
        \n
         
        \n<\/div>\n
        Para resolver (ou pelo menos minimizar) este problema, ter\u00edamos que deixar o tamanho do c\u00edrculo como um m\u00faltiplo do tamanho exato de um pixel. Para isto, precisamos descobrir o tamanho de um pixel em HIMETRIC:<\/font><\/div>\n
        \n
        \n

        HIMETRIC = (PIXEL * 2540) \/ 96<\/font><\/p>\n<\/blockquote>\n<\/div>\n

        Portanto, 1 pixel = 26,4583333333… HIMETRIC. Como este n\u00famero \u00e9 uma d\u00edzima peri\u00f3dica (3333333…), \u00e9 melhor definir o c\u00edrculo em m\u00faltiplos de 3 pixels. Por exemplo, para conseguir um c\u00edrculo de \u2018tamanho est\u00e1vel\u2019 com 6 pixels de di\u00e2metro, defina o objeto com Height = 158,75 e Width = 158,75. Quando este objeto for movido na tela, a tend\u00eancia \u00e9 que o seu tamanho em pixels fique ‘est\u00e1vel’:<\/font><\/div>\n
        \n<\/div>\n
          \n
        • Circle1<\/span>:  X=0  Y=0  Width=158.75  Height=158.75
          CoordenadasHIMETRIC = (0, 0, 158.75, 158.75)
          CoordenadasBrutasEmPixel = (0, 0, 6, 6)
          CoordenadasTruncadasEmPixel = (0, 0, 6, 6)
          Di\u00e2metro = 6 pixels
          <\/font>\n<\/li>\n
        • Circle2<\/span>:  X=1000  Y=1000  Width=158.75  Height=158.75
          CoordenadasHIMETRIC = (1000, 1000, 1158.75, 1158.75)
          CoordenadasBrutasEmPixel = (37.7953…, 37.7953…, 43.7953…, 43.7953…)
          CoordenadasTruncadasEmPixel = (37, 37, 43, 43)
          Di\u00e2metro = 6 pixels<\/font><\/li>\n<\/ul>\n
          \n 
          \n
          Dica:<\/font><\/strong>
          \n
           
          \n<\/div>\n
          O pr\u00f3prio editor de telas do E3 permite criar objetos de tamanho ‘est\u00e1vel’ sem a necessidade de todos estes c\u00e1lculos.<\/font>
          \n
           
          \n
          Quando necessitar de um objeto com tamanho ‘est\u00e1vel’ (normalmente, objetos que ser\u00e3o copiados v\u00e1rias vezes na tela como, por exemplo, uma defini\u00e7\u00e3o de XControl), basta desligar o ‘grid’ do editor de telas e deixar o Zoom em 100% enquanto voc\u00ea cria o objeto com o Mouse. Os objetos criados desta forma ficam sempre com um tamanho m\u00faltiplo do tamanho de um pixel.<\/font>
          \n
           
          \n
          AVISO IMPORTANTE:  mesmo que voc\u00ea siga a dica acima e crie objetos com tamanho ‘est\u00e1vel’, ainda assim podem ocorrer distor\u00e7\u00f5es causadas por imprecis\u00f5es na representa\u00e7\u00e3o de n\u00fameros em ponto flutuante (podem ocorrer perdas m\u00ednimas de precis\u00e3o que acabam causando diferen\u00e7as de um pixel no final).<\/strong><\/font><\/div>\n","protected":false},"excerpt":{"rendered":"

          Problema:   “O problema \u00e9 que, dependendo da sua posi\u00e7\u00e3o na tela, os objetos ficam “deformados”. Por exemplo, foi feito um teste com um c\u00edrculo de 150 X 150. Ao mudar a…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0},"categories":[609],"tags":[],"yoast_head":"\nE3 Tips: Criando objetos de tela que n\u00e3o 'deformam'. - Elipse Knowledgebase<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"E3 Tips: Criando objetos de tela que n\u00e3o 'deformam'.\" \/>\n<meta property=\"og:description\" content=\"Problema:   “O problema \u00e9 que, dependendo da sua posi\u00e7\u00e3o na tela, os objetos ficam “deformados”. Por exemplo, foi feito um teste com um c\u00edrculo de 150 X 150. Ao mudar a…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/\" \/>\n<meta property=\"og:site_name\" content=\"Elipse Knowledgebase\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/elipsesoftware\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-25T20:31:13+00:00\" \/>\n<meta name=\"author\" content=\"Elipse Software\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Elipse Software\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/\"},\"author\":{\"name\":\"Elipse Software\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/person\/def69ea453ea60b250497b89225a9f87\"},\"headline\":\"E3 Tips: Criando objetos de tela que n\u00e3o ‘deformam’.\",\"datePublished\":\"2019-03-25T20:31:13+00:00\",\"dateModified\":\"2019-03-25T20:31:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/\"},\"wordCount\":525,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#organization\"},\"articleSection\":[\"Objetos de Tela\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/\",\"url\":\"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/\",\"name\":\"[:pt]E3 Tips: Criando objetos de tela que n\u00e3o 'deformam'.[:] - Elipse Knowledgebase\",\"isPartOf\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#website\"},\"datePublished\":\"2019-03-25T20:31:13+00:00\",\"dateModified\":\"2019-03-25T20:31:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/kb.elipse.com.br\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"E3 Tips: Criando objetos de tela que n\u00e3o ‘deformam’.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kb.elipse.com.br\/#website\",\"url\":\"https:\/\/kb.elipse.com.br\/\",\"name\":\"Elipse Knowledgebase\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kb.elipse.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kb.elipse.com.br\/#organization\",\"name\":\"Elipse Software\",\"url\":\"https:\/\/kb.elipse.com.br\/\",\"sameAs\":[\"http:\/\/www.facebook.com\/elipsesoftware\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png\",\"contentUrl\":\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png\",\"width\":161,\"height\":58,\"caption\":\"Elipse Software\"},\"image\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/person\/def69ea453ea60b250497b89225a9f87\",\"name\":\"Elipse Software\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ff1f7ec38f4687b06f6851d97b3cd2d0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ff1f7ec38f4687b06f6851d97b3cd2d0?s=96&d=mm&r=g\",\"caption\":\"Elipse Software\"},\"url\":\"https:\/\/kb.elipse.com.br\/en\/author\/webmasterelipse-com-br\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"E3 Tips: Criando objetos de tela que n\u00e3o 'deformam'. - Elipse Knowledgebase","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/","og_locale":"en_US","og_type":"article","og_title":"[:pt]E3 Tips: Criando objetos de tela que n\u00e3o 'deformam'.[:] - Elipse Knowledgebase","og_description":"Problema:   “O problema \u00e9 que, dependendo da sua posi\u00e7\u00e3o na tela, os objetos ficam “deformados”. Por exemplo, foi feito um teste com um c\u00edrculo de 150 X 150. Ao mudar a…","og_url":"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/","og_site_name":"Elipse Knowledgebase","article_publisher":"http:\/\/www.facebook.com\/elipsesoftware","article_published_time":"2019-03-25T20:31:13+00:00","author":"Elipse Software","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Elipse Software","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/#article","isPartOf":{"@id":"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/"},"author":{"name":"Elipse Software","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/person\/def69ea453ea60b250497b89225a9f87"},"headline":"E3 Tips: Criando objetos de tela que n\u00e3o ‘deformam’.","datePublished":"2019-03-25T20:31:13+00:00","dateModified":"2019-03-25T20:31:13+00:00","mainEntityOfPage":{"@id":"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/"},"wordCount":525,"commentCount":0,"publisher":{"@id":"https:\/\/kb.elipse.com.br\/#organization"},"articleSection":["Objetos de Tela"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/","url":"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/","name":"[:pt]E3 Tips: Criando objetos de tela que n\u00e3o 'deformam'.[:] - Elipse Knowledgebase","isPartOf":{"@id":"https:\/\/kb.elipse.com.br\/#website"},"datePublished":"2019-03-25T20:31:13+00:00","dateModified":"2019-03-25T20:31:13+00:00","breadcrumb":{"@id":"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kb.elipse.com.br\/e3-tips-criando-objetos-de-tela-que-nao-deformam\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/kb.elipse.com.br\/en\/"},{"@type":"ListItem","position":2,"name":"E3 Tips: Criando objetos de tela que n\u00e3o ‘deformam’."}]},{"@type":"WebSite","@id":"https:\/\/kb.elipse.com.br\/#website","url":"https:\/\/kb.elipse.com.br\/","name":"Elipse Knowledgebase","description":"","publisher":{"@id":"https:\/\/kb.elipse.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kb.elipse.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/kb.elipse.com.br\/#organization","name":"Elipse Software","url":"https:\/\/kb.elipse.com.br\/","sameAs":["http:\/\/www.facebook.com\/elipsesoftware"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png","contentUrl":"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png","width":161,"height":58,"caption":"Elipse Software"},"image":{"@id":"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/person\/def69ea453ea60b250497b89225a9f87","name":"Elipse Software","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ff1f7ec38f4687b06f6851d97b3cd2d0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ff1f7ec38f4687b06f6851d97b3cd2d0?s=96&d=mm&r=g","caption":"Elipse Software"},"url":"https:\/\/kb.elipse.com.br\/en\/author\/webmasterelipse-com-br\/"}]}},"_links":{"self":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts\/533"}],"collection":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/comments?post=533"}],"version-history":[{"count":0,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts\/533\/revisions"}],"wp:attachment":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/media?parent=533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/categories?post=533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/tags?post=533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}