Мне нужно изменить цвет элемента div на основе цвета другого элемента div.Найти процент цвета относительно другого цвета в agularjs
Ex.
<div style="background-color:{{color_primary}};">
В другом DIV, цвет должен быть на 70% (светлый оттенок) из color_primary
<div style="background-color:{{this color is 70% of color_primary}};">
Как я могу добиться этого? заранее спасибо.
Вы можете сделать это, применив этот процент к каждому компоненту RGB, подобно тому, как это делают помощники SASS и LESS. Итак, вы можете использовать его для изменения свойства цвета внутри вашего приложения angularjs.
В следующем примере показано использование простого API, который я создал для этой проблемы, который отображается как служба в раскрашенном модуле.
Отказ от ответственности, это просто простой модуль, демонстрирующий, как это можно сделать, это означает, что я не поймаю все ошибки и исключения, которые могут быть выброшены. Независимо от того, это прекрасный модуль, и я очень горжусь этим: {D
Использование
angular.module('myApp', ['colorized'])
.controller('myController', function ($colors) {
var $ctrl = this;
$ctrl.myLightenColor = $colors.lighten('#000000', 50); // 50% gray
});
colorized модуль плюс простой пример:
// The module
(function() {
angular.module('colorized', [])
.service('$colors', function() {
this.lighten = function(src, percent) {
var src = normalizeColor(src);
if (!percent) return src;
var srcRGB = colorAsArray(src),
// you may want to change it to keep a different
// range, for example, the range between the actual
// collor and the full white collor, it's up to you
lightFactor = (255 * percent)/100,
newRGB = {
r: limited(srcRGB.r + lightFactor, 255),
g: limited(srcRGB.g + lightFactor, 255),
b: limited(srcRGB.b + lightFactor, 255),
};
return [
padRGBDigit(newRGB.r.toString(16)),
padRGBDigit(newRGB.g.toString(16)),
padRGBDigit(newRGB.b.toString(16))
].join('');
}
function normalizeColor(color) {
if (color == undefined) color = '000000';
if (color[0] == '#') color = color.substring(1);
return color;
}
function colorAsArray(color) {
return {
r: parseInt(color.substring(0, 2), 16),
g: parseInt(color.substring(2, 4), 16),
b: parseInt(color.substring(4, 8), 16),
};
}
function limited(value, limit) {
return Math.ceil(value > limit ? limit : value);
}
function padRGBDigit(str) {
return ('00' + str).slice(-2);
}
});
})();
// my app
(function() {
angular.module('myApp', ['colorized'])
.controller('myController', function($scope, $colors) {
$scope.mySourceColor = '#000000';
$scope.myPercentage = 50;
$scope.myLightColor = function() {
return '#' + $colors.lighten($scope.mySourceColor, $scope.myPercentage);
};
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
})();<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<div ng-controller="myController">
<input type="color" ng-model="mySourceColor">
<input ng-style="{'background-color': myLightColor()}" type="range" ng-model="myPercentage" min="0" max="100">
<span>
{{ myLightColor() }}
</span>
</div>
В каком формате представлены ваши цвета? Hex/RGB/RGBA/Названный? С некоторыми типами это может быть довольно простая математика, а с другими она может быть значительно сложнее. – DBS
цвет входит в шестнадцатеричный или названный как #FFFFFF или белый – blue
С шестнадцатеричными значениями вы можете разделить его на свои компоненты ('# A1B2C3' R =' A1', G = 'B2', B =' C3 '), преобразуйте каждый из них в десятичный' parseInt (R, 16); 'затем выполните математику (число * 0.7) и выполните обратный процесс, чтобы вернуть цвет обратно. С вашими именованными цветами я боюсь, что не знаю, как вы могли это исправить. – DBS