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"}]);
Copy link to clipboard
Copied
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