Skip to content

Instantly share code, notes, and snippets.

@fabiobiondi
Last active April 14, 2019 17:21
Show Gist options
  • Save fabiobiondi/3a275b98396f9a091c82 to your computer and use it in GitHub Desktop.
Save fabiobiondi/3a275b98396f9a091c82 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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

@shanigit96
Copy link

hey ,
i'm getting these errors - "Unexpected identifier" about import keyword and "Unexpected token export".
what im doing wrong ? i'm using 64 chrome version. tnx!

@FlashFu
Copy link

FlashFu commented Apr 14, 2019

It looks like you need to modify your HTML to get this to work.
I am currently in Chrome 73.0.3683.103
In the script tag, add a type of module.

<script type="module" src="app.js"></script>

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