-3

Em minha aplicação (com React), preciso que a figura apresentada seja equivalente às medidas do mundo real (cm / mm) em todos os aparelhos.

O meu problema é: se defino o diâmetro de um circulo como 3 centímetros, em vários dispositivos ele terá na verdade 2.5cm. Ou ainda, em outros, 3.5cm... A medida nunca é exata. E o mesmo acontece se deixo a medida em pixels, ela também sofre variação em diferentes dispositivos.

Minha solução eficaz, porém trabalhosa foi: Criei uma rota para que o usuário faça a 'calibragem' antes de chegar na tela em que precisará das medidas exatas. Nesta etapa o usuário precisa colocar um cartão bancário sobre a tela do aparelho e, através de um input range, ele deve ajustar a altura da imagem até fique igual a altura do cartão. clique aqui para ver uma imagem ilustrativa deste processo.

Me aproveitando da regra universal de que todos os cartões bancários possuem a altura de 5.4cm, consigo assim definir quantos pixels equivalem à um centímetro na tela daquele usuário e, com isto, prosseguir com a finalidade da minha aplicação.

O que eu preciso: A etapa de calibragem pode parecer muito trabalhosa ao usuário, fazendo- desistir do uso da aplicação. Por conta disto, preciso descobrir uma maneira de fazer essa etapa de calibragem de forma automática. Ou então, conseguir estabelecer um tamanho físico exato para a minha imagem, de forma que possua a mesma medida em todos os aparelhos em que for vista (tanto desktop quanto mobile).

1 Resposta 1

-2

O tamanho de um pixel (px) na tela de um dispositivo eletrônico depende da resolução da tela e do tamanho físico do dispositivo. Portanto, para calcular quantos pixels equivalem a 1 centímetro físico, é preciso conhecer a resolução da tela e o tamanho físico do dispositivo.

Uma maneira de fazer essa conversão é usar a seguinte fórmula:

px = (cm * resolução) / tamanho físico do dispositivo

onde:

px é o número de pixels cm é o tamanho em centímetros resolução é a resolução da tela em pixels por polegada (ppi) tamanho físico do dispositivo é o tamanho da tela em polegadas Por exemplo, suponha que você tenha um dispositivo com uma tela de 5 polegadas e uma resolução de 1080 x 1920 pixels. Para calcular quantos pixels equivalem a 1 centímetro, basta usar a fórmula acima:

px = (1 cm * 1080 pixels/polegada) / 5 polegadas = 216 pixels/cm

Isso significa que 1 centímetro físico na tela desse dispositivo equivale a 216 pixels.

No React Native, você pode usar a biblioteca PixelRatio para calcular o tamanho de um pixel em relação ao tamanho de um centímetro físico. A biblioteca PixelRatio fornece a constante get(), que retorna a relação de pixels por polegada (ppi) da tela do dispositivo.

Para calcular quantos pixels equivalem a 1 centímetro físico, basta dividir a relação de pixels por polegada pela quantidade de polegadas por centímetro. No código a seguir, eu mostro um exemplo de como fazer essa conversão usando a biblioteca PixelRatio:

import { PixelRatio } from 'react-native';

const pixelsPerInch = PixelRatio.get();
const inchesPerCentimeter = 0.393701;
const pixelsPerCentimeter = pixelsPerInch / inchesPerCentimeter;

console.log(`1 centímetro físico equivale a ${pixelsPerCentimeter} pixels.`);

Espero que isso ajude!

3
  • Obrigado Lucao. Muito clara a tua resposta. Mas estou trabalhando com o react mesmo, não o react-native. A biblioteca PixelRatio funciona também nesse caso? Commented 3/01/2023 às 16:57
  • Essa PixelRatio é exclusiva do ReactNative, porém na web nos temos o window.devicePixelRatio, dá uma olhada nela p ver se serve p você
    – Lucao
    Commented 3/01/2023 às 20:20
  • Pois é. Desse eu já tinha conhecimento, tentei utilizá-lo tempos atrás, porém o retorno que ele me dá não contribui para que eu consiga definir quantos pixels equivalem a 1 cm físico. Inclusive encontrei em alguns outros lugares pessoas afirmando coisas como: "Essa é uma limitação da tecnologia web... Não há como calcular consistentemente o que um ponto realmente mede no mundo real, ao contrário do desenvolvimento nativo". Mas como a aplicação se trata de um SAAS, não é viável fazê-la em app, entende? Enfim... achas que tem como descobrir os 'px/cm' usando esse window.devicePixelRatio? Commented 4/01/2023 às 0:08

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .