-
Notifications
You must be signed in to change notification settings - Fork 0
/
skeleton3.html
147 lines (121 loc) · 4.08 KB
/
skeleton3.html
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skeleton 3</title>
</head>
<body>
</body>
<script src="iio-sdk/iioEngine-1.2.1.js"></script>
<script >
var dot = function(x,y,ctx){
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(x, y, 2, 0, Math.PI*2, true);
ctx.stroke();
ctx.closePath();
}
var skeletonApp1 = function(io){
var Bone = iio.inherit(function(x,y,width,height){
this.joints = {};
this.rotation = 0; //中心旋转角度，为iio处理
this.angle = 0; //按某个点旋转角度
iio.ioRect.call(this,x,y,width,height);
//iio.ioRect.apply(this, arguments);
},iio.ioRect);
//关节的x,y是相对于骨头的pos(就是骨头的pos)
Bone.prototype.setJoint = function(name,x,y){
if(!this.joints) this.joints = {};
var obj = new iio.ioCircle(x,y,4).setStrokeStyle('green',2);
obj.x = x;
obj.y = y;
this.joints[name] = obj;
}
Bone.prototype.getJoint = function(name){
return this.joints[name];
}
Bone.prototype.getJointAbsPos = function(name){
if(this.joints[name]){
var targetJoint = this.joints[name],
fixedJoint = this.joints['fixed'];
var dis = Math.sqrt( Math.pow(fixedJoint.x-targetJoint.x,2)
+ Math.pow(fixedJoint.y-targetJoint.y,2) ,2);
var xPos = this.pos.x+fixedJoint.x + (Math.cos(this.angle) * dis);
var yPos = this.pos.y+fixedJoint.y + (Math.sin(this.angle) * dis);
//同时更新关节的实际位置
targetJoint.pos.x = xPos;
targetJoint.pos.y = yPos;
//dot(xPos,yPos,io.context);
return {x: xPos, y: yPos}
}
}
Bone.prototype.setPosByJoint = function(bone,name){
if(bone instanceof Bone && bone.joints[name]){
var jointAbsPos = bone.getJointAbsPos(name);
var thisFixed = this.joints['fixed'];
var boneFixed = bone.joints['fixed'];
//把自身的固定关节依附到设计关节中
thisFixed.pos.x = jointAbsPos.x;
thisFixed.pos.y = jointAbsPos.y;
//同时更新自身的位置
this.pos.x = jointAbsPos.x - thisFixed.x;
this.pos.y = jointAbsPos.y - thisFixed.y;
}
}
Bone.prototype.draw = function(ctx,pos,r){
ctx.save();
var jointPos = this.joints['fixed'].pos; //取出固定关节的实际位置
ctx.translate(jointPos.x, jointPos.y);
ctx.rotate(this.angle);
ctx.translate(-jointPos.x, -jointPos.y);
//如果使用this，这是this是具体实例对象，非原型构造对象
//this.constructor.parent.prototype.draw.apply(this,arguments);
Bone.parent.prototype.draw.apply(this,arguments);
//重新调整自身关节的位置
for(var i in this.joints){
var joint = this.joints[i];
//关节是依附在骨骼上，那么他的位置是相对于骨骼
//它的位置只要计算在骨骼正常位置情况下所在就行了,骨骼旋转或平移会自动相对的了
var posX = this.pos.x + joint.x*Math.cos(this.rotation);
var posY = this.pos.y + joint.x*Math.sin(this.rotation);
joint.pos.x = posX;
joint.pos.y = posY;
joint.draw(ctx);
}
ctx.restore();
}
var bone0 = new Bone(250,150,120,30).setStrokeStyle('#000');
bone0.setJoint('fixed',-50,0);
bone0.setJoint('leg',50,0);
var bone1 = new Bone(0,0,120,20).setStrokeStyle('#000');
bone1.setJoint('fixed',-50,0);
//bone1.setPosByJoint(bone0,'leg');
var bone2 = new Bone(250,150,120,30).setStrokeStyle('#000');
bone2.setJoint('fixed',-50,0);
bone2.setJoint('leg',50,0);
var bone3 = new Bone(0,0,120,20).setStrokeStyle('#000');
bone3.setJoint('fixed',-50,0);
//bone3.setPosByJoint(bone2,'leg');
var walk = function(boneA,boneB,c){
var objRotation = Math.PI/2; //骨碌组合选择角度。如果为0则水平
var angleA = Math.sin(c)*Math.PI/4 + objRotation;
var angleB = Math.sin(c-Math.PI/2)*Math.PI/4+Math.PI/4;
boneA.angle = angleA;
boneB.angle = boneA.angle+angleB;
boneB.setPosByJoint(boneA,'leg');
}
var cycle = 0,ctx;
io.setFramerate(60,function(){
cycle+=0.05;
ctx = io.context;
ctx.clearRect(0,0,io.canvas.width,io.canvas.height);
walk(bone0, bone1, cycle);
bone0.draw(ctx);
bone1.draw(ctx);
walk(bone2, bone3, cycle + Math.PI);
bone2.draw(ctx);
bone3.draw(ctx);
});
}; iio.start(skeletonApp1);
</script>
</html>