Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
硅谷海盗
kotlin
提交
44c0baa9
K
kotlin
项目概览
硅谷海盗
/
kotlin
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
K
kotlin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
44c0baa9
编写于
5月 31, 2012
作者:
P
pTalanov
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Creatures example working with the new library
上级
0fb7032f
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
109 addition
and
88 deletion
+109
-88
js/js.translator/testFiles/webDemoCanvasExamples/cases/Creatures.kt
...slator/testFiles/webDemoCanvasExamples/cases/Creatures.kt
+109
-88
未找到文件。
js/js.translator/testFiles/webDemoCanvasExamples/cases/Creatures.kt
浏览文件 @
44c0baa9
/*
In this example strange creatures are watching the kotlin logo. You can drag'n'drop them as well as the logo.
Doubleclick to add more creatures but be careful. They may be watching you!
In this example strange creatures are watching the kotlin logo. You can drag'n'drop them as well as the logo.
Doubleclick to add more creatures but be careful. They may be watching you!
*/
package
creatures
// importing some of the API defined
import
jquery.*
import
html5.*
import
js.dom.html5.CanvasContext
import
js.jquery.*
import
js.dom.html5.CanvasGradient
import
js.dom.html5.HTMLCanvasElement
import
java.util.ArrayList
import
js.*
import
js.Math
import
js.setInterval
import
html5.getCanvas
import
html5.getKotlinLogo
import
jquery.jq
import
js.setTimeout
import
java.util.List
import
js.dom.html.window
import
js.dom.html.HTMLElement
import
js.dom.html.HTMLImageElement
fun
getImage
(
path
:
String
):
HTMLImageElement
{
val
image
=
window
.
document
.
createElement
(
"img"
)
as
HTMLImageElement
image
.
src
=
path
return
image
}
val
canvas
:
HTMLCanvasElement
get
()
{
return
window
.
document
.
getElementsByTagName
(
"canvas"
).
item
(
0
)
!!
as
HTMLCanvasElement
}
val
context
:
CanvasContext
get
()
{
return
canvas
.
getContext
(
"2d"
)
!!
}
abstract
class
Shape
()
{
abstract
fun
draw
(
state
:
CanvasState
)
abstract
fun
draw
(
state
:
CanvasState
)
// these two abstract methods defines that our shapes can be dragged
abstract
fun
contains
(
mousePos
:
Vector
)
:
Boolean
abstract
var
pos
:
Vector
abstract
fun
contains
(
mousePos
:
Vector
)
:
Boolean
abstract
var
pos
:
Vector
var
selected
:
Boolean
=
false
var
selected
:
Boolean
=
false
// a couple of helper extension methods we'll be using in the derived classes
fun
C
ontext
.
shadowed
(
shadowOffset
:
Vector
,
alpha
:
Double
,
render
:
Context
.()
->
Unit
)
{
fun
C
anvasContext
.
shadowed
(
shadowOffset
:
Vector
,
alpha
:
Double
,
render
:
Canvas
Context
.()
->
Unit
)
{
save
()
shadowColor
=
"rgba(100, 100, 100, $alpha)"
shadowBlur
=
5.0
...
...
@@ -37,7 +51,7 @@ abstract class Shape() {
restore
()
}
fun
C
ontext
.
fillPath
(
constructPath
:
Context
.()
->
Unit
)
{
fun
C
anvasContext
.
fillPath
(
constructPath
:
Canvas
Context
.()
->
Unit
)
{
beginPath
()
constructPath
()
closePath
()
...
...
@@ -47,27 +61,26 @@ abstract class Shape() {
val
Kotlin
=
Logo
(
v
(
250.0
,
75.0
))
class
Logo
(
override
var
pos
:
Vector
)
:
Shape
()
class
Logo
(
override
var
pos
:
Vector
)
:
Shape
()
{
val
relSize
:
Double
=
0.25
val
shadowOffset
=
v
(-
3.0
,
3.0
)
val
relSize
:
Double
=
0.25
val
shadowOffset
=
v
(-
3.0
,
3.0
)
val
imageSize
=
v
(
377.0
,
393.0
)
var
size
:
Vector
=
imageSize
*
relSize
var
size
:
Vector
=
imageSize
*
relSize
// get-only properties like this saves you lots of typing and are very expressive
val
position
:
Vector
get
()
=
if
(
selected
)
pos
-
shadowOffset
else
pos
val
position
:
Vector
get
()
=
if
(
selected
)
pos
-
shadowOffset
else
pos
fun
drawLogo
(
state
:
CanvasState
)
{
fun
drawLogo
(
state
:
CanvasState
)
{
size
=
imageSize
*
(
state
.
size
.
x
/
imageSize
.
x
)
*
relSize
// getKotlinLogo() is a 'magic' function here defined only for purposes of demonstration but in fact it just find an element containing the logo
state
.
context
.
drawImage
(
getImage
(
"/static/images/kotlinlogowobackground.png"
),
0
,
0
,
imageSize
.
x
.
toInt
(),
imageSize
.
y
.
toInt
(),
position
.
x
.
toInt
(),
position
.
y
.
toInt
(),
size
.
x
.
toInt
(),
size
.
y
.
toInt
())
state
.
context
.
drawImage
(
getImage
(
"http://kotlin-demo.jetbrains.com/static/images/kotlinlogowobackground.png"
),
0
,
0
,
imageSize
.
x
.
toInt
(),
imageSize
.
y
.
toInt
(),
position
.
x
.
toInt
(),
position
.
y
.
toInt
(),
size
.
x
.
toInt
(),
size
.
y
.
toInt
())
}
override
fun
draw
(
state
:
CanvasState
)
{
override
fun
draw
(
state
:
CanvasState
)
{
val
context
=
state
.
context
if
(
selected
)
{
// using helper we defined in Shape class
...
...
@@ -81,41 +94,47 @@ class Logo(override var pos : Vector) : Shape()
override
fun
contains
(
mousePos
:
Vector
):
Boolean
=
mousePos
.
isInRect
(
pos
,
size
)
val
centre
:
Vector
get
()
=
pos
+
size
*
0.5
val
centre
:
Vector
get
()
=
pos
+
size
*
0.5
}
val
gradientGenerator
=
RadialGradientGenerator
(
getContext
())
val
gradientGenerator
:
RadialGradientGenerator
?
=
null
get
()
{
if
(
$
gradientGenerator
==
null
)
{
$
gradientGenerator
=
RadialGradientGenerator
(
context
)
}
return
$
gradientGenerator
}
class
Creature
(
override
var
pos
:
Vector
,
val
state
:
CanvasState
)
:
Shape
()
{
class
Creature
(
override
var
pos
:
Vector
,
val
state
:
CanvasState
)
:
Shape
()
{
val
shadowOffset
=
v
(-
5.0
,
5.0
)
val
colorStops
=
gradientGenerator
.
getNext
()
val
shadowOffset
=
v
(-
5.0
,
5.0
)
val
colorStops
=
gradientGenerator
!!
.
getNext
()
val
relSize
=
0.05
// these properties have no backing fields and in java/javascript they could be represented as little helper functions
val
radius
:
Double
get
()
=
state
.
width
*
relSize
val
position
:
Vector
get
()
=
if
(
selected
)
pos
-
shadowOffset
else
pos
val
directionToLogo
:
Vector
get
()
=
(
Kotlin
.
centre
-
position
).
normalized
val
radius
:
Double
get
()
=
state
.
width
*
relSize
val
position
:
Vector
get
()
=
if
(
selected
)
pos
-
shadowOffset
else
pos
val
directionToLogo
:
Vector
get
()
=
(
Kotlin
.
centre
-
position
).
normalized
//notice how the infix call can make some expressions extremely expressive
override
fun
contains
(
mousePos
:
Vector
)
=
pos
distanceTo
mousePos
<
radius
override
fun
contains
(
mousePos
:
Vector
)
=
pos
distanceTo
mousePos
<
radius
// defining more nice extension functions
fun
C
ontext
.
circlePath
(
position
:
Vector
,
rad
:
Double
)
{
fun
C
anvasContext
.
circlePath
(
position
:
Vector
,
rad
:
Double
)
{
arc
(
position
.
x
,
position
.
y
,
rad
,
0.0
,
2
*
Math
.
PI
,
false
)
}
//notice we can use an extension function we just defined inside another extension function
fun
C
ontext
.
fillCircle
(
position
:
Vector
,
rad
:
Double
)
{
fun
C
anvasContext
.
fillCircle
(
position
:
Vector
,
rad
:
Double
)
{
fillPath
{
circlePath
(
position
,
rad
)
}
}
override
fun
draw
(
state
:
CanvasState
)
{
override
fun
draw
(
state
:
CanvasState
)
{
val
context
=
state
.
context
if
(!
selected
)
{
drawCreature
(
context
)
...
...
@@ -124,7 +143,7 @@ class Creature(override var pos : Vector, val state : CanvasState) : Shape() {
}
}
fun
drawCreature
(
context
:
Context
)
{
fun
drawCreature
(
context
:
Canvas
Context
)
{
context
.
fillStyle
=
getGradient
(
context
)
context
.
fillPath
{
tailPath
(
context
)
...
...
@@ -133,22 +152,22 @@ class Creature(override var pos : Vector, val state : CanvasState) : Shape() {
drawEye
(
context
)
}
fun
getGradient
(
context
:
Context
)
:
CanvasGradient
{
fun
getGradient
(
context
:
CanvasContext
)
:
CanvasGradient
{
val
gradientCentre
=
position
+
directionToLogo
*
(
radius
/
4
)
val
gradient
=
context
.
createRadialGradient
(
gradientCentre
.
x
,
gradientCentre
.
y
,
1.0
,
gradientCentre
.
x
,
gradientCentre
.
y
,
2
*
radius
)
val
gradient
=
context
.
createRadialGradient
(
gradientCentre
.
x
,
gradientCentre
.
y
,
1.0
,
gradientCentre
.
x
,
gradientCentre
.
y
,
2
*
radius
)
!!
for
(
colorStop
in
colorStops
)
{
gradient
.
addColorStop
(
colorStop
.
_1
,
colorStop
.
_2
)
}
return
gradient
}
fun
tailPath
(
context
:
Context
)
{
val
tailDirection
=
-
directionToLogo
fun
tailPath
(
context
:
Canvas
Context
)
{
val
tailDirection
=
-
directionToLogo
val
tailPos
=
position
+
tailDirection
*
radius
*
1.0
val
tailSize
=
radius
*
1.6
val
angle
=
Math
.
PI
/
6.0
val
p1
=
tailPos
+
tailDirection
.
rotatedBy
(
angle
)
*
tailSize
val
p2
=
tailPos
+
tailDirection
.
rotatedBy
(-
angle
)
*
tailSize
val
p2
=
tailPos
+
tailDirection
.
rotatedBy
(-
angle
)
*
tailSize
val
middlePoint
=
position
+
tailDirection
*
radius
*
1.0
context
.
moveTo
(
tailPos
.
x
.
toInt
(),
tailPos
.
y
.
toInt
())
context
.
lineTo
(
p1
.
x
.
toInt
(),
p1
.
y
.
toInt
())
...
...
@@ -156,7 +175,7 @@ class Creature(override var pos : Vector, val state : CanvasState) : Shape() {
context
.
lineTo
(
tailPos
.
x
.
toInt
(),
tailPos
.
y
.
toInt
())
}
fun
drawEye
(
context
:
Context
)
{
fun
drawEye
(
context
:
Canvas
Context
)
{
val
eyePos
=
directionToLogo
*
radius
*
0.6
+
position
val
eyeRadius
=
radius
/
3
val
eyeLidRadius
=
eyeRadius
/
2
...
...
@@ -166,7 +185,7 @@ class Creature(override var pos : Vector, val state : CanvasState) : Shape() {
context
.
fillCircle
(
eyePos
,
eyeLidRadius
)
}
fun
drawCreatureWithShadow
(
context
:
Context
)
{
fun
drawCreatureWithShadow
(
context
:
Canvas
Context
)
{
context
.
shadowed
(
shadowOffset
,
0.7
)
{
context
.
fillStyle
=
getGradient
(
context
)
fillPath
{
...
...
@@ -178,15 +197,15 @@ class Creature(override var pos : Vector, val state : CanvasState) : Shape() {
}
}
class
CanvasState
(
val
canvas
:
Canvas
)
{
var
width
=
canvas
.
width
.
toDouble
()
var
height
=
canvas
.
height
.
toDouble
()
val
size
:
Vector
class
CanvasState
(
val
canvas
:
HTMLCanvasElement
)
{
var
width
=
canvas
.
width
var
height
=
canvas
.
height
val
size
:
Vector
get
()
=
v
(
width
,
height
)
val
context
=
getContext
()
val
context
=
creatures
.
context
var
valid
=
false
var
shapes
=
ArrayList
<
Shape
>()
var
selection
:
Shape
?
=
null
var
selection
:
Shape
?
=
null
var
dragOff
=
Vector
()
val
interval
=
1000
/
30
...
...
@@ -231,18 +250,18 @@ class CanvasState(val canvas : Canvas) {
},
interval
)
}
fun
mousePos
(
e
:
MouseEvent
)
:
Vector
{
fun
mousePos
(
e
:
MouseEvent
)
:
Vector
{
var
offset
=
Vector
()
var
element
:
Dom
Element
?
=
canvas
var
element
:
HTML
Element
?
=
canvas
while
(
element
!=
null
)
{
val
el
:
Dom
Element
=
element
.
sure
()
val
el
:
HTML
Element
=
element
.
sure
()
offset
+=
Vector
(
el
.
offsetLeft
,
el
.
offsetTop
)
element
=
el
.
offsetParent
}
return
Vector
(
e
.
pageX
,
e
.
pageY
)
-
offset
}
fun
addShape
(
shape
:
Shape
)
{
fun
addShape
(
shape
:
Shape
)
{
shapes
.
add
(
shape
)
valid
=
false
}
...
...
@@ -267,11 +286,11 @@ class CanvasState(val canvas : Canvas) {
}
}
class
RadialGradientGenerator
(
val
context
:
Context
)
{
class
RadialGradientGenerator
(
val
context
:
Canvas
Context
)
{
val
gradients
=
ArrayList
<
Array
<
#(
Double
,
String
)
>>()
var
current
=
0
fun
newColorStops
(
vararg
colorStops
:
#
(
Double
,
String
))
{
fun
newColorStops
(
vararg
colorStops
:
#
(
Double
,
String
))
{
gradients
.
add
(
colorStops
)
}
...
...
@@ -284,47 +303,49 @@ class RadialGradientGenerator(val context : Context) {
newColorStops
(
#
(
0.0
,
"rgb(250,147,250)"
),
#
(
0.5
,
"rgb(255,80,255)"
),
#
(
1.0
,
"rgb(250,0,217)"
))
}
fun
getNext
()
:
Array
<
#(
Double
,
String
)
>
{
fun
getNext
():
Array
<
#(
Double
,
String
)
>
{
val
result
=
gradients
.
get
(
current
)
current
=
(
current
+
1
)
%
gradients
.
size
()
return
result
}
}
fun
v
(
x
:
Double
,
y
:
Double
)
=
Vector
(
x
,
y
)
fun
v
(
x
:
Double
,
y
:
Double
)
=
Vector
(
x
,
y
)
class
Vector
(
val
x
:
Double
=
0.0
,
val
y
:
Double
=
0.0
)
{
fun
plus
(
v
:
Vector
)
=
v
(
x
+
v
.
x
,
y
+
v
.
y
)
fun
minus
()
=
v
(-
x
,
-
y
)
fun
minus
(
v
:
Vector
)
=
v
(
x
-
v
.
x
,
y
-
v
.
y
)
fun
times
(
koef
:
Double
)
=
v
(
x
*
koef
,
y
*
koef
)
fun
distanceTo
(
v
:
Vector
)
=
Math
.
sqrt
((
this
-
v
).
sqr
)
fun
rotatedBy
(
theta
:
Double
)
:
Vector
{
class
Vector
(
val
x
:
Double
=
0.0
,
val
y
:
Double
=
0.0
)
{
fun
plus
(
v
:
Vector
)
=
v
(
x
+
v
.
x
,
y
+
v
.
y
)
fun
minus
()
=
v
(-
x
,
-
y
)
fun
minus
(
v
:
Vector
)
=
v
(
x
-
v
.
x
,
y
-
v
.
y
)
fun
times
(
koef
:
Double
)
=
v
(
x
*
koef
,
y
*
koef
)
fun
distanceTo
(
v
:
Vector
)
=
Math
.
sqrt
((
this
-
v
).
sqr
)
fun
rotatedBy
(
theta
:
Double
)
:
Vector
{
val
sin
=
Math
.
sin
(
theta
)
val
cos
=
Math
.
cos
(
theta
)
return
v
(
x
*
cos
-
y
*
sin
,
x
*
sin
+
y
*
cos
)
}
fun
isInRect
(
topLeft
:
Vector
,
size
:
Vector
)
=
(
x
>=
topLeft
.
x
)
&&
(
x
<=
topLeft
.
x
+
size
.
x
)
&&
fun
isInRect
(
topLeft
:
Vector
,
size
:
Vector
)
=
(
x
>=
topLeft
.
x
)
&&
(
x
<=
topLeft
.
x
+
size
.
x
)
&&
(
y
>=
topLeft
.
y
)
&&
(
y
<=
topLeft
.
y
+
size
.
y
)
val
sqr
:
Double
val
sqr
:
Double
get
()
=
x
*
x
+
y
*
y
val
normalized
:
Vector
val
normalized
:
Vector
get
()
=
this
*
(
1.0
/
Math
.
sqrt
(
sqr
))
}
fun
main
(
args
:
Array
<
String
>)
{
val
state
=
CanvasState
(
getCanvas
())
state
.
addShape
(
Kotlin
)
state
.
addShape
(
Creature
(
state
.
size
*
0.25
,
state
))
state
.
addShape
(
Creature
(
state
.
size
*
0.75
,
state
))
setTimeout
({
state
.
valid
=
false
})
fun
main
(
args
:
Array
<
String
>)
{
jq
{
val
state
=
CanvasState
(
canvas
)
state
.
addShape
(
Kotlin
)
state
.
addShape
(
Creature
(
state
.
size
*
0.25
,
state
))
state
.
addShape
(
Creature
(
state
.
size
*
0.75
,
state
))
setTimeout
({
state
.
valid
=
false
})
}
}
fun
<
T
>
List
<
T
>.
reversed
()
:
List
<
T
>
{
fun
<
T
>
List
<
T
>.
reversed
():
List
<
T
>
{
val
result
=
ArrayList
<
T
>()
var
i
=
size
()
while
(
i
>
0
)
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录