Copy link to clipboard
Copied
Hello,
I am struggling with creating an effect on an object. It is supposed to glow while the mouse is hovering over it. Below is the code I was able to produce, but it is not properly working and I am running out of ideas (as well as google results to this issue) what the remedy to the problem is.
stage.enableMouseOver(30);
var _this = this;
this.bug.addEventListener('mouseover', function(){
var glow = new createjs.Shadow("rgba(255,0,0,1)", 0, 10, 20);
_this.bug.shadow = [glow];
_this.bug.cache(0,0,222,248);
});
this.bug.addEventListener('mouseout', function(){
var glow = new createjs.Shadow("rgba(0,0,0,1)", 1, 0, 1);
_this.bug.shadow = [glow];
_this.bug.cache(0,0,222,248);
});
Thank you for any help in advance.
Hi,
You need to use the event's target in the event handler functions:
stage.enableMouseOver(30);
this.circle.addEventListener('mouseover', function( obj ){
obj.target.shadow = new createjs.Shadow("rgba(255,0,0,1)", 0, 0, 20 );
});
this.circle.addEventListener('mouseout', function( obj ){
obj.target.shadow = null;
});
Here is a working example:
https://cloud.vectorworks.net/links/11e9da0bffa1b992905d0e7947a8ce60/
Copy link to clipboard
Copied
Hi,
You need to use the event's target in the event handler functions:
stage.enableMouseOver(30);
this.circle.addEventListener('mouseover', function( obj ){
obj.target.shadow = new createjs.Shadow("rgba(255,0,0,1)", 0, 0, 20 );
});
this.circle.addEventListener('mouseout', function( obj ){
obj.target.shadow = null;
});
Here is a working example:
https://cloud.vectorworks.net/links/11e9da0bffa1b992905d0e7947a8ce60/
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Be aware that filter effects in Canvas documents can be very slow, because they're implemented in runtime JavaScript code instead of natively supported by the browser.