根据字体大小动态更改文本阴影 x-y 偏移量

Question

所以我们得到了一些 vue video-edition 工具，能够添加文本并使用默认预设对其应用文本阴影效果，还允许一些自定义文本阴影，或通过自定义所选预设进行更改。用户还可以通过缩放 vdr (vue-grag-resize) 元素来更改字体大小，这就是问题开始的地方。 Drag-resize component with text

我们的阴影预设有绝对的 x-y 偏移值，当字体大小改变时，阴影偏移也应该改变，但对用户来说似乎是一样的。我们当然可以将当前的阴影效果解析为不同的阴影并更改 x-y 偏移量，但我没有发明任何好的方法来做到这一点。字体大小和偏移量似乎不是相关属性。根据字体大小更改 x-y 偏移量的最佳方法是什么？

复杂一：

text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);

简单的一个：

text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;

Answer 1

所以我没有为复杂的阴影做出最好但至少有效的实现，它现在不适用于每个阴影，但我非常接近更好的实现，如果有人感兴趣或将被卡住有这样的问题这里是一个片段：（小心，它不适用于 inset，你应该修改 parseShadowToArray，颜色也应该在 #01234500 符号中，但如果需要，请随意修改它！）

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;
}

根据字体大小动态更改文本阴影 x-y 偏移量

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

javascript

css

font-size

vue.js

text-shadow