Create a gist now

Instantly share code, notes, and snippets.

@fabiobiondi /App.js
Last active Aug 13, 2016

What would you like to do?
EaselJS and HTML5 Canvas - ES6 Custom Display Objects (based on ES5 version: http://www.createjs.com/tutorials/Inheritance/)
import CircleButton from './CircleButton';
// Init stage
const stage = new createjs.Stage("demo");
// Button black
const btn = new CircleButton('Hi');
btn.x = 50; btn.y = 50;
stage.addChild(btn);
// Button purple
const btn2 = new CircleButton('hello', 'purple', 50);
btn2.x = 100; btn2.y = 100;
stage.addChild(btn2);
btn2.addEventListener('animationEnd', function() {
console.log ('fadeIn animation completed')
})
// Ticker
createjs.Ticker.addEventListener("tick", stage);
// CircleButton.js
class CircleButton extends createjs.Container {
constructor(text = '', color = '#222', radius = 40) {
// invoke Container constructor
super();
// set props
this.text = text;
this.radius = radius;
this.color = color;
// Init component
this.setup();
}
setup() {
// Create a circle shape
const circle = new createjs.Shape();
circle.graphics.beginFill(this.color).drawCircle(0, 0, this.radius);
this.addChild(circle, txt);
// Create a Text
const txt = new createjs.Text(this.text, "20px Arial", 'white');
this.addChild(txt);
// Center text inside circle
txt.x = txt.getMeasuredWidth()/2 * -1;
txt.y = txt.getMeasuredHeight()/2 * -1;
// FadeIn all
this.alpha = 0;
createjs.Tween.get(this).to({ alpha: 0.9 }, 1000).call(this.handleComplete);
}
// Dispatch an event at the end of animation
handleComplete() {
this.dispatchEvent('animationEnd');
}
}
export default createjs.promote(CircleButton, "Container")
@fabiobiondi
Owner

Result:
schermata 2016-01-03 alle 02 39 14

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment