Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
f1cf5fed
T
three.js
项目概览
Ablesons
/
three.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
three.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f1cf5fed
编写于
7月 23, 2015
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #6898 from dubejf/rgba-parse
Color3: CSS colors parsing for rgba, hsl, hsla
上级
9c490512
559737ed
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
149 addition
and
30 deletion
+149
-30
src/math/Color.js
src/math/Color.js
+71
-27
test/unit/math/Color.js
test/unit/math/Color.js
+78
-3
未找到文件。
src/math/Color.js
浏览文件 @
f1cf5fed
...
...
@@ -105,68 +105,112 @@ THREE.Color.prototype = {
setStyle
:
function
(
style
)
{
// rgb(255,0,0)
var
m
;
if
(
/^rgb
\((\d
+
)
,
?(\d
+
)
,
?(\d
+
)\)
$/i
.
test
(
style
)
)
{
// rgb / hsl
if
(
m
=
/^
((?:
rgb|hsl
)
a
?)\(\s
*
([^\)]
*
)\)
/
.
exec
(
style
)
)
{
var
color
=
/^rgb
\((\d
+
)
,
?(\d
+
)
,
?(\d
+
)\)
$/i
.
exec
(
style
);
var
color
;
var
name
=
m
[
1
];
var
components
=
m
[
2
];
this
.
r
=
Math
.
min
(
255
,
parseInt
(
color
[
1
],
10
)
)
/
255
;
this
.
g
=
Math
.
min
(
255
,
parseInt
(
color
[
2
],
10
)
)
/
255
;
this
.
b
=
Math
.
min
(
255
,
parseInt
(
color
[
3
],
10
)
)
/
255
;
switch
(
name
)
{
return
this
;
case
'
rgb
'
:
case
'
rgba
'
:
}
if
(
color
=
/^
(\d
+
)\s
*,
\s
*
(\d
+
)\s
*,
\s
*
(\d
+
)
/
.
exec
(
components
)
)
{
// rgb(100%,0%,0%)
// rgb(255,0,0)
this
.
r
=
Math
.
min
(
255
,
parseInt
(
color
[
1
],
10
)
)
/
255
;
this
.
g
=
Math
.
min
(
255
,
parseInt
(
color
[
2
],
10
)
)
/
255
;
this
.
b
=
Math
.
min
(
255
,
parseInt
(
color
[
3
],
10
)
)
/
255
;
if
(
/^rgb
\((\d
+
)\%
,
?(\d
+
)\%
,
?(\d
+
)\%\)
$/i
.
test
(
style
)
)
{
return
this
;
var
color
=
/^rgb
\((\d
+
)\%
,
?(\d
+
)\%
,
?(\d
+
)\%\)
$/i
.
exec
(
style
);
}
this
.
r
=
Math
.
min
(
100
,
parseInt
(
color
[
1
],
10
)
)
/
100
;
this
.
g
=
Math
.
min
(
100
,
parseInt
(
color
[
2
],
10
)
)
/
100
;
this
.
b
=
Math
.
min
(
100
,
parseInt
(
color
[
3
],
10
)
)
/
100
;
if
(
color
=
/^
(\d
+
)\%\s
*,
\s
*
(\d
+
)\%\s
*,
\s
*
(\d
+
)\%
/
.
exec
(
components
)
)
{
return
this
;
// rgb(100%,0%,0%)
this
.
r
=
Math
.
min
(
100
,
parseInt
(
color
[
1
],
10
)
)
/
100
;
this
.
g
=
Math
.
min
(
100
,
parseInt
(
color
[
2
],
10
)
)
/
100
;
this
.
b
=
Math
.
min
(
100
,
parseInt
(
color
[
3
],
10
)
)
/
100
;
}
return
this
;
}
// #ff0000
break
;
if
(
/^
\#([
0-9a-f
]{6})
$/i
.
test
(
style
)
)
{
case
'
hsl
'
:
case
'
hsla
'
:
var
color
=
/^
\#([
0-9a-f
]{6})
$/i
.
exec
(
style
);
if
(
color
=
/^
([
0-9
]
*
\.?[
0-9
]
+
)\s
*,
\s
*
(\d
+
)\%\s
*,
\s
*
(\d
+
)\%
/
.
exec
(
components
)
)
{
this
.
setHex
(
parseInt
(
color
[
1
],
16
)
);
// hsl(120,50%,50%)
var
h
=
parseFloat
(
color
[
1
],
10
);
var
s
=
parseInt
(
color
[
2
],
10
)
/
100
;
var
l
=
parseInt
(
color
[
3
],
10
)
/
100
;
return
this
.
setHSL
(
h
,
s
,
l
);
}
break
;
}
// unknown color
return
this
;
}
// #f00
// hex
if
(
m
=
/^
\#([
A-Fa-f0-9
]
+
)
$/
.
exec
(
style
)
)
{
if
(
/^
\#([
0-9a-f
])([
0-9a-f
])([
0-9a-f
])
$/i
.
test
(
style
)
)
{
var
hex
=
m
[
1
];
var
size
=
hex
.
length
;
var
color
=
/^
\#([
0-9a-f
])([
0-9a-f
])([
0-9a-f
])
$/i
.
exec
(
style
);
if
(
size
===
3
)
{
this
.
setHex
(
parseInt
(
color
[
1
]
+
color
[
1
]
+
color
[
2
]
+
color
[
2
]
+
color
[
3
]
+
color
[
3
],
16
)
);
// # ff0
this
.
r
=
parseInt
(
hex
.
charAt
(
0
)
+
hex
.
charAt
(
0
),
16
)
/
255
;
this
.
g
=
parseInt
(
hex
.
charAt
(
1
)
+
hex
.
charAt
(
1
),
16
)
/
255
;
this
.
b
=
parseInt
(
hex
.
charAt
(
2
)
+
hex
.
charAt
(
2
),
16
)
/
255
;
return
this
;
}
if
(
size
===
6
)
{
// #fa11ac
this
.
r
=
parseInt
(
hex
.
charAt
(
0
)
+
hex
.
charAt
(
1
),
16
)
/
255
;
this
.
g
=
parseInt
(
hex
.
charAt
(
2
)
+
hex
.
charAt
(
3
),
16
)
/
255
;
this
.
b
=
parseInt
(
hex
.
charAt
(
4
)
+
hex
.
charAt
(
5
),
16
)
/
255
;
return
this
;
}
// unknown color
return
this
;
}
// red
if
(
/^
(\w
+
)
$/i
.
test
(
style
)
)
{
// color keywords
if
(
/^
\w
+$/i
.
test
(
style
)
)
{
// red
this
.
setHex
(
THREE
.
ColorKeywords
[
style
]
);
return
this
;
}
// unknown color
return
this
;
},
...
...
test/unit/math/Color.js
浏览文件 @
f1cf5fed
...
...
@@ -118,9 +118,25 @@ test( "setStyleRGBRed", function(){
ok
(
c
.
b
===
0
,
"
Blue:
"
+
c
.
b
);
});
test
(
"
setStyleRGBARed
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
rgba(255,0,0,0.5)
'
);
ok
(
c
.
r
==
1
,
"
Red:
"
+
c
.
r
);
ok
(
c
.
g
===
0
,
"
Green:
"
+
c
.
g
);
ok
(
c
.
b
===
0
,
"
Blue:
"
+
c
.
b
);
});
test
(
"
setStyleRGBRedWithSpaces
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
rgb(255, 0, 0)
'
);
c
.
setStyle
(
'
rgb( 255 , 0, 0 )
'
);
ok
(
c
.
r
==
1
,
"
Red:
"
+
c
.
r
);
ok
(
c
.
g
===
0
,
"
Green:
"
+
c
.
g
);
ok
(
c
.
b
===
0
,
"
Blue:
"
+
c
.
b
);
});
test
(
"
setStyleRGBARedWithSpaces
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
rgba( 255, 0, 0 , 1 )
'
);
ok
(
c
.
r
==
1
,
"
Red:
"
+
c
.
r
);
ok
(
c
.
g
===
0
,
"
Green:
"
+
c
.
g
);
ok
(
c
.
b
===
0
,
"
Blue:
"
+
c
.
b
);
...
...
@@ -134,33 +150,92 @@ test( "setStyleRGBPercent", function(){
ok
(
c
.
b
==
0.1
,
"
Blue:
"
+
c
.
b
);
});
test
(
"
setStyleRGBAPercent
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
rgba(100%,50%,10%, 0.5)
'
);
ok
(
c
.
r
==
1
,
"
Red:
"
+
c
.
r
);
ok
(
c
.
g
==
0.5
,
"
Green:
"
+
c
.
g
);
ok
(
c
.
b
==
0.1
,
"
Blue:
"
+
c
.
b
);
});
test
(
"
setStyleRGBPercentWithSpaces
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
rgb(100%,50%,10%)
'
);
c
.
setStyle
(
'
rgb( 100% ,50% , 10% )
'
);
ok
(
c
.
r
==
1
,
"
Red:
"
+
c
.
r
);
ok
(
c
.
g
==
0.5
,
"
Green:
"
+
c
.
g
);
ok
(
c
.
b
==
0.1
,
"
Blue:
"
+
c
.
b
);
});
test
(
"
setStyleRGBAPercentWithSpaces
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
rgba( 100% ,50% , 10%, 0.5 )
'
);
ok
(
c
.
r
==
1
,
"
Red:
"
+
c
.
r
);
ok
(
c
.
g
==
0.5
,
"
Green:
"
+
c
.
g
);
ok
(
c
.
b
==
0.1
,
"
Blue:
"
+
c
.
b
);
});
test
(
"
setStyleHSLRed
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
hsl(360,100%,50%)
'
);
ok
(
c
.
r
==
1
,
"
Red:
"
+
c
.
r
);
ok
(
c
.
g
===
0
,
"
Green:
"
+
c
.
g
);
ok
(
c
.
b
===
0
,
"
Blue:
"
+
c
.
b
);
});
test
(
"
setStyleHSLARed
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
hsla(360,100%,50%,0.5)
'
);
ok
(
c
.
r
==
1
,
"
Red:
"
+
c
.
r
);
ok
(
c
.
g
===
0
,
"
Green:
"
+
c
.
g
);
ok
(
c
.
b
===
0
,
"
Blue:
"
+
c
.
b
);
});
test
(
"
setStyleHSLRedWithSpaces
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
hsl(360, 100% , 50% )
'
);
ok
(
c
.
r
==
1
,
"
Red:
"
+
c
.
r
);
ok
(
c
.
g
===
0
,
"
Green:
"
+
c
.
g
);
ok
(
c
.
b
===
0
,
"
Blue:
"
+
c
.
b
);
});
test
(
"
setStyleHSLARedWithSpaces
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
hsla( 360, 100% , 50%, 0.5 )
'
);
ok
(
c
.
r
==
1
,
"
Red:
"
+
c
.
r
);
ok
(
c
.
g
===
0
,
"
Green:
"
+
c
.
g
);
ok
(
c
.
b
===
0
,
"
Blue:
"
+
c
.
b
);
});
test
(
"
setStyleHexSkyBlue
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
#87CEEB
'
);
ok
(
c
.
getHex
()
==
0x87CEEB
,
"
Hex c:
"
+
c
.
getHex
());
});
test
(
"
setStyleHexSkyBlueMixed
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
#87cEeB
'
);
ok
(
c
.
getHex
()
==
0x87CEEB
,
"
Hex c:
"
+
c
.
getHex
());
});
test
(
"
setStyleHex2Olive
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
#F00
'
);
ok
(
c
.
getHex
()
==
0xFF0000
,
"
Hex c:
"
+
c
.
getHex
());
});
test
(
"
setStyleHex2OliveMixed
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
#f00
'
);
ok
(
c
.
getHex
()
==
0xFF0000
,
"
Hex c:
"
+
c
.
getHex
());
});
test
(
"
setStyleColorName
"
,
function
(){
var
c
=
new
THREE
.
Color
();
c
.
setStyle
(
'
powderblue
'
);
ok
(
c
.
getHex
()
==
0xB0E0E6
,
"
Hex c:
"
+
c
.
getHex
());
});
test
(
"
getHex
"
,
function
(){
var
c
=
new
THREE
.
Color
(
'
red
'
);
var
res
=
c
.
getHex
();
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录