在agularjs中查找相對於其他顏色的顏色百分比

我需要根據另一個div元素的顏色更改div元素的顏色。在agularjs中查找相對於其他顏色的顏色百分比

例。

<div style="background-color:{{color_primary}};">

在另一個DIV，顏色應該是70％的color_primary

<div style="background-color:{{this color is 70% of color_primary}};">

的（淺色），我怎樣才能實現呢？提前致謝。

來源

2016-11-10 blue

你的顏色是什麼格式？六角/ RGB /的RGBA /命名？對於某些類型，這可能是相當簡單的數學，與其他類型可能會更復雜。 – DBS

顏色以十六進制形式出現或命名爲#FFFFFF或白色 – blue

使用十六進制值，您應該能夠將其分成它的組件（'＃A1B2C3' R ='A1'，G ='B2'，B ='C3 '），將其中的每一個轉換爲十進制'parseInt（R，16）;'然後做數學運算（數字* 0.7）並且反過來進行處理以將顏色重新組合。用你命名的顏色，恐怕我不知道你怎麼能解決它。 – DBS

您可以將此百分比應用於每個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>

來源

2016-11-10 19:12:31

在agularjs中查找相對於其他顏色的顏色百分比

回答

相關問題