Calcul/RadialGradient.js - develop - aserger/cutcalcut

Calcul/RadialGradient.js
239 строк8 KB
SergeyParkhachevIP-415
create base buttons and structure + js for gradient
09 дек 2025, 19:17
09 дек 2025, 19:17e50a450
.pragma library

// RadialGradient.js
// Создает радиальные градиенты для QML компонентов

// Цветовые утилиты
function lightenColor(color, factor) {
    // color: строка "#RRGGBB" или "#AARRGGBB"
    // factor: 1.0 = без изменений, 2.0 = в 2 раза светлее
    var hex = color.replace('#', '');
    var r, g, b, a;

    if (hex.length === 8) {
        // #AARRGGBB
        a = parseInt(hex.substr(0, 2), 16);
        r = parseInt(hex.substr(2, 2), 16);
        g = parseInt(hex.substr(4, 2), 16);
        b = parseInt(hex.substr(6, 2), 16);
    } else if (hex.length === 6) {
        // #RRGGBB
        r = parseInt(hex.substr(0, 2), 16);
        g = parseInt(hex.substr(2, 2), 16);
        b = parseInt(hex.substr(4, 2), 16);
        a = 255;
    } else {
        return color;
    }

    r = Math.min(255, Math.round(r * factor));
    g = Math.min(255, Math.round(g * factor));
    b = Math.min(255, Math.round(b * factor));

    if (hex.length === 8) {
        return Qt.rgba(r/255, g/255, b/255, a/255);
    } else {
        return Qt.rgba(r/255, g/255, b/255, 1.0);
    }
}

function darkenColor(color, factor) {
    // color: строка "#RRGGBB" или "#AARRGGBB"
    // factor: 1.0 = без изменений, 0.5 = в 2 раза темнее
    return lightenColor(color, 1/factor);
}

// Основная функция для создания радиального градиента
function createRadialGradient(settings) {
    // settings: объект с настройками градиента
    // {
    //   centerColor: "#RRGGBB",
    //   edgeColor: "#RRGGBB",
    //   centerX: 0.5, // 0-1 от ширины
    //   centerY: 0.4, // 0-1 от высоты
    //   radius: 0.8   // 0-1 от меньшего размера
    // }

    return {
        // Возвращает объект, который можно использовать в QML
        getGradientStops: function(width, height) {
            var centerX = width * (settings.centerX || 0.5);
            var centerY = height * (settings.centerY || 0.4);
            var radius = Math.min(width, height) * (settings.radius || 0.8);

            // Для Canvas в QML нам нужны цветовые остановки
            var gradient = {
                type: "radial",
                centerX: centerX,
                centerY: centerY,
                radius: radius,
                stops: [
                    {position: 0.0, color: settings.centerColor},
                    {position: 0.5, color: settings.midColor || settings.centerColor},
                    {position: 1.0, color: settings.edgeColor}
                ]
            };

            return gradient;
        },

        // Создает Canvas команды для отрисовки
        createCanvasCommands: function(ctx, width, height) {
            var centerX = width * (settings.centerX || 0.5);
            var centerY = height * (settings.centerY || 0.4);
            var radius = Math.min(width, height) * (settings.radius || 0.8);

            // Создаем радиальный градиент для Canvas
            var canvasGradient = ctx.createRadialGradient(
                centerX, centerY, 0,
                centerX, centerY, radius
            );

            // Добавляем цветовые остановки
            if (settings.centerColor) {
                canvasGradient.addColorStop(0.0, settings.centerColor);
            }
            if (settings.midColor) {
                canvasGradient.addColorStop(0.5, settings.midColor);
            }
            if (settings.edgeColor) {
                canvasGradient.addColorStop(1.0, settings.edgeColor);
            }

            return canvasGradient;
        },

        // Создает QML Gradient объект (для совместимости)
        createQmlGradient: function() {
            var stops = [];

            if (settings.centerColor) {
                stops.push({position: 0.0, color: settings.centerColor});
            }
            if (settings.midColor) {
                stops.push({position: 0.5, color: settings.midColor});
            }
            if (settings.edgeColor) {
                stops.push({position: 1.0, color: settings.edgeColor});
            }

            return {
                type: "RadialGradient",
                centerX: settings.centerX || 0.5,
                centerY: settings.centerY || 0.4,
                centerRadius: settings.radius || 0.8,
                stops: stops
            };
        }
    };
}

// Предустановленные стили градиентов
var GradientPresets = {
    // Металлический эффект
    metallic: function(baseColor) {
        return createRadialGradient({
            centerColor: lightenColor(baseColor, 1.8),
            midColor: baseColor,
            edgeColor: darkenColor(baseColor, 1.4),
            centerY: 0.3,
            radius: 0.9
        });
    },

    // Стеклянный эффект
    glass: function(baseColor) {
        var light = lightenColor(baseColor, 2.0);
        var dark = darkenColor(baseColor, 1.3);

        return createRadialGradient({
            centerColor: Qt.rgba(1, 1, 1, 0.6), // Почти белый центр
            midColor: Qt.rgba(
                Qt.red(baseColor) * 0.7,
                Qt.green(baseColor) * 0.7,
                Qt.blue(baseColor) * 0.7,
                0.8
            ),
            edgeColor: dark,
            centerY: 0.25,
            radius: 0.7
        });
    },

    // Неоновое свечение
    neon: function(baseColor) {
        var bright = lightenColor(baseColor, 2.5);
        var glow = Qt.rgba(
            Qt.red(baseColor),
            Qt.green(baseColor),
            Qt.blue(baseColor),
            0.7
        );

        return createRadialGradient({
            centerColor: bright,
            midColor: baseColor,
            edgeColor: glow,
            centerY: 0.4,
            radius: 1.2
        });
    },

    // Плоский с легким объемом
    flat3d: function(baseColor) {
        return createRadialGradient({
            centerColor: lightenColor(baseColor, 1.2),
            edgeColor: darkenColor(baseColor, 1.1),
            centerY: 0.35,
            radius: 0.8
        });
    }
};

// Экспортируем API
var RadialGradientJS = {
    // Основные функции
    create: createRadialGradient,
    lighten: lightenColor,
    darken: darkenColor,

    // Предустановки
    presets: GradientPresets,

    // Утилиты
    hexToRgba: function(hex) {
        // Конвертирует "#RRGGBB" или "#AARRGGBB" в Qt.rgba()
        var hex = hex.replace('#', '');
        var r, g, b, a = 1.0;

        if (hex.length === 8) {
            a = parseInt(hex.substr(0, 2), 16) / 255;
            r = parseInt(hex.substr(2, 2), 16) / 255;
            g = parseInt(hex.substr(4, 2), 16) / 255;
            b = parseInt(hex.substr(6, 2), 16) / 255;
        } else if (hex.length === 6) {
            r = parseInt(hex.substr(0, 2), 16) / 255;
            g = parseInt(hex.substr(2, 2), 16) / 255;
            b = parseInt(hex.substr(4, 2), 16) / 255;
        } else {
            return Qt.rgba(0, 0, 0, 1);
        }

        return Qt.rgba(r, g, b, a);
    },

    rgbaToHex: function(rgbaString) {
        // Конвертирует "Qt.rgba(r,g,b,a)" в "#RRGGBB"
        var match = rgbaString.match(/Qt\.rgba\(([^,]+),\s*([^,]+),\s*([^,]+),\s*([^)]+)\)/);
        if (!match) return "#000000";

        var r = Math.round(parseFloat(match[1]) * 255);
        var g = Math.round(parseFloat(match[2]) * 255);
        var b = Math.round(parseFloat(match[3]) * 255);

        return "#" +
            r.toString(16).padStart(2, '0') +
            g.toString(16).padStart(2, '0') +
            b.toString(16).padStart(2, '0');
    }
};