박스크기 동적으로 크기가 변할 때 같이 적용되게 하는 방법
자바스크립트에서 비율로 처리 해야 할 때 필요한 함수 입니다.
픽셀로 전환을 다시 하거나 픽셀을 비율로 처리 하거나 서로 전환이 가능한 기능을 가집니다.
픽셀은 고정된것이기 때문에 화면이나 특정 박스안에 있을때 동적으로 처리가 되지 않습니다. 변화된 크기에 따라서 위치나 크기가 같이 변하게 하려면 비율로 처리를 해야 하는데 그때 필요한 부분입니다.
/**
* px to percent change
*
* @param mixed mode : px2per, per2px
* @param mixed divWidth : 대상박스 가로
* @param mixed divHeight : 대상박스 세로
* @param mixed x
* @param mixed y
*
* @return [type]
*
*/
function per_px_change( mode, divWidth, divHeight, x, y ) {
if ( mode == 'px2per' ) {
let x_per = (x / divWidth) * 100;
let y_per = (y / divHeight) * 100;
return {
'x_per' : x_per,
'y_per' : y_per
}
}
else if ( mode == 'per2px' ) {
let x_px = (divWidth * x ) / 100;
let y_px = (divHeight * y) / 100;
return {
'x_px' : x_px,
'y_px' : y_px
}
}
else j
return -1;
}
let oRtn1 = per_px_change('px2per', 500, 400, 50, 50);
let oRtn2 = per_px_change('per2px', 500, 400, 10, 12.5);
console.log(oRtn1);
console.log(oRtn2);
이렇게 비율로 처리를 하게 되면 유연한 결과를 보여 줄 수 있습니다.
* 참고
