How to filling element with color or image?

[Noisyflasher]

Hello! Thank you for this library. I'm trying to use it to create "coloring-book", and need your help) How can I fill some element with color or bitmap? Thank you for your attention!

[Noisyflasher]

And in continuation of stupid questions - how can I find the x and y of individual elements of the document? Hope to your answer.

[lucaslorentz]

Hello. For a coloring book, you may listen to mouse events like hover and find the right svg element that is hovered. You can use the method DisplayUtils.getSVGElement, or traverse up the display tree looking for elements that match your conditions (ie: only path elements).

A nice example is the test flex application: https://github.com/LucasLorentz/AS3SVGRenderer/blob/master/SVGRendererFlexTest/src/SVGRendererTest.mxml

It allows selecting an element of the svg, and highlights it. After selecting a svg element, you may allow changing its properties (fill-color, stroke-color, and so on).

To change the fill color of a element, you must set the style attribute:

element.style.setProperty("fill-color", "#FF0000");

[lucaslorentz]

To find the x and y, you may simply get the element bounds using the flash method getBounds. http://help.adobe.com/pt_BR/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#getBounds()

[lucaslorentz]

The library tries to allow editing all svg properties directly on the svg element (that is added to the display tree). It also render the element again after those changes.

[Noisyflasher]

Thank your very much for so detailed answer. I'll try it.

[Noisyflasher]

Hi! I need your help again) Trying to set style - byt it has no result. Maybe i sould do anything else? I didn't fully understand this: "After selecting a svg element, you may allow changing its properties (fill-color, stroke-color, and so on)." How I can allow it? And secon. Then I trying to convert SVGElement to bitmap(with BitmapData.draw()), it looks, like a result scaling to very small. Where i'm wrong?) And last, sorry for my english - i'm working on it))

[lucaslorentz]

Trying to set style - byt it has no result. Maybe i sould do anything else? Sorry, I'm quite out of the SVG world. It is not "fill-color", it should be just "fill".

element.style.setProperty("fill", "#FF0000");

I didn't fully understand this: "After selecting a svg element, you may allow changing its properties (fill-color, stroke-color, and so on)." How I can allow it? The library doesn't have any UI components to change svg. So, you will need to capture mouse interactions with the svg, then show a colorpicker to allow changing the fill color. The file I sent you has part of it. https://github.com/LucasLorentz/AS3SVGRenderer/blob/master/SVGRendererFlexTest/src/SVGRendererTest.mxml

Capturing mouse events:

svg.addEventListener(MouseEvent.MOUSE_OVER, svg_mouseOverHandler);
svg.addEventListener(MouseEvent.MOUSE_OUT, svg_mouseOutHandler);
svg.addEventListener(MouseEvent.CLICK, svgGroup_clickHandler);

protected function svg_clickHandler(e:MouseEvent):void {
    selectedElement = DisplayUtils.getSVGElement(e.target as DisplayObject);
}

protected function svg_mouseOverHandler(e:MouseEvent):void {
    var svgElement:SVGElement = DisplayUtils.getSVGElement(e.target as DisplayObject);
    if(svgElement){
        svgElement.transform.colorTransform = new ColorTransform(1, 1, 1, 1, 0x66, 0x66, 0x66);
    }
}

protected function svg_mouseOutHandler(e:MouseEvent):void {
    var svgElement:SVGElement = DisplayUtils.getSVGElement(e.target as DisplayObject);
    if(svgElement && svgElement != _selectedElement){
        svgElement.transform.colorTransform = new ColorTransform();
    }
}

And secon. Then I trying to convert SVGElement to bitmap(with BitmapData.draw()), it looks, like a result scaling to very small. Where i'm wrong?) Use BitmapData.draw only after the SVG dispatch the RENDERED event.

svg.addEventListener(SVGEvent.RENDERED, renderedEventHandler);

To solve the size problem, you can also pass a scaling transform matrix to the BitmapData.draw method. If you want a specific size, you can also get the current dimensions of the svg element, and calculate what should be the transform matrix that resizes it to the desired size.

My english isn't very good. That's why you didn't understand me. :-)

[Noisyflasher]

Hello! Thank you very-very much! Here's my fault there - I need to take a closer look. Then I would not have to disturb you. Thank you very ush again. If ever I can do to help - please, I'll be happy)

2013/8/30 LucasLorentz [email protected]

Trying to set style - byt it has no result. Maybe i sould do anything else? Sorry, I'm quite out of the SVG world. It is not "fill-color", it should be just "fill".

element.style.setProperty("fill", "#FF0000");

I didn't fully understand this: "After selecting a svg element, you may allow changing its properties (fill-color, stroke-color, and so on)." How I can allow it? The library doesn't have any UI components to change svg. So, you will need to capture mouse interactions with the svg, then show a colorpicker to allow changing the fill color. The file I sent you has part of it.

https://github.com/LucasLorentz/AS3SVGRenderer/blob/master/SVGRendererFlexTest/src/SVGRendererTest.mxml

Capturing mouse events:

svg.addEventListener(MouseEvent.MOUSE_OVER, svg_mouseOverHandler);svg.addEventListener(MouseEvent.MOUSE_OUT, svg_mouseOutHandler);svg.addEventListener(MouseEvent.CLICK, svgGroup_clickHandler); protected function svg_clickHandler(e:MouseEvent):void { selectedElement = DisplayUtils.getSVGElement(e.target as DisplayObject);} protected function svg_mouseOverHandler(e:MouseEvent):void { var svgElement:SVGElement = DisplayUtils.getSVGElement(e.target as DisplayObject); if(svgElement){ svgElement.transform.colorTransform = new ColorTransform(1, 1, 1, 1, 0x66, 0x66, 0x66); }} protected function svg_mouseOutHandler(e:MouseEvent):void { var svgElement:SVGElement = DisplayUtils.getSVGElement(e.target as DisplayObject); if(svgElement && svgElement != _selectedElement){ svgElement.transform.colorTransform = new ColorTransform(); }}

And secon. Then I trying to convert SVGElement to bitmap(with BitmapData.draw()), it looks, like a result scaling to very small. Where i'm wrong?) Use BitmapData.draw only after the SVG dispatch the RENDERED event.

svg.addEventListener(SVGEvent.RENDERED, renderedEventHandler);

To solve the size problem, you can also pass a scaling transform matrix to the BitmapData.draw method. If you want a specific size, you can also get the current dimensions of the svg element, and calculate what should be the transform matrix that resizes it to the desired size.

My english isn't that good. That's why you didn't understand me. :-)

— Reply to this email directly or view it on GitHubhttps://github.com/LucasLorentz/AS3SVGRenderer/issues/32#issuecomment-23538447 .

[Noisyflasher]

Hi, it's me again :-) I have another question: Can I somehow use the bitmapdata to fill svgelement? The data will be created with as3,not loaded. Do I understand correctly that I need to use for this SVGPattern? 30.08.2013 10:31 ÐÏÌØÚÏ×ÁÔÅÌØ "âÏÇÄÁÎ ëÏÓÁÒÅ×" [email protected] ÎÁÐÉÓÁÌ:

Hello! Thank you very-very much! Here's my fault there - I need to take a closer look. Then I would not have to disturb you. Thank you very ush again. If ever I can do to help - please, I'll be happy)

2013/8/30 LucasLorentz [email protected]

Trying to set style - byt it has no result. Maybe i sould do anything else? Sorry, I'm quite out of the SVG world. It is not "fill-color", it should be just "fill".

element.style.setProperty("fill", "#FF0000");

I didn't fully understand this: "After selecting a svg element, you may allow changing its properties (fill-color, stroke-color, and so on)." How I can allow it? The library doesn't have any UI components to change svg. So, you will need to capture mouse interactions with the svg, then show a colorpicker to allow changing the fill color. The file I sent you has part of it.

https://github.com/LucasLorentz/AS3SVGRenderer/blob/master/SVGRendererFlexTest/src/SVGRendererTest.mxml

Capturing mouse events:

svg.addEventListener(MouseEvent.MOUSE_OVER, svg_mouseOverHandler);svg.addEventListener(MouseEvent.MOUSE_OUT, svg_mouseOutHandler);svg.addEventListener(MouseEvent.CLICK, svgGroup_clickHandler); protected function svg_clickHandler(e:MouseEvent):void { selectedElement = DisplayUtils.getSVGElement(e.target as DisplayObject);} protected function svg_mouseOverHandler(e:MouseEvent):void { var svgElement:SVGElement = DisplayUtils.getSVGElement(e.target as DisplayObject); if(svgElement){ svgElement.transform.colorTransform = new ColorTransform(1, 1, 1, 1, 0x66, 0x66, 0x66); }} protected function svg_mouseOutHandler(e:MouseEvent):void { var svgElement:SVGElement = DisplayUtils.getSVGElement(e.target as DisplayObject); if(svgElement && svgElement != _selectedElement){ svgElement.transform.colorTransform = new ColorTransform(); }}

And secon. Then I trying to convert SVGElement to bitmap(with BitmapData.draw()), it looks, like a result scaling to very small. Where i'm wrong?) Use BitmapData.draw only after the SVG dispatch the RENDERED event.

svg.addEventListener(SVGEvent.RENDERED, renderedEventHandler);

To solve the size problem, you can also pass a scaling transform matrix to the BitmapData.draw method. If you want a specific size, you can also get the current dimensions of the svg element, and calculate what should be the transform matrix that resizes it to the desired size.

My english isn't that good. That's why you didn't understand me. :-)

Reply to this email directly or view it on GitHubhttps://github.com/LucasLorentz/AS3SVGRenderer/issues/32#issuecomment-23538447 .

[Noisyflasher]

Hi, it's me again :-) I have another question: Can I somehow use the bitmapdata to fill svgelement? The data will be created with as3,not loaded. Do I understand correctly that I need to use for this SVGPattern?