-
Notifications
You must be signed in to change notification settings - Fork 4
/
demo1.js
115 lines (101 loc) · 2.43 KB
/
demo1.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
var demo1= function() {
var stage = new Kinetic.Stage({
container : "container",
width : $(document).width() - 20,
height : $(document).height() - 100,
draggable : true
});
var flowerLayer = new Kinetic.Layer();
var lineLayer = new Kinetic.Layer();
var flower = new Kinetic.Group({
x : stage.getWidth() / 2,
y : stage.getHeight() / 2
});
// build stem
var stem = new Kinetic.Line({
strokeWidth : 10,
stroke : "green",
points : [{
x : flower.getX(),
y : flower.getY()
}, {
x : stage.getWidth() / 2,
y : stage.getHeight() + 10
}]
});
// build center
var center = new Kinetic.Circle({
x : 0,
y : 0,
radius : 20,
fill : "yellow",
stroke : "black",
strokeWidth : 4
});
center.on("mousedown", function() {
document.body.style.cursor = "pointer";
});
center.on("mouseover", function() {
flower.setDraggable(true);
this.setFill("orange");
flowerLayer.draw();
});
center.on("mouseout", function() {
flower.setDraggable(false);
this.setFill("yellow");
flowerLayer.draw();
});
// build petals
var numPetals = 10;
for (var n = 0; n < numPetals; n++) {
// induce scope
( function() {
/*
* draw custom shape because KineticJS
* currently does not support tear drop
* geometries
*/
var petal = new Kinetic.Shape({
drawFunc : function() {
var context = this.getContext();
context.globalAlpha = 0.8;
context.beginPath();
context.moveTo(-5, -20);
context.bezierCurveTo(-40, -90, 40, -90, 5, -20);
context.closePath();
this.fill();
this.stroke();
},
fill : "#00dddd",
strokeWidth : 4,
draggable : true,
rotation : 2 * Math.PI * n / numPetals
});
petal.on("dragstart", function() {
this.moveToTop();
center.moveToTop();
});
petal.on("mouseover", function() {
this.setFill("blue");
flowerLayer.draw();
});
petal.on("mouseout", function() {
this.setFill("#00dddd");
flowerLayer.draw();
});
flower.add(petal);
}());
}
stage.on("mouseup", function() {
document.body.style.cursor = "default";
});
flower.on("dragmove", function() {
stem.attrs.points[0] = this.getPosition();
lineLayer.draw();
});
lineLayer.add(stem);
flower.add(center);
flowerLayer.add(flower);
stage.add(lineLayer);
stage.add(flowerLayer);
}