fix for blurry android, but init to proper res

This commit is contained in:
Roland Osborne 2023-05-04 13:29:36 -07:00
parent 6e86ec125d
commit 53d827a12e

View File

@ -9,8 +9,8 @@ export function useImageAsset(asset) {
frameWidth: 1, frameWidth: 1,
frameHeight: 1, frameHeight: 1,
imageRatio: 1, imageRatio: 1,
imageWidth: 1, imageWidth: 1024,
imageHeight: 1, imageHeight: 1024,
url: null, url: null,
loaded: false, loaded: false,
failed: false, failed: false,
@ -30,14 +30,15 @@ export function useImageAsset(asset) {
const frameRatio = state.frameWidth / state.frameHeight; const frameRatio = state.frameWidth / state.frameHeight;
if (frameRatio > state.imageRatio) { if (frameRatio > state.imageRatio) {
//height constrained //height constrained
const height = 0.9 * state.frameHeight; const height = Math.floor(0.9 * state.frameHeight);
const width = height * state.imageRatio; const width = Math.floor(height * state.imageRatio);
updateState({ imageWidth: width, imageHeight: height }); updateState({ imageWidth: width, imageHeight: height });
} }
else { else {
//width constrained //width constrained
const width = 0.9 * state.frameWidth; const width = Math.floor(0.9 * state.frameWidth);
const height = width / state.imageRatio; const height = Math.floor(width / state.imageRatio);
updateState({ imageWidth: width, imageHeight: height }); updateState({ imageWidth: width, imageHeight: height });
} }
} }
@ -45,7 +46,9 @@ export function useImageAsset(asset) {
}, [state.frameWidth, state.frameHeight, state.imageRatio, state.loaded]); }, [state.frameWidth, state.frameHeight, state.imageRatio, state.loaded]);
useEffect(() => { useEffect(() => {
updateState({ frameWidth: dimensions.width, frameHeight: dimensions.height }); imageWidth = dimensions.width * 0.9 > state.imageWidth ? state.imageWidth : dimensions.width * 0.9;
imageHeight = dimensions.height * 0.9 > state.imageHeight ? state.imageHeight : dimensions.height * 0.9;
updateState({ frameWidth: dimensions.width, frameHeight: dimensions.height, imageWidth, imageHeight });
}, [dimensions]); }, [dimensions]);
useEffect(() => { useEffect(() => {