Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Alex Godoy Wolff

Problemas em converter px em %

Por , em Javascript

Recommended Posts

Alex Godoy Wolff    0

Alex Godoy Wolff
Postado

Tenho um codigo que insere algumas "ancoras" em uma div, a qual me permite redimensionar a div em qualquer direção e mover.Estou fazendo em javascript puro, já tenho todo o código funcionando mas ele faz as operações em pixels. PReciso que faça em porcentagem pra poder remidensionar entre diferentes telas e salvar a alteração.

  bottomLeftEventResize() {
            let handler = this.shadowRoot.querySelector('.bottomBox').querySelector('.handler.handlerBottomLeft');

            let clientX;
            let clientY;
            let widthElement;
            let heightElement;
            let translateX;
            let translateY;

            handler.addEventListener('dragstart', (event) => {
                event.preventDefault();

                clientX = event.clientX;
                clientY = event.clientY;
                widthElement = Panel.parseWidthToPixels(parseFloat(this.style.width));
                heightElement = Panel.parseHeightToPixels(parseFloat(this.style.height));
                translateX = Panel.parseWidthToPixels(Panel.translateXParse(this.style.transform));
                translateY = Panel.parseHeightToPixels(Panel.translateYParse(this.style.transform));

                document.addEventListener('mousemove', mouseMove, false);
            });

            document.addEventListener('mouseup', (event) => {
                document.removeEventListener('mousemove', mouseMove, false);
            });

            let mouseMove = (event) => {
                let movedY = -1 * (clientY - event.clientY);
                let movedX = -1 * (clientX - event.clientX);

            //    this.style.transform = `translate(${ translateX + movedX}px,${ translateY }px`;
              this.style.width = `${ Panel.parseWidthToPercent(widthElement - movedX)}%`;

              this.style.transform = `translate(${Panel.parseWidthToPercent(translateX + movedX)}%,${ translateY }%`;



                this.style.height = `${ Panel.parseHeightToPercent(heightElement + movedY) }%`;

                //this.resizeDevExpressElements();
                };
}
      static translateXParse(translate) {
            let value;
            if (translate) {
                try {
                    value = translate.match(/translate\((-?\d+(?:\.\d*)?)%, (-?\d+(?:\.\d*)?)%\)/)[1];
                }
                catch (expection) {
                    value = 0;
                }
            }
            return !value ? 0 : parseFloat(value);
        };

        static translateYParse(translate) {
          let value;
          if (translate) {
            try {
              value = translate.match(/translate\((-?\d+(?:\.\d*)?)%, (-?\d+(?:\.\d*)?)%\)/)[2];
            }
            catch (expection) {
              value = 0;
            }
          }
          return !value ? 0 : parseFloat(value);
        };


        static parseWidthToPixels(percent){
          return (percent * window.innerWidth)  / 100 ;

        }

        static parseHeightToPixels(percent){
          return (percent * window.innerHeight)  / 100 ;

        }

        static parseHeightToPercent(pixels){
          return (100 / window.innerHeight) * pixels;
        }

        static parseWidthToPercent(pixels){
          return (100 / window.innerWidth) * pixels;
        }

Esse codigo não funciona e está em %

 this.style.transform = `translate(${Panel.parseWidthToPercent(translateX + movedX)}%,${ translateY }%`;

esse que está comentando faz a mesma coisa mas em px, e funciona perfeitamente. Alguém sabe o que pode ser?

 //    this.style.transform = `translate(${ translateX + movedX}px,${ translateY }px`;

<body>
  <guru-panel style="width:50%;height:30%;">
    <div style="background:#65C6BB">
    </div>
  </guru-panel>

Vou colocar no gitHub pra ver se ajuda. https://github.com/alexgwolff/Div-Resize

O evento está no "resize" inferiror esquerdo. É só clicar no botão pra ver as linhas de manipulação.

SÓ FUNCIONA NO CHROME!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex Godoy Wolff    0

Alex Godoy Wolff
Postado

Sim, mas isso não é um problema pra mim. Já que essa parte do bug é javascript basico.

O erro está aqui :

Eu tenho esse html

 

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div style="width:50%;height:30%;background:#65C6BB;position:absolute;transform: translate(20px,20px);">


    </div>
    <h2> Test </h2>
  </body>
</html>

Nessa unica div eu queria mudar o

transform: translate(20px,20px);

pra porcentagem. Mas fazendo o calculo assim

 

(100 / window.innerWidth) * 20;

ele me retorna 1.2285012285012284 . Se eu subistituir isso por

transform: translate(1.0416666666666667%,20px);

A div não fica no mesmo lugar. É como estivesse levando outra coisa em consideração.

Teoricamente essa conversão deveria manter a div no mesmo lugar, não?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito