TypeScript csx.ColorHelper类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中csx.ColorHelper类的典型用法代码示例。如果您正苦于以下问题：TypeScript ColorHelper类的具体用法？TypeScript ColorHelper怎么用？TypeScript ColorHelper使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

在下文中一共展示了ColorHelper类的4个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1:

export const emphasizeLightness = (color: ColorHelper, weight: number, flipIfMax: boolean = true) => {
    const colorLightness = color.lightness();
    let weightOffset = 1;
    if (colorLightness < 0.4) {
        weightOffset = Math.abs(colorLightness - 0.5) * 20;
    }

    const weightCurved = weight * weightOffset;
    const colorDarker = color.darken(weightCurved) as ColorHelper;
    const colorLighter = color.lighten(weightCurved) as ColorHelper;

    if (isLightColor(color)) {
        if (colorLightness + weightCurved > 1 && flipIfMax) {
            return colorDarker;
        } else {
            return colorLighter;
        }
    } else {
        if (colorLightness - weightCurved > 0 && flipIfMax) {
            return colorDarker;
        } else {
            return colorLighter;
        }
    }
};

开发者ID:vanilla，项目名称:vanilla，代码行数:25，代码来源:styleHelpers.ts

示例2: Error

export const modifyColorBasedOnLightness = (color: ColorHelper, weight: number, flip: boolean = false) => {
    let output;
    if (weight > 1 || weight < 0) {
        throw new Error("mixAmount must be a value between 0 and 1 inclusively.");
    }
    const isLight = isLightColor(color);
    if ((isLight && !flip) || (!isLight && flip)) {
        output = color.darken(weight) as ColorHelper;
    } else {
        output = color.lighten(weight) as ColorHelper;
    }
    return output;
};

开发者ID:vanilla，项目名称:vanilla，代码行数:13，代码来源:styleHelpers.ts

示例3:

    const contrast = (
        baseColor: ColorHelper = globalVars.mainColors.fg,
        hasBorder: boolean = false,
        borderRadius: BorderRadiusProperty<TLength> = 0,
    ) => {
        const shadowColor = baseColor.fade(0.2);
        let border = {};

        if (hasBorder) {
            border = {
                outline: `solid 1px ${shadowColor.toString()}`,
                radius: borderRadius,
            };
        }

        return {
            boxShadow: `0 0 3px 0 ${baseColor.fade(0.3)}`,
            ...border,
        };
    };

开发者ID:vanilla，项目名称:vanilla，代码行数:20，代码来源:shadowHelpers.ts

示例4:

 const gradient = (direction: "right" | "left") => {
     return `linear-gradient(to ${direction}, ${colorOut(color.fade(0))} 0%, ${colorOut(
         color.fade(0.3),
     )} 20%, ${colorOut(color)} 90%)`;
 };

开发者ID:vanilla，项目名称:vanilla，代码行数:5，代码来源:titleBarStyles.ts

注：本文中的csx.ColorHelper类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。