SColor.ts 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. /*
  2. * *********************************************************************************************************************
  3. *
  4. * !!
  5. * .F88X
  6. * X8888Y
  7. * .}888888N;
  8. * i888888N; .:! .I$WI:
  9. * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
  10. * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I
  11. * +888888N; .8888888Y "&&8Y.}8,
  12. * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i
  13. * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$*
  14. * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I
  15. * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
  16. * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
  17. * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I
  18. * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/
  19. * .:R888888I
  20. * .&888888I Copyright (c) 2009-2020. 博锐尚格科技股份有限公司
  21. * ~8888'
  22. * .!88~ All rights reserved.
  23. *
  24. * *********************************************************************************************************************
  25. */
  26. import { SStringUtil } from "@persagy-web/base";
  27. /**
  28. * 颜色类
  29. *
  30. * @author 庞利祥(sybotan@126.com)
  31. */
  32. export class SColor {
  33. static readonly Transparent = new SColor("#00000000");
  34. static readonly Black = new SColor("#000000");
  35. static readonly DarkBlue = new SColor("#000080");
  36. static readonly Blue = new SColor("#0000FF");
  37. static readonly DarkGreen = new SColor("#008000");
  38. static readonly Green = new SColor("#00FF00");
  39. static readonly DarkCyan = new SColor("#008080");
  40. static readonly Cyan = new SColor("#00FFFF");
  41. static readonly DarkRed = new SColor("#800000");
  42. static readonly Red = new SColor("#FF0000");
  43. static readonly DarkMagenta = new SColor("#800080");
  44. static readonly Magenta = new SColor("#FF00FF");
  45. static readonly DarkYellow = new SColor("#808000");
  46. static readonly Yellow = new SColor("#FFFF00");
  47. static readonly White = new SColor("#FFFFFF");
  48. static readonly DarkGray = new SColor("#808080");
  49. static readonly Gray = new SColor("#A0A0A0");
  50. static readonly LightGray = new SColor("#C0C0C0");
  51. /**
  52. * 根据rgb分量生成颜色
  53. *
  54. * @param r 红色分量
  55. * @param g 绿色分量
  56. * @param b 蓝色分量
  57. * @return 颜色
  58. */
  59. static rgb(r: number, g: number, b: number): SColor {
  60. return new SColor(r, g, b);
  61. }
  62. /**
  63. * 根据rgba分量生成颜色
  64. *
  65. * @param r 红色分量
  66. * @param g 绿色分量
  67. * @param b 蓝色分量
  68. * @param a 透明度分量
  69. * @return 颜色
  70. */
  71. static rgba(r: number, g: number, b: number, a: number): SColor {
  72. return new SColor(r, g, b, a);
  73. } // Function rgb()
  74. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  75. // 属性定义
  76. /** 红色分量 */
  77. get red(): number {
  78. return (this._value >> 24) & 0xff;
  79. }
  80. set red(v: number) {
  81. const r = (Math.floor(v) & 0xff) << 24;
  82. this._value = (this._value & 0x00ffffff) | r;
  83. }
  84. /** 绿色分量 */
  85. get green(): number {
  86. return (this._value >> 16) & 0xff;
  87. }
  88. set green(v: number) {
  89. const r = (Math.floor(v) & 0xff) << 16;
  90. this._value = (this._value & 0xff00ffff) | r;
  91. }
  92. /** 蓝色分量 */
  93. get blue(): number {
  94. return (this._value >> 8) & 0xff;
  95. }
  96. set blue(v: number) {
  97. const r = (Math.floor(v) & 0xff) << 8;
  98. this._value = (this._value & 0xffff00ff) | r;
  99. }
  100. /** 透明度 */
  101. get alpha(): number {
  102. return this._value & 0xff;
  103. }
  104. set alpha(v: number) {
  105. const r = Math.floor(v) & 0xff;
  106. this._value = (this._value & 0xffffff00) | r;
  107. }
  108. /** 颜色 */
  109. private _value = 0xff;
  110. get value(): string {
  111. return "#" + SStringUtil.num2Hex(this._value, 8);
  112. }
  113. set value(v: string) {
  114. if (v.substr(0, 1) != "#") {
  115. return;
  116. }
  117. // 先去“#”,再转换16进制数
  118. this._value = parseInt(v.substr(1), 16);
  119. // 如果未写alpha值,则左移8位+0xff;
  120. if (v.length == 7) {
  121. this._value = (this._value << 8) + 0xff;
  122. }
  123. }
  124. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  125. // 构造函数
  126. /**
  127. * 构造函数
  128. */
  129. constructor();
  130. /**
  131. * 构造函数
  132. *
  133. * @param r 红色分量
  134. * @param g 绿色分量
  135. * @param b 蓝色分量
  136. */
  137. constructor(r: number, g: number, b: number);
  138. /**
  139. * 构造函数
  140. *
  141. * @param r 红色分量
  142. * @param g 绿色分量
  143. * @param b 蓝色分量
  144. * @param a 透明度分量
  145. */
  146. constructor(r: number, g: number, b: number, a: number);
  147. /**
  148. * 构造函数
  149. *
  150. * @param color 颜色
  151. */
  152. constructor(color: string);
  153. /**
  154. * 构造函数
  155. *
  156. * @param color 颜色
  157. */
  158. constructor(color: SColor);
  159. /**
  160. * 构造函数(重载实现)
  161. *
  162. * @param r 红色分量 | 字符串描述颜色 | 颜色
  163. * @param g 绿色分量
  164. * @param b 蓝色分量
  165. * @param a 透明度分量
  166. */
  167. constructor(
  168. r?: number | string | SColor,
  169. g?: number,
  170. b?: number,
  171. a?: number
  172. ) {
  173. if (r == undefined) {
  174. this._value = 0xff;
  175. } else if (typeof r == "string") {
  176. this.value = r;
  177. } else if (r instanceof SColor) {
  178. this._value = r._value;
  179. } else if (a == undefined) {
  180. this.setRgb(r as number, g as number, b as number);
  181. } else {
  182. this.setRgba(r as number, g as number, b as number, a as number);
  183. }
  184. }
  185. /**
  186. * 设置颜色
  187. *
  188. * @param r 红色分量
  189. * @param g 绿色分量
  190. * @param b 蓝色分量
  191. */
  192. private setRgb(r: number, g: number, b: number): void {
  193. this._value =
  194. ((r as number) << 24) +
  195. ((g as number) << 16) +
  196. ((b as number) << 8) +
  197. 0xff;
  198. }
  199. /**
  200. * 设置颜色
  201. *
  202. * @param r 红色分量
  203. * @param g 绿色分量
  204. * @param b 蓝色分量
  205. * @param a 透明度分量
  206. */
  207. private setRgba(r: number, g: number, b: number, a: number): void {
  208. this._value =
  209. ((r as number) << 24) +
  210. ((g as number) << 16) +
  211. ((b as number) << 8) +
  212. (a as number);
  213. }
  214. // /**
  215. // * 设置颜色
  216. // *
  217. // * @param str 颜色字符串
  218. // */
  219. // private setColor(str: string): void {
  220. // if (str.substr(0, 1) != "#") {
  221. // return;
  222. // }
  223. //
  224. // // 先去“#”,再转换16进制数
  225. // this._value = parseInt(str.substr(1), 16);
  226. // // 如果未写alpha值,则左移8位+0xff;
  227. // if (str.length == 7) {
  228. // this._value = (this._value << 8) + 0xff;
  229. // }
  230. // }
  231. /**
  232. * 颜色转rgb
  233. *
  234. * */
  235. toRgb(): string {
  236. return `rgb(${this.red}, ${this.green}, ${this.blue})`;
  237. } // Function toRgb()
  238. /**
  239. * 颜色转rgba
  240. *
  241. * */
  242. toRgba(): string {
  243. return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha /
  244. 255.0})`;
  245. } // Function toRgb()
  246. /**
  247. * 颜色转6位16进制
  248. *
  249. * */
  250. toVal(): string {
  251. return "#" + SStringUtil.num2Hex(this._value, 6);
  252. } // Function toRgb()
  253. } // Class SColor