-
Notifications
You must be signed in to change notification settings - Fork 0
/
skeleton2.html
133 lines (113 loc) · 3.95 KB
/
skeleton2.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skeleton 2</title>
</head>
<body>
</body>
<script src="iio-sdk/iioEngine-1.2.1.js"></script>
<script >
var bone1,bone2; //扔到全局，方便用chrome debug
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();
//bone2代码到这里的时候取出的是上次自己的固定关节的实际位置
//而实际情况应该是取出这次的或是bone1的leg位置
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();
}
bone1 = new Bone(250,250,200,30,45).setStrokeStyle('#000');
bone1.setJoint('fixed',-80,0);
bone1.setJoint('leg',80,0);
//bone1.rotation = 45;
//副骨头的位置因粘附的关节的位置而调整，则new的时候pos可以随便设置
bone2 = new Bone(0,0,200,30).setStrokeStyle('#000');
bone2.setJoint('fixed',-80,0);
bone2.setPosByJoint(bone1,'leg'); //根据粘附的关节而设置它的位置
var cycle = 0,angle,ctx;
io.setFramerate(60,function(){
//注意这些次序,先clean再调角度，再画
cycle+=0.04;
angle = Math.sin(cycle)*Math.PI/2;
ctx = io.context;
ctx.clearRect(0,0,io.canvas.width,io.canvas.height);
bone1.angle = angle;
bone1.draw(ctx);
bone2.angle = bone1.angle + angle;
bone2.setPosByJoint(bone1,'leg');
bone2.draw(ctx);
});
}; iio.start(skeletonApp1);
</script>
</html>