南城仿做网站,python源码分享网站,聊城网架公司,北京网站制作多少钱提升设计与开发效率#xff1a;深入解析六大颜色处理库
前言
在现代前端开发中#xff0c;颜色处理是设计和用户体验的重要组成部分。无论是网页设计、数据可视化还是图形设计#xff0c;都需要强大的颜色处理功能来实现多样化的视觉效果。本文将探讨几种流行的JavaScript…提升设计与开发效率深入解析六大颜色处理库
前言
在现代前端开发中颜色处理是设计和用户体验的重要组成部分。无论是网页设计、数据可视化还是图形设计都需要强大的颜色处理功能来实现多样化的视觉效果。本文将探讨几种流行的JavaScript颜色处理库包括TinyColor, Chroma.js, Color.js, Culori, D3-Color以及ColorThief通过对比它们的功能、优缺点及应用场景帮助开发者选择最适合自己项目的工具。 欢迎订阅专栏JavaScript脚本宇宙 文章目录 提升设计与开发效率深入解析六大颜色处理库前言1. TinyColor一个用于颜色处理和转换的JavaScript库1.1 简介1.1.1 库的历史和背景1.1.2 主要功能概述 1.2 安装与使用1.2.1 安装方法1.2.2 基本使用示例 1.3 核心功能1.3.1 颜色格式转换1.3.2 颜色操作变暗、变亮等1.3.3 混合与对比度计算 1.4 常见应用场景1.4.1 网页设计1.4.2 数据可视化 1.5 优缺点分析1.5.1 优点1.5.2 缺点 2. Chroma.js一个用于处理颜色值的JavaScript库2.1 简介2.1.1 库的历史和背景2.1.2 主要功能概述 2.2 安装与使用2.2.1 安装方法2.2.2 基本使用示例 2.3 核心功能2.3.1 颜色格式转换2.3.2 颜色操作变暗、变亮等2.3.3 渐变生成2.3.4 调色板生成 2.4 常见应用场景2.4.1 数据可视化2.4.2 图形设计 2.5 优缺点分析2.5.1 优点2.5.2 缺点 3. Color.js简单而强大的颜色处理库3.1 简介3.1.1 库的历史和背景3.1.2 主要功能概述 3.2 安装与使用3.2.1 安装方法3.2.2 基本使用示例 3.3 核心功能3.3.1 颜色格式转换3.3.2 颜色操作变暗、变亮等 3.4 常见应用场景3.4.1 前端开发 3.5 优缺点分析3.5.1 优点3.5.2 缺点 4. Culori轻量、高性能的颜色处理库4.1 简介4.1.1 库的历史和背景4.1.2 主要功能概述 4.2 安装与使用4.2.1 安装方法4.2.2 基本使用示例 4.3 核心功能4.3.1 颜色格式转换4.3.2 颜色操作变暗、变亮等 4.4 常见应用场景4.4.1 UI设计 4.5 优缺点分析4.5.1 优点4.5.2 缺点 5. D3-ColorD3.js的颜色处理模块5.1 简介5.1.1 库的历史和背景5.1.2 主要功能概述 5.2 安装与使用5.2.1 安装方法5.2.2 基本使用示例 5.3 核心功能5.3.1 颜色格式转换5.3.2 颜色操作变暗、变亮等 5.4 常见应用场景5.4.1 数据可视化 5.5 优缺点分析5.5.1 优点5.5.2 缺点 6. ColorThief从图片中提取主色调的库6.1 简介6.1.1 库的历史和背景6.1.2 主要功能概述 6.2 安装与使用6.2.1 安装方法6.2.2 基本使用示例 6.3 核心功能6.3.1 主色调提取6.3.2 调色板生成 6.4 常见应用场景6.4.1 图像处理 6.5 优缺点分析6.5.1 优点6.5.2 缺点 总结 1. TinyColor一个用于颜色处理和转换的JavaScript库
1.1 简介
1.1.1 库的历史和背景
TinyColor 是一个轻量级但功能强大的 JavaScript 颜色处理库。它由 Brian Grinstead 创建旨在简化颜色格式转换、操作等复杂任务。由于其简单易用且高度优化的特性它被广泛应用于网页设计和数据可视化等领域。
1.1.2 主要功能概述
支持多种颜色格式Hex, RGB, HSL, HSV, 等颜色变暗、变亮、饱和度调整等操作颜色混合与对比度计算
1.2 安装与使用
1.2.1 安装方法
可以通过 npm 或者直接引入 CDN 链接来安装 TinyColor。
使用 npm 安装
npm install tinycolor2使用 CDN
script srchttps://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.2/tinycolor.min.js/script1.2.2 基本使用示例
下载安装后我们可以通过以下代码示例了解如何使用 TinyColor
// 使用 CDN 方式时确保在 HTML 文件中已经引入脚本
// (或者使用 npm 方式安装后 import 进项目)
const color tinycolor(#ff0000);
console.log(color.toRgbString()); // 输出: rgb(255, 0, 0)1.3 核心功能
1.3.1 颜色格式转换
TinyColor 支持多种颜色格式之间的转换例如 Hex 转 RGBRGB 转 HSL 等。
const colorHex tinycolor(#ff0000);
const colorRgb colorHex.toRgb();
const colorHsl colorHex.toHsl();console.log(colorRgb); // 输出: {r: 255, g: 0, b: 0, a: 1}
console.log(colorHsl); // 输出: {h: 0, s: 1, l: 0.5, a: 1}1.3.2 颜色操作变暗、变亮等
我们可以通过 TinyColor 对颜色进行变暗、变亮、饱和度调整等操作。
const color tinycolor(#ff0000);// 变暗
const darkenColor color.darken(10);
console.log(darkenColor.toString()); // 输出: #cc0000// 变亮
const lightenColor color.lighten(10);
console.log(lightenColor.toString()); // 输出: #ff3333// 增加饱和度
const saturateColor color.saturate(10);
console.log(saturateColor.toString()); // 输出: #ff00001.3.3 混合与对比度计算
TinyColor 也提供了颜色混合和对比度计算的功能。
const color1 tinycolor(#ff0000);
const color2 tinycolor(#0000ff);// 混合两种颜色
const blendedColor tinycolor.mix(color1, color2);
console.log(blendedColor.toString()); // 输出: #800080// 计算对比度
const contrastRatio tinycolor.readability(color1, color2);
console.log(contrastRatio); // 输出: 2.631.4 常见应用场景
1.4.1 网页设计
在网页设计中TinyColor 可以帮助设计师轻松地调整颜色方案从而保证视觉一致性和可读性。
function changeBackgroundColor(elementId, hexColor) {const element document.getElementById(elementId);const color tinycolor(hexColor).lighten(20);element.style.backgroundColor color.toString();
}// 示例调用
changeBackgroundColor(myDiv, #3498db);1.4.2 数据可视化
在数据可视化领域颜色的选择和调整对于图表的可读性至关重要。TinyColor 可以帮助开发者自动生成对比鲜明的颜色。
function generateChartColors(baseColorHex) {const baseColor tinycolor(baseColorHex);return [baseColor.lighten(10).toString(),baseColor.darken(10).toString(),baseColor.saturate(10).toString(),baseColor.desaturate(10).toString()];
}// 示例调用
const chartColors generateChartColors(#3498db);
console.log(chartColors); // 输出: [#5faee6, #2977b3, #3498db, #85a9c5]1.5 优缺点分析
1.5.1 优点
轻量级TinyColor 是一个小巧的库无需担心性能问题。易于使用API 简洁明了新手也能快速上手。功能全面支持多种颜色格式转换和丰富的颜色操作。
1.5.2 缺点
文档有限相比一些大型库TinyColor 的文档内容相对较少需要用户自行探索更多高级功能。社区支持有限尽管有一定的用户基础但社区讨论和第三方资源相对较少。
了解更多信息请访问 TinyColor 官网。
2. Chroma.js一个用于处理颜色值的JavaScript库
2.1 简介
2.1.1 库的历史和背景
Chroma.js 是一个用于操作和处理颜色值的轻量级 JavaScript 库。它由 Gregor Aisch 创建用于填补在处理颜色时特别是数据可视化领域内的需求空白。Chroma.js 提供了友好的 API可以轻松地进行颜色转换、操作和生成等功能。
2.1.2 主要功能概述
支持多种颜色格式RGB, HEX, HSL, 等能进行颜色转换和调整如变暗变亮可以生成渐变和调色板易于集成到各种前端项目中
Chroma.js 官网
2.2 安装与使用
2.2.1 安装方法
可以通过 npm 或直接引入 CDN 脚本来安装和使用 Chroma.js。
使用 npm 安装:
npm install chroma-js使用 CDN:
script srchttps://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js/script2.2.2 基本使用示例
以下是一个简单的示例展示如何使用 Chroma.js 来创建一个颜色对象并获取其不同格式的表示
// 使用 npm 导入
const chroma require(chroma-js);// 创建一个颜色对象
let color chroma(#FF5733);// 获取颜色的 RGB 表示
console.log(color.rgb()); // [255, 87, 51]// 获取颜色的 HSL 表示
console.log(color.hsl()); // [14.736842105263163, 1, 0.6]// 获取颜色的 HEX 表示
console.log(color.hex()); // #ff57332.3 核心功能
2.3.1 颜色格式转换
Chroma.js 支持在多种颜色格式之间进行转换包括 RGB, HEX, HSL 等
let color chroma(rgb(255, 87, 51));
console.log(color.hex()); // #ff5733
console.log(color.hsl()); // [14.736842105263163, 1, 0.6]2.3.2 颜色操作变暗、变亮等
可以方便地对颜色进行各种操作如变暗、变亮
let color chroma(#FF5733);// 变暗
let darkened color.darken(2);
console.log(darkened.hex()); // #b23c1e// 变亮
let lightened color.brighten(2);
console.log(lightened.hex()); // #ff8f662.3.3 渐变生成
Chroma.js 能够轻松生成颜色渐变
let scale chroma.scale([#fafa6e,#2A4858]).mode(lch).colors(6);
console.log(scale); // [#fafa6e, #d4e779, #a1cf7a, #68b379, #3f8779, #2a4858]2.3.4 调色板生成
可以根据特定的算法生成调色板
let palette chroma.brewer.Paired;
console.log(palette); // [#a6cee3, #1f78b4, #b2df8a, #33a02c, #fb9a99, #e31a1c, #fdbf6f, #ff7f00, #cab2d6, #6a3d9a, #ffff99, #b15928]2.4 常见应用场景
2.4.1 数据可视化
Chroma.js 经常用于数据可视化中用于动态生成颜色以增强图表的可读性和美观度。例如在地图或柱状图中使用颜色渐变来表示数据值的分布。
2.4.2 图形设计
在图形设计中Chroma.js 常用于生成调色板和快速进行颜色调整从而帮助设计师更快地完成配色工作。
2.5 优缺点分析
2.5.1 优点
易用性: API 设计简洁、直观容易上手。灵活性: 支持多种颜色格式和广泛的颜色操作。性能: 轻量级不会显著增加页面加载时间。
2.5.2 缺点
依赖性: 需要额外的 JavaScript 文件如果项目要尽可能减少依赖这可能是个问题。复杂操作: 对于非常复杂的颜色操作可能需要结合其他工具一起使用。
总之Chroma.js 是一个功能强大且易于使用的颜色处理库适用于各种前端开发场景。更多详细信息和文档请访问其官网Chroma.js 官网。
3. Color.js简单而强大的颜色处理库
3.1 简介
3.1.1 库的历史和背景
Color.js 是一个简单而强大的 JavaScript 颜色处理库最初由 Mohsen ‘Mo’ Azimi 创立。它旨在简化颜色操作使开发者能够轻松地管理和转换颜色值同时提供丰富的功能以满足前端开发的需求。
3.1.2 主要功能概述
Color.js 提供了多种强大的功能包括
颜色格式转换如 HEX、RGB 和 HSL 之间的转换颜色操作如变暗、变亮、混合等支持链式调用高度自定义和扩展性
3.2 安装与使用
3.2.1 安装方法
要安装 Color.js可以使用 npm 或 yarn
npm install color或
yarn add color详细信息请参阅 Color.js 官方文档。
3.2.2 基本使用示例
以下是一个简单的使用 Color.js 的示例
const Color require(color);// 创建一个颜色对象
let color Color(#ff0000);// 转换为 RGB
console.log(color.rgb().string()); // 输出: rgb(255, 0, 0)// 使颜色变亮
let lightenedColor color.lighten(0.5);
console.log(lightenedColor.hex()); // 输出: #ff80803.3 核心功能
3.3.1 颜色格式转换
Color.js 支持各种颜色格式之间的转换例如 HEX、RGB、HSL 等。以下是一些示例代码
const Color require(color);let color Color(#3498db);// 转换为 RGB
console.log(color.rgb().string()); // 输出: rgb(52, 152, 219)// 转换为 HSL
console.log(color.hsl().string()); // 输出: hsl(204, 70%, 53%)3.3.2 颜色操作变暗、变亮等
Color.js 允许你对颜色进行各种操作如变暗、变亮、混合等。以下示例展示了如何使颜色变暗和变亮
const Color require(color);let color Color(#3498db);// 使颜色变暗
let darkenedColor color.darken(0.3);
console.log(darkenedColor.hex()); // 输出: #2874a6// 使颜色变亮
let lightenedColor color.lighten(0.3);
console.log(lightenedColor.hex()); // 输出: #5dade23.4 常见应用场景
3.4.1 前端开发
在前端开发中Color.js 可以用于动态生成和调整颜色例如主题的颜色调整、根据用户输入调整界面颜色等。例如在 React 项目中你可以通过 Color.js 来实现主题色的动态调整
import React from react;
import Color from color;function App() {const primaryColor Color(#3498db);const secondaryColor primaryColor.darken(0.3).hex();return (div style{{ backgroundColor: secondaryColor }}h1 style{{ color: primaryColor.hex() }}Hello World/h1/div);
}export default App;3.5 优缺点分析
3.5.1 优点
简单易用: API 设计简单易于上手。功能强大: 支持多种颜色操作和转换。链式调用: 支持链式调用提高代码可读性。高性能: 运行效率高不会影响页面性能。
3.5.2 缺点
依赖较多: 如果只需简单的颜色转换可能显得过于庞大。学习成本: 对于新手理解链式调用以及各种颜色模式可能需要一定时间。
总体而言Color.js 是一个非常有用的颜色处理库适用于各种前端开发场景。如果你对颜色处理有较高的需求不妨尝试一下这个库。
4. Culori轻量、高性能的颜色处理库
4.1 简介
4.1.1 库的历史和背景
Culori 是一个现代 JavaScript 颜色处理库旨在提供高效、轻量且功能丰富的颜色处理方法。由 David Dal Busco 创建受到了许多设计师和开发者的青睐。Culori 的设计灵感来源于对颜色科学的深入研究以确保颜色处理的准确性和一致性。
4.1.2 主要功能概述
支持多种颜色格式RGB, HSL, Lab等之间的转换。颜色操作如变暗、变亮、调整透明度等。颜色混合与插值。颜色的比较与差异计算。
4.2 安装与使用
4.2.1 安装方法
可以通过 npm 或 yarn 安装 Culori
npm install culori
# 或者
yarn add culori4.2.2 基本使用示例
以下是一个简单的使用示例展示如何使用 Culori 来转换颜色格式和进行基本的颜色操作
const culori require(culori);let colorRgb culori.rgb(#ff0000); // 将 HEX 转换为 RGB
console.log(colorRgb); // { mode: rgb, r: 1, g: 0, b: 0 }let colorHex culori.formatHex({ mode: rgb, r: 1, g: 0, b: 0 });
console.log(colorHex); // #ff0000let darkerColor culori.darken(0.5, colorRgb);
console.log(darkerColor); // { mode: rgb, r: 0.5, g: 0, b: 0 }更多详细信息可以参考 Culori 官方文档
4.3 核心功能
4.3.1 颜色格式转换
Culori 提供了多种颜色格式之间的相互转换例如 Hex 到 RGB、HSL 到 Lab 等
const culori require(culori);// HEX 转换为 RGB
let colorRgb culori.rgb(#00ff00);
console.log(colorRgb); // { mode: rgb, r: 0, g: 1, b: 0 }// RGB 转换为 HSL
let colorHsl culori.hsl(colorRgb);
console.log(colorHsl); // { mode: hsl, h: 120, s: 1, l: 0.5 }更多转换方法参见 Culori 文档颜色转换部分。
4.3.2 颜色操作变暗、变亮等
Culori 提供了一些常见的颜色操作如变暗、变亮、调整透明度等
const culori require(culori);let color culori.rgb(#0000ff);// 变暗颜色
let darkerColor culori.darken(0.3, color);
console.log(darkerColor); // { mode: rgb, r: 0, g: 0, b: 0.7 }// 变亮颜色
let lighterColor culori.lighten(0.3, color);
console.log(lighterColor); // { mode: rgb, r: 0.3, g: 0.3, b: 1.0 }详细操作方法请参考 Culori 文档颜色操作部分。
4.4 常见应用场景
4.4.1 UI设计
Culori 在 UI 设计中非常有用尤其是在颜色主题的生成和管理方面
const culori require(culori);// 生成一组颜色
let baseColor culori.rgb(#ff5733);
let lighterColor culori.lighten(0.2, baseColor);
let darkerColor culori.darken(0.2, baseColor);console.log(culori.formatHex(baseColor)); // #ff5733
console.log(culori.formatHex(lighterColor)); // #ff8973
console.log(culori.formatHex(darkerColor)); // #cc45294.5 优缺点分析
4.5.1 优点
高性能处理速度快适合需要大量颜色操作的应用。轻量库的体积小减少了项目的整体负载。功能丰富支持多种颜色格式和操作满足不同需求。
4.5.2 缺点
学习曲线对于新手来说可能需要一些时间来熟悉其 API 和功能。社区资源较少相比于一些更流行的颜色处理库Culori 的社区资源和插件较少。
更多关于 Culori 的信息和更新请访问 官方文档。
5. D3-ColorD3.js的颜色处理模块
5.1 简介
5.1.1 库的历史和背景
D3-Color是D3.js数据驱动文档库中的一个独立模块专门用于颜色处理。D3.js最早由Mike Bostock在2011年发布旨在通过数据驱动的方式创建动态、交互式的数据可视化。D3-Color作为其中的一部分提供了丰富的颜色操作函数使得颜色管理变得更加简单和灵活。
5.1.2 主要功能概述
D3-Color提供了一套全面的API用于颜色格式转换、颜色计算如变亮、变暗、调整透明度等以及支持多种颜色空间RGB、HSL、Lab等。这些功能使得开发者可以轻松地在应用中进行复杂的颜色操作和变换。
5.2 安装与使用
5.2.1 安装方法
要使用D3-Color可以通过npm安装
npm install d3-color或者使用CDN引入
script srchttps://d3js.org/d3-color.v3.min.js/script5.2.2 基本使用示例
以下是一个简单的示例展示如何使用D3-Color创建和操作颜色
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleD3-Color Example/titlescript srchttps://d3js.org/d3-color.v3.min.js/script
/head
bodyscriptconst color d3.color(steelblue);console.log(color); // rgb(70, 130, 180)const brighter color.brighter(2);console.log(brighter); // rgb(140, 185, 219)const darker color.darker(2);console.log(darker); // rgb(35, 65, 90)/script
/body
/html更多详情请参考D3-Color官方文档。
5.3 核心功能
5.3.1 颜色格式转换
D3-Color支持多种颜色格式之间的转换包括但不限于RGB、HSL和Lab。
const color d3.color(hsl(120, 100%, 50%));
console.log(color.rgb()); // rgb(0, 255, 0)5.3.2 颜色操作变暗、变亮等
D3-Color提供了一些方便的方法来调整颜色的亮度和透明度。
const color d3.color(rgb(255, 0, 0));
const brighter color.brighter();
const darker color.darker();
const semiTransparent color.copy({opacity: 0.5});console.log(brighter); // rgb(255, 51, 51)
console.log(darker); // rgb(204, 0, 0)
console.log(semiTransparent); // rgba(255, 0, 0, 0.5)5.4 常见应用场景
5.4.1 数据可视化
在数据可视化中颜色是一个非常重要的元素。D3-Color的工具集允许开发者根据数据动态地调整颜色从而实现更具表现力和信息性的图表。
const scale d3.scaleLinear().domain([0, 100]).range([d3.color(red), d3.color(blue)]);console.log(scale(50)); // rgb(128, 0, 128)5.5 优缺点分析
5.5.1 优点
功能强大支持多种颜色格式和操作。易于集成可与其他D3模块无缝结合。灵活性高适用于各种颜色处理需求。
5.5.2 缺点
学习曲线对新手可能有一定的学习成本。依赖关系通常需要与其他D3模块一起使用增加了依赖项。
完整的JavaScript实例代码已经在上面的演示部分给出更多详细信息可以访问D3-Color官方文档获取。
6. ColorThief从图片中提取主色调的库
6.1 简介
6.1.1 库的历史和背景
ColorThief 是一个用 JavaScript 编写的开源库最初由 Lokesh Dhakar 开发。该库旨在从图像中提取出主要颜色用于各种各样的应用场景例如创建调色板、配色方案等。
6.1.2 主要功能概述
ColorThief 的主要功能包括
从图像中提取主色调。生成图像的调色板。
详细信息及更多内容请访问ColorThief 的 GitHub 页面
6.2 安装与使用
6.2.1 安装方法
ColorThief 可以通过 npm 安装也可以直接使用 CDN 引入。
使用 npm 安装
npm install colorthief使用 CDN
script srchttps://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.umd.js/script6.2.2 基本使用示例
以下是一个基本的示例展示如何从图像中提取主色调
!DOCTYPE html
html langen
headmeta charsetUTF-8titleColor Thief Example/title
/head
bodyimg idmyImage srcpath_to_your_image.jpg crossoriginanonymous altSample Image /script srchttps://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.umd.js/scriptscriptwindow.onload function() {const colorThief new ColorThief();const img document.getElementById(myImage);const dominantColor colorThief.getColor(img);console.log(dominantColor);};/script
/body
/html6.3 核心功能
6.3.1 主色调提取
从图像中提取主色调是 ColorThief 最核心的功能。下面是一个具体的实例代码
img idmyImage srcpath_to_your_image.jpg crossoriginanonymous altSample Image /
script srchttps://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.umd.js/script
scriptwindow.onload function() {const colorThief new ColorThief();const img document.getElementById(myImage);const dominantColor colorThief.getColor(img);console.log(dominantColor); // 输出主色调 [R, G, B]};
/script6.3.2 调色板生成
除了提取单一主色调外ColorThief 还可以生成包含多个颜色的调色板
img idmyImage srcpath_to_your_image.jpg crossoriginanonymous altSample Image /
script srchttps://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.umd.js/script
scriptwindow.onload function() {const colorThief new ColorThief();const img document.getElementById(myImage);const palette colorThief.getPalette(img, 5);console.log(palette); // 输出调色板数组 [[R, G, B], [R, G, B], ...]};
/script6.4 常见应用场景
6.4.1 图像处理
ColorThief 在图像处理领域非常有用例如自动生成配色方案、设计应用中的主题和风格、以及创作艺术作品时参考颜色等。
6.5 优缺点分析
6.5.1 优点
易于使用API 简单直观新手也容易上手。轻量级库体积小不会显著增加项目的负担。广泛支持兼容性好可以在多种环境下运行。
6.5.2 缺点
依赖跨域资源共享CORS在浏览器中使用时需要确保图像启用了 CORS。性能问题处理大型图像或大量图像时可能会遇到性能瓶颈。
更多内容和更新请访问 ColorThief 官方文档
总结
在当今多元化的前端开发环境中不同的JavaScript颜色处理库提供了丰富的功能和灵活的选择。TinyColor因其简洁高效的颜色操作和转换功能特别适合网页设计和数据可视化Chroma.js则以渐变生成和调色板创建功能见长是图形设计师的理想选择Color.js尽管简单却强大特别适合初学者和快速开发需求Culori以其轻量和高性能的特性成为追求极致性能优化的开发者的首选D3-Color模块作为D3.js的一部分在复杂数据可视化中表现出色而ColorThief则专注于从图片中提取主色调为图像处理提供了独特的解决方案。通过对比这些库的优缺点和应用场景开发者可以根据具体需求做出最佳选择从而提升项目的质量和效率。
