HTML5 Canvas - load and unload SVG dynamically?

Engaged ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

How would I load a SVG dynamically onto the stage?  E.g. into a movieclip?  

 

Then remove it when not required?

 

The path to the SVG is contained as a column in a MySQL database, which is not a problem in itself, and the SVGs are contained in a folder in the published directory.

Views

61

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
Engaged ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

After looking at the following: 

 

https://community.adobe.com/t5/animate-discussions/animate-html-canvas-js-and-loading-svg-from-file/...

https://createjs.com/docs/preloadjs/classes/LoadQueue.html

https://stackoverflow.com/questions/25608721/unable-to-preload-and-display-svg-with-createjs 

 

I did it the easy way with using:

 

var patientImage = new createjs.Bitmap("images/patient_profiles/5.svg");
stage.addChild(patientImage);

 

Though I may change my ways later depending on performance, but I don't see any issue with this looking ahead.

 

 

 

 

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
Engaged ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

problem though with proportional scale of the svg to the stage:

 

var patientImagePath = data['patient_image_path']

patientImage = new createjs.Bitmap(patientImagePath);

patientImage.x = 96;
patientImage.y = 36.05;
patientImage.scaleX = 0.16;
patientImage.scaleY = 0.16;

root.patientDetailsModal.addChild(patientImage);

 

Looks OK initially (this is the patient image...)

 

2022-04-07_12-33-55.jpg

 

But as I am using responsive settings, the patient image doesn't scale proportionally to the rest of the stage:

 

2022-04-07_12-34-50.jpg

 

How sould this be fixed?

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
Engaged ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

LATEST

Forgot to add that in the second image, I have resized the browser to be smaller...

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