Angular.js实现的图标调色器

可以调节彩色圆点的数量和光照。选中图标周围的圆形单选框，将可以改变图标背景色。

angular, icon

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2500
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function($angular, _) {
    'use strict';

var randomHex = function() {
        var hex = '#';
        var _hexChars = '0123456789abcdef';
        for (var i = 0; i < 6; i++) {
            hex += _hexChars.charAt(Math.floor(Math.random() * _hexChars.length));
        }
        return hex;
    };

// color sort found:
    // http://jsfiddle.net/shanfan/ojgp5718/
    var Color = function Color(hexVal) { //define a Color class for the color objects
        this.hex = hexVal;
    };
    var constructColor = function(colorObj) {
        var hex = colorObj.hex.substring(1);
        /* Get the RGB values to calculate the Hue. */
        var r = parseInt(hex.substring(0, 2), 16) / 255;
        var g = parseInt(hex.substring(2, 4), 16) / 255;
        var b = parseInt(hex.substring(4, 6), 16) / 255;

/* Getting the Max and Min values for Chroma. */
        var max = Math.max.apply(Math, [r, g, b]);
        var min = Math.min.apply(Math, [r, g, b]);

/* Variables for HSV value of hex color. */
        var chr = max - min;
        var hue = 0;
        var val = max;
        var sat = 0;

if (val > 0) {
            /* Calculate Saturation only if Value isn't 0. */
            sat = chr / val;
            if (sat > 0) {
                if (r == max) {
                    hue = 60 * (((g - min) - (b - min)) / chr);
                    if (hue < 0) {
                        hue += 360;
                    }
                } else if (g == max) {
                    hue = 120 + 60 * (((b - min) - (r - min)) / chr);
                } else if (b == max) {
                    hue = 240 + 60 * (((r - min) - (g - min)) / chr);
                }
            }
        }
        colorObj.chroma = chr;
        colorObj.hue = hue;
        colorObj.sat = sat;
        colorObj.val = val;
        colorObj.luma = 0.3 * r + 0.59 * g + 0.11 * b;
        colorObj.red = parseInt(hex.substring(0, 2), 16);
        colorObj.green = parseInt(hex.substring(2, 4), 16);
        colorObj.blue = parseInt(hex.substring(4, 6), 16);
        return colorObj;
    };
    var sortColorsBy = function(colors, prop) {
        return colors.sort(function(a, b) {
            return a[prop] - b[prop];
        });
    };

$angular
        .module('app', [])
        .controller('appController', ['$scope', '$document', function($scope, $document) {

$scope.setLumaRange = function() {
                $scope.lumaMin = Math.round((parseFloat($scope.luma) - 0.09) * 100) / 100;
                $scope.lumaMax = Math.round((parseFloat($scope.luma) + 0.09) * 100) / 100;
                $scope.buildPalette();
            };

$scope.applyNum = function() {
                $scope.buildPalette($scope.colors);
            };

$scope.newPalette = function() {
                var current = _.find($scope.colors, function(c) {
                    return c.hex === $scope.model.color;
                });
                var colors = current ? [current] : [];
                $scope.buildPalette(colors);
            };

$scope.rotateColor = function(index, invert) {
                var degrees = 360 / $scope.colors.length * index;
                var sign = invert ? '-' : '';
                return {
                    transform: 'translate(-50%, 0%) rotate(' + sign + degrees + 'deg)'
                };
            };

$scope.buildPalette = function(colors) {
                colors = colors || [];
                if (colors.length > $scope.num) {
                    while (colors.length > $scope.num) {
                        var cut = _.random(0, colors.length - 1);
                        var notCut = _.findIndex(colors, function(c) {
                            return c.hex === $scope.model.color;
                        });
                        if (cut === notCut) {
                            cut = notCut === 0 ? cut + 1 : cut - 1;
                        }
                        colors.splice(cut, 1);
                    }
                } else {
                    while (colors.length < $scope.num) {
                        var hex = randomHex();
                        var color = new Color(hex);
                        constructColor(color);
                        if (color.luma > $scope.lumaMin && color.luma <= $scope.lumaMax) {
                            colors.push(color);
                        }
                        colors = _.uniq(colors);
                    };
                }
                $scope.colors = sortColorsBy(colors, 'hue');
            };

// init
            var init = function() {
                $scope.model = {
                    icon: 'leaf',
                    color: '',
                    name: ''
                };

$scope.luma = 0.5;
                $scope.num = 12;

$scope.setLumaRange();
            };

init();

}]);

})(window.angular, window._);

编译

CSS

.element {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 1em;
    height: 1em;
    font-size: 45vmin;
    background: #343436;
    color: #fff;
    border-radius: 1em;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-transition: background .3s ease-out;
    transition: background .3s ease-out;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.element > * {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.element .icon {
    font-size: .3em;
    top: 37.5%;
}
.element input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    top: 62.5%;
    width: 80%;
    padding: .1em 0;
    font-size: .15em;
    text-align: center;
    outline: none;
    color: inherit;
}
.element input:focus {
    border-color: currentColor;
}
.element input::-webkit-input-placeholder {
    color: #fff;
    opacity: .5;
}
.element input::-moz-placeholder {
    color: #fff;
    opacity: .5;
}
.element input:-ms-input-placeholder {
    color: #fff;
    opacity: .5;
}
.element input::placeholder {
    color: #fff;
    opacity: .5;
}
.palette {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    font-size: 65vmin;
    width: 1em;
    height: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.palette > div {
    position: absolute;
    top: 0%;
    bottom: 50%;
    width: 0;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-transition: 1s;
    transition: 1s;
}
.palette > div.current span::after {
    content: '\f00c';
    font-family: FontAwesome;
    font-size: .5em;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
}
.palette > div span {
    position: absolute;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 6vmin;
    width: 1em;
    height: 1em;
    border-radius: 1em;
}
.toolbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    font-size: .5em;
    padding: .5em 1em;
    background: #646466;
    color: #fff;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
input[type=range] {
    width: 100%;
}
html,
body {
    margin: 0;
    background: #fff;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
.wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.case {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
}

HTML

</body>

可以调节彩色圆点的数量和光照。选中图标周围的圆形单选框，将可以改变图标背景色。

angular, icon

编辑器支持Emmet

快捷键

可以调节彩色圆点的数量和光照。选中图标周围的圆形单选框，将可以改变图标背景色。

angular, icon

使用Angular.js实现自定义的Addthis社交分享插件界面和指令

使用AngularJS实现的数学加减乘除可视化计算器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：