颜色

Color 类分析指定为CSS字符串的颜色,并将其红,绿,蓝和Alpha通道显示为读写属性.

它还提供 fromHsbfromHsl 方法,使用HSB和HSL颜色模型而不是RGB创建颜色,以及 getHsbgetHsl 方法,用于使用这些颜色模型检索颜色组件.

Color 类也有一个 interpolate 方法,通过使用HSL模型在两种颜色之间插值来创建颜色. 该方法对于使用 animate 创建颜色动画特别有用.

下面是示例效果:

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; } <template> <div class="container-fluid"> <div> <wj-input-color ref="clrStart" :value="'purple'" :value-changed="this.interpolate.bind(this)" ></wj-input-color> <wj-input-color ref="clrEnd" :value="'red'" :value-changed="this.interpolate.bind(this)" ></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 * as wijmo from "@grapecity/wijmo"; let App = Vue.extend({ name: "app", data: function() { return { _interval: null, gradient: [] }; }, methods: { interpolate: function() { var start = this.$refs.clrStart.value; var end = this.$refs.clrEnd.value; 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 = document.querySelector("#theColor"); clearInterval(this._interval); this._interval = wijmo.animate(pct => { theColor.style.background = wijmo.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> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wijmo from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.react.input'; class App extends React.Component { constructor(props) { super(props); this.interpolate = () => { let start = this.state.clrStart.value, end = this.state.clrEnd.value; let c1 = new wijmo.Color(start), c2 = new wijmo.Color(end); // // calculate new gradient this.setState({ gradient: [] }); let temp = []; for (let i = 0, cnt = 80; i < cnt; i++) { temp.push(wijmo.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: wijmo.animate((pct) => { theColor.style.background = wijmo.Color.interpolate(c1, c2, pct).toString(); }, 2000) }); }; this.initializedStartColor = (color) => { this.setState({ clrStart: color }); }; this.initializedEndColor = (color) => { this.setState({ clrEnd: color }); }; this.state = { interval: null, gradient: [], clrStart: { value: "purple" }, clrEnd: { value: "red" } }; } ; componentWillMount() { this.interpolate(); } componentDidMount() { this.interpolate(); } render() { return <div className="container-fluid"> <div> <wjInput.InputColor ref="clrStart" initialized={this.initializedStartColor} value={this.state.clrStart.value} valueChanged={this.interpolate}></wjInput.InputColor> <wjInput.InputColor ref="clrEnd" initialized={this.initializedEndColor} value={this.state.clrEnd.value} valueChanged={this.interpolate}></wjInput.InputColor> </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; }