71 lines
1.6 KiB
JavaScript
71 lines
1.6 KiB
JavaScript
|
|
var TreeFace = Backbone.View.extend({
|
|
initialize: function () {
|
|
this.s = this.options.s;
|
|
this.el = this.options.tree;
|
|
|
|
this.addFace();
|
|
|
|
/*
|
|
setTimeout(function () {
|
|
this.face.attr({
|
|
'class': 'face animating'
|
|
});
|
|
}.bind(this), Math.random() * 2000 );
|
|
*/
|
|
|
|
this.hitarea = this.s.circle(0, 0, 40);
|
|
this.hitarea.attr({
|
|
fill: 'transparent',
|
|
'class': 'hit-area'
|
|
});
|
|
this.face.add(this.hitarea);
|
|
this.hitarea.mouseover(this.handle_MOUSEOVER.bind(this));
|
|
this.hitarea.mouseout(this.handle_MOUSEOUT.bind(this));
|
|
},
|
|
|
|
handle_MOUSEOVER: function () {
|
|
this.face.attr({
|
|
'class': 'face animating'
|
|
});
|
|
},
|
|
|
|
handle_MOUSEOUT: function () {
|
|
this.face.attr({
|
|
'class': 'face'
|
|
});
|
|
},
|
|
|
|
addFace: function () {
|
|
var mouth,
|
|
eye,
|
|
ey2,
|
|
matrix;
|
|
|
|
this.face = this.s.g();
|
|
this.face.attr({
|
|
'class': 'face'
|
|
});
|
|
/*
|
|
mouth = this.s.circle(0, 5, 4);
|
|
mouth.attr({fill: 'black', 'class': 'mouth'});
|
|
this.face.add(mouth);
|
|
*/
|
|
eye = this.s.path('M-2.75-6.75c0,0-2.537,2.5-5.667,2.5s-5.667-2.5-5.667-2.5s2.537-2.5,5.667-2.5S-2.75-6.75-2.75-6.75z');
|
|
eye.attr({fill: 'white', 'class': 'eye left'});
|
|
this.face.add(eye);
|
|
|
|
eye2 = this.s.path('M14.583-6.75c0,0-2.537,2.5-5.667,2.5S3.25-6.75,3.25-6.75s2.537-2.5,5.667-2.5S14.583-6.75,14.583-6.75z');
|
|
eye2.attr({fill: 'white', 'class': 'eye right'});
|
|
this.face.add(eye2);
|
|
|
|
matrix = new Snap.Matrix();
|
|
box = this.el.getBBox();
|
|
matrix.translate(box.cx, box.cy);
|
|
matrix.scale(box.r2 / 40);
|
|
|
|
this.face.transform(matrix.toTransformString());
|
|
this.el.add(this.face);
|
|
},
|
|
});
|