Farbe Gruppierung von Array-Index, Javascript

Question

Ich habe folgende Array:

const colors = ['#54AAED', '#7BEA6B', '#f8b653', '#ff5584'] 

Was ich versuche, ist eine Funktion zu erstellen, die Farbe basierend auf Parametergruppe und Index zurückkehren würde. beispielsweise:

function groupColor(i, group) {} 

sollte die Funktion zurück:

groupColor(0, true); output <== '#54AAED' 
groupColor(1, true); output <== '#54AAED' Minus 10% RGB 

Wenn Gruppe, so Index 0 ist minues 10% Opazität, Index 2 ist #7BEA6B Index 3 ist #7BEA6B minus 10% Opazität, und so weiter ... so Far ich habe habe:

function hexToRgb(hex, opacity) { 
    return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(opacity||1).join(',') + ')'; 
} 

function generateColor({ i, group }) { 
    if (group) { 
    console.log('should group...') 
    } 
    const isEven = i % 2 === 0 

    console.log('index', hexToRgb(palette[i], 0.9)) 
    return hexToRgb(palette[i]) 
} 

Was ich dachte chec zu tun ist, k wenn Index ist ungerade, und durch Sprünge von 2 Indizes Gruppe, wenn Bool ist wahr .. Aber ich bin hier irgendwie fest ... nicht sicher, wie man nach Intervallen von 2 zu gruppieren, und sollte zunächst auf Vollfarbe, zweite Take zielen gleiche Farbe und die Deckkraft auf 0,9 ...

Verwendungsbeispiel:

const colors = ['#54AAED', '#7BEA6B', '#f8b653', '#ff5584'] 
const groupMe = ['one', 'two', 'three', 'four'] 
groupMe.map(entry => { 
return generateColor(i, true) 
}) 
// expected output 
'one' <== '#54AAED' opacity 1 
'two' <== '#54AAED' opacity 0.9 
'three' <== '#7BEA6B' opacity 1 
'four' <== '#7BEA6b' opacity 0.9 
and so on... 

Answer 1

nur prüfen, ob die Zahl sogar zum vorherigen Index gehen wird. und verwende ternär, um die Deckkraft einzustellen. Reagieren Beispiel:

const Component = React.Component 
 
const palette = ['#54AAED', '#7BEA6B', '#f8b653', '#ff5584', '#d743c4', '#76bbf1', '#95ee89', '#f9c575', '#ff9d6d', '#ff779d', '#df69d0', '#9178ec']; 
 
function hexToRgb(hex, opacity) { 
 
    return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(opacity||1).join(',') + ')'; 
 
} 
 

 
function generateColor({ i, group }) { 
 
    const isEven = i % 2 === 0 
 
    if (group) { 
 
    return hexToRgb(palette[isEven ? i : i - 1], isEven ? 1 : 0.9) 
 
    } 
 
} 
 

 
class App extends Component { 
 
    render() { 
 
    const itirations = 10; 
 
    return (
 
     <div style={{ textAlign: 'center', width: '50%', marign: '0 auto' }}> 
 
     {Array.from(Array(itirations), (_, i) => 
 
      <div style={{ width: 300, height: 10, marginTop: 10, backgroundColor: generateColor({ i, group: true }) }} />   
 
     )} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('mount') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="mount"></div>