Code Monkey home page Code Monkey logo

as3svgrenderer's Introduction

AS3SVGRenderer

An AS3 SVG Renderer for Flash Player.

It parses and translates svg elements to Flash display objects. Rendering it and letting you interact with the output.

Requirements:

  • Flash Player 10+

Features:

  • Supports basic shapes and paths.
  • Supports texts, right-to-left scripts, subscript, superscript.
  • Has 3 text renderers engines (TextField, TLF, FTE), supports CFF and non-CFF fonts.
  • Supports coordinates system rules, transformations and units.
  • Supports masking and clipping.
  • Supports filling, strokes, gradients.
  • Supports marker symbols.
  • Supports basic document structure (g, defs, symbol, use, image).
  • Supported filters: ColorMatrix, GaussianBlur.
  • Rendered display objects keeps the svg structure, so you can code mouse/touch interactions with svg elements.
  • AS3 only.
  • Flex component.

Missing features:

  • Text stroke.
  • Some filters.
  • Scripting.
  • Animation.

INTRODUCTION

The library has display classes that represents each SVG element.
The SVGDocument class is the class responsible to hold the SVG display object tree.
The library has an asynchronously parser that processes the SVG file and create all necessary display objects.
You can listen to the RENDERED event to know when graphics was completely rendered for the first time.

USAGE

AS3 only (without flex)

  1. The first thing you have to do is initialize the ProcessExecutor, that class is responsible to distribute the library processing between frames, that way the application will not get frozen while showing large SVG files. You have to do that only once in the whole application.
ProcessExecutor.instance.initialize(stage);  
  1. Now you can load any SVG file into the SVGDocument using the load method.
var svg:SVGDocument = new SVGDocument();  
svg.load(urlStringOrUrlRequest);  
addChild(svg);  

Or if you already have the svg content string, use the parse method of SVGDocument class.

var svg:SVGDocument = new SVGDocument();  
svg.parse(myLoadedSVGString);  
addChild(svg);   

You can also pass an XML object to the parse method, but it isn't recommended once when the parse method gets a string it does extra things to better parse the string.

Flex component

  1. Just add the SVG component to your MXML, and set the property "Source" on the component with:
  • A string with the URL of the SVG file.
  • A urlRequest to achieve the SVG file.
  • A string with the content of the SVG file.
  • A XML object with the content of the SVG file (not recommended).
  1. Done :-). The SVG file will appear on the screen.

LICENSE

Licensed under the MIT License.
http://opensource.org/licenses/mit-license.php

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.