Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing SVG Path at runtime #56

Open
GitterHubber opened this issue Jan 4, 2020 · 6 comments
Open

Changing SVG Path at runtime #56

GitterHubber opened this issue Jan 4, 2020 · 6 comments

Comments

@GitterHubber
Copy link

GitterHubber commented Jan 4, 2020

Is there a way to dynamically change the path property of the SVGElement at runtime.
I have a main SVG that I rendered on stage and it has many SVGElements.
I want to change the path of one of the SVGElement, so I tried using the "svgPath" property which is a string.

I am trying to set a path string to this property, but my issue is that the path string I take from another SVG which has different co-ordinates so I don't think it draws the path at the correct location and scale.
In short I would like to take a path from one SVG and overwrite another SVG's SVGElement path with that one.

Is this currently possible?

@GitterHubber
Copy link
Author

I did some more tests, and after setting the "svgPath" value string on a SVGElement, I see that render() is not being called.
Or its being called but the "_renderInvalidFlag" is false so it aborts rendering.
Is there anyway to force rendering after setting the "svgPath" property.

@lucaslorentz
Copy link
Owner

Yes. You can call invalidate methods. To change the flag.

@lucaslorentz
Copy link
Owner

InvalidateRender, to be more specific

@GitterHubber
Copy link
Author

GitterHubber commented Jan 5, 2020

I'm doing something like this


svgElePath.svgPath = "some new svg path string";
svgElePath.invalidateRender();

however there is no change in the SVG render output

but if I do

svgElePath.svgPath = "some new svg path string";
svgElePath.validate();

I do see some change in the SVG but its not the desired result as per my requirements.

Further to this is there an event that will tell me that the new path has finished rendering.
I need to know the bounds of the newly rendered path so that I can position and scale it as per the old path that was in that element.
But I see that the new bounds are equal to the old path bounds.

@lucaslorentz
Copy link
Owner

There is a validated event:
https://github.com/lucaslorentz/AS3SVGRenderer/blob/master/SVGRenderer/src/com/lorentz/SVG/display/base/SVGElement.as#L28

@GitterHubber
Copy link
Author

GitterHubber commented Jan 6, 2020

Thanks for the info, I used the validate event but it seems the correct bounds of the object is still not computed after validate() it still reports the old bounds.

My code is like so

loop per SVGElement

							var svgElePath:SVGPath = svgEle as SVGPath;
							
							// get the bounds of the object, clone rect just in case lib is reusing it
							var pathBounds:Rectangle = svgElePath.getBounds(svgElePath.parent).clone();
							
							// set new path into element and render
							svgElePath.svgPath = "some svg path";

                           // save old bounds in obj
							svgElePath.obj = pathBounds;

							svgElePath.addEventListener(SVGEvent.VALIDATED, onPathValidated);
							svgElePath.validate();

The in my validate event callback

		private function onPathValidated(evt:SVGEvent):void {
			var svgElePath:SVGPath = evt.target as SVGPath;
			
			svgElePath.removeEventListener(SVGEvent.VALIDATED, onPathValidated);
			
			// get old bounds
			var pathBounds:Rectangle = svgElePath.obj as Rectangle;

			// get new bounds of the element
			var pathNewBounds:Rectangle = svgElePath.getBounds(svgElePath.parent);
			
			// bounds traces equal over here
			trace(pathBounds + " >> " + pathNewBounds);
		}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants