Copy link to clipboard
Copied
Hello,
I am rewriting my AS3 application with HTML5 Canvas. I am importing SVG graphics, and I need to make an outline around those graphics that varies in width depending on user input.
In AS3, I used the glow filter, but it is no longer available (please see the attached photo, showing how I made an outline around imported graphics using the glow filter.). And, it seems that CreateJS does not have a glow filter.
Can anyone point me in the right direction of how to 1) use a third-party JS library to obtain a glow filter, 2) draw an outline around these SVGs, or 3) any other ideas? Thank you for any help!
Copy link to clipboard
Copied
Hi.
You can use the Shadow class to simulate an outline/glow.
Please let us know if you have any further questions.
Regards,
JC
Copy link to clipboard
Copied
Thanks, JC.
I tried the Shadow class, but I cannot achieve a hard edge to simulate an outline (see image). I also looked at BlurFilter, but that, too, doesn't have the ability to make a hard edge. I've also scoured the web for hours looking for any technique for adding a stroke outline via Javascript, similar to how this is done through HTML. I am stumped. If you have thoughts, I'd appreciate it! Thank you.
- Steve
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, 0, 10);
});
loader.loadManifest([{id:"test", src:"images/global_6000.svg", type:"image"}]);
Copy link to clipboard
Copied
Hi.
Yeah... Unfortunately it seems the edges are always soft using the Shadow class.
I'll think on something... If I come up with a solution, I'll let you know.
Meanwhile... What I think you will have to do is to create each plane as a separated SVG DOM element and then apply some CCS to it to create the outline.
Regards,
JC
Copy link to clipboard
Copied
Hi JC,
Great! Thank you for the suggestion -- let me kick that around a little and see if I can make that work.
- Steve
Copy link to clipboard
Copied
JC, I'm still trying to figure out how to apply an outline or a glow to a SVG that is loaded as a Bitmap.
When you say SVG DOM Element, I'm not sure how to apply that in Adobe Animate/HTML5 Canvas. Given my code above, could you be more specific? Thanks for any help.