Animate HTML5 Canvas, Multiple Shadows?

Contributor ,
Sep 17, 2021 Sep 17, 2021

Copy link to clipboard

Copied

Hello,

I'm loading SVGs into Bitmap objects.  I can successfully apply a createjs.Shadow.  I am trying to approximate an outline of the SVG by creating 4 Shadows, one in each direction (up, down, left, right).  It seems I can only apply one shadow -- if I add multiple lines like this...

	bitmap.shadow = new createjs.Shadow("#00FF00", 0, -5, 0);
    bitmap.shadow = new createjs.Shadow("#00FF00", 5, 0, 0);
	bitmap.shadow = new createjs.Shadow("#00FF00", -5, 0, 0);
    bitmap.shadow = new createjs.Shadow("#00FF00", 0, 5, 0);

...then only the last one is used.  Can anyone kindly how I can write this to generate 4 shadows on the bitmap object?  Thank you for any help.

 

const loader = new createjs.LoadQueue(false, null, true);
loader.on("complete", e =>
{
    const bitmap = new createjs.Bitmap(e.currentTarget.getResult("test"));
    this.addChild(bitmap);
	
	// Scale image
	bitmap.scaleX = bitmap.scaleY = 1;
	
	// Get width and height
	console.log( "Width = " + bitmap.getBounds().width );
	console.log( "Height = " + bitmap.getBounds().height );
	
	bitmap.shadow = new createjs.Shadow("#00FF00", 0, -5, 0);
    bitmap.shadow = new createjs.Shadow("#00FF00", 5, 0, 0);
	bitmap.shadow = new createjs.Shadow("#00FF00", -5, 0, 0);
    bitmap.shadow = new createjs.Shadow("#00FF00", 0, 5, 0);	
});
loader.loadManifest([{id:"test", src:"images/global_6000.svg", type:"image"}]);

 

Views

40

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 18, 2021 Sep 18, 2021

Copy link to clipboard

Copied

LATEST

you can only assign one shadow.  (that said, you could outline any two side using the offset x and y because they're all the same color.)

 

but to do what you want you should use the graphics class, in particular, the graphics.rect class, https://createjs.com/docs/easeljs/classes/Graphics.Rect.html

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines