[Vuejs]-Dynamically changing text-shadow x-y-offset depending on a font-size

by

0👍

✅

So i’ve made not the best but at least working implementation for complex shadow, it doesn’t work on every shadow right now, but i’m pretty close to better implementation, if someone interested or will be stuck with such a problem here is a snippet: (be careful, it won’t work with inset and you should modify parseShadowToArray, and also colors should be in #01234500 notation, but feel free to modify it if you need!)

function replacePxWithEmEquivalent(shadowStr, fontSize=16) {
    console.log(fontSize);
    const shadowArr = parseShadowStrToArray(shadowStr);
    let resultShadowStr = shadowArr.reduce((acc, shadowObj, i) => {
        return acc + `${(shadowObj.x_offset/fontSize)}em ${(shadowObj.y_offset/fontSize)}em ${(shadowObj.blur_radius/fontSize)}em ${(shadowObj.color)}${i === shadowArr.length-1 ? '' : ", "} `
    }, "");
    resultShadowStr = resultShadowStr.slice(0, -1);
    return resultShadowStr;
}

function parseShadowStrToArray(shadowStr) {
    const shadows = [];
    let shadowStrArray = shadowStr.replaceAll('px', '');
    shadowStrArray = shadowStrArray.split(',');
    shadowStrArray = shadowStrArray.map(shadowStr => shadowStr[0] === ' ' ? shadowStr.substring(1) : shadowStr);
    shadowStrArray.map(shadowStr => {
        const shadowParts = shadowStr.split(' ');
        shadows.push({
            x_offset: parseInt(shadowParts[0]),
            y_offset: parseInt(shadowParts[1]),
            blur_radius: parseInt(shadowParts[2]),
            color: shadowParts[3],
        })
    }
    );

    return shadows;
}

Leave a comment