Wijmoは、RGB、HSBまたはHSL値を使用して特定の色を作成するためのColorクラスを持っています。interpolateメソッドを使って2色を組み合わせることも補間することもできます。このサンプルは、アニメーションを使用した補間動作を示します。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create color pickers let clrStart = new input.InputColor('#clrStart', { value: 'purple', valueChanged: interpolate }); let clrEnd = new input.InputColor('#clrEnd', { value: 'red', valueChanged: interpolate }); interpolate(); // // interpolate colors let animInt; function interpolate() { // remove old gradient let tr = document.querySelector('#theColorRow'); while (tr.hasChildNodes()) { tr.removeChild(tr.lastChild); } // // calculate new gradient let c1 = new wijmo.Color(clrStart.value), c2 = new wijmo.Color(clrEnd.value); // for (let i = 0, cnt = 80; i < cnt; i++) { let td = document.createElement('td'); td.innerHTML = '&nbsp;'; td.style.background = wijmo.Color.interpolate(c1, c2, i / cnt).toString(); tr.appendChild(td); } // // animate the color let theColor = document.querySelector('#theColor'); clearInterval(animInt); animInt = wijmo.animate((pct) => { theColor.style.background = wijmo.Color.interpolate(c1, c2, pct).toString(); }, 2000); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Color</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div> <div id="clrStart"></div> <div id="clrEnd"></div> </div> <table> <tr id="theColorRow"></tr> </table> <div id="theColor"> </div> </div> </body> </html> .wj-control { margin-bottom: 12px; } table { width: 100%; } #theColor { width: 150px; height: 150px; margin: 12px auto; border: 2px solid black; background-color: grey; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; // import { Component, enableProdMode, NgModule, ChangeDetectionStrategy } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html', changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { private _interval: number = null; gradient: wijmo.Color[] = []; // interpolate(start: string, end: string) { let c1 = new wijmo.Color(start), c2 = new wijmo.Color(end); // // calculate new gradient this.gradient = []; for (let i = 0, cnt = 80; i < cnt; i++) { this.gradient.push(wijmo.Color.interpolate(c1, c2, i / cnt)); } // // animate the color let theColor = <HTMLElement>document.querySelector('#theColor'); clearInterval(this._interval); this._interval = wijmo.animate((pct: number) => { theColor.style.background = wijmo.Color.interpolate(c1, c2, pct).toString(); }, 2000); } } // @NgModule({ imports: [WjInputModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Color</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div> <wj-input-color #clrStart [value]="'purple'" (valueChanged)="interpolate(clrStart.value, clrEnd.value)"></wj-input-color> <wj-input-color #clrEnd [value]="'red'" (valueChanged)="interpolate(clrStart.value, clrEnd.value)"></wj-input-color> </div> <table> <tr> <td *ngFor="let color of gradient" [style.background-color]=color>&nbsp;</td> </tr> </table> <div id="theColor"> </div> </div> .wj-control { margin-bottom: 12px; } table { width: 100%; } #theColor { width: 150px; height: 150px; margin: 12px auto; border: 2px solid black; background-color: grey; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { Color, animate } from '@grapecity/wijmo'; import { InputColor } from '@grapecity/wijmo.react.input'; class App extends React.Component { constructor(props) { super(props); // update color gradient and start color animation this.interpolate = () => { let c1 = new Color(this.state.clrStart), c2 = new Color(this.state.clrEnd); // calculate new gradient let temp = []; for (let i = 0, cnt = 80; i < cnt; i++) { temp.push(Color.interpolate(c1, c2, i / cnt)); } this.setState({ gradient: temp }); // animate the color let theColor = document.querySelector("#theColor"); clearInterval(this.state.interval); this.setState({ interval: animate((pct) => { theColor.style.background = Color.interpolate(c1, c2, pct).toString(); }, 2000) }); }; this.state = { interval: null, gradient: [], clrStart: 'purple', clrEnd: 'red' }; } // update color start/end setColor(value, start) { if (start) { this.setState({ clrStart: value }); } else { this.setState({ clrEnd: value }); } this.interpolate(); } // perform initial color animation componentDidMount() { this.interpolate(); } render() { return <div className="container-fluid"> <div> <InputColor value={this.state.clrStart} valueChanged={s => this.setColor(s.value, true)}/> <InputColor value={this.state.clrEnd} valueChanged={s => this.setColor(s.value, false)}/> </div> <table> <tr> {this.state.gradient.map((color, index) => { return <td style={{ backgroundColor: color }} key={index}>&nbsp;</td>; })} </tr> </table> <div id="theColor"></div> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-control { margin-bottom: 12px; } table { width: 100%; } #theColor { width: 150px; height: 150px; margin: 12px auto; border: 2px solid black; background-color: grey; } <template> <div class="container-fluid"> <div> <wj-input-color :value="clrStart" :value-changed="startColorChanged" ></wj-input-color> <wj-input-color :value="clrEnd" :value-changed="endColorChanged" ></wj-input-color> </div> <table> <tr> <td v-for="(color,index) in gradient" v-bind:style="{backgroundColor:color}" v-bind:key="index" >&nbsp;</td> </tr> </table> <div id="theColor"></div> </div> </template> <script> import "bootstrap.css"; import "@grapecity/wijmo.styles/wijmo.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.input"; import {Color, animate} from "@grapecity/wijmo"; let App = Vue.extend({ name: "app", data: function() { return { clrStart: 'red', clrEnd: 'purple', gradient: [], interval: null }; }, methods: { startColorChanged: function(s, e) { this.clrStart = s.value; this.interpolate(); }, endColorChanged: function(s, e) { this.clrEnd = s.value; this.interpolate(); }, interpolate: function() { var c1 = new wijmo.Color(this.clrStart), c2 = new wijmo.Color(this.clrEnd); // calculate new gradient this.gradient = []; for (let i = 0, cnt = 80; i < cnt; i++) { this.gradient.push(Color.interpolate(c1, c2, i / cnt)); } // animate the color clearInterval(this.interval); let theColor = document.querySelector("#theColor"); this.interval = animate(pct => { theColor.style.background = Color.interpolate(c1, c2, pct).toString(); }, 2000); } }, mounted: function() { this.interpolate(); } }); var vm = new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .container-fluid .wj-control { margin-bottom: 12px; } table { width: 100%; } #theColor { width: 150px; height: 150px; margin: 12px auto; border: 2px solid black; background-color: grey; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Color</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html>