Skip to Content

Vectoroid getting started

submit to reddit


You can get the latest tarball here

To use the git repo go to:
Vectoroid GIT Repository


Google group: Vectoroid-discuss

Twitter: @sentinelwebtech

Quick overview


The model ( is broken up into

  • DrawingElement : Drawing, Layer, Group, Stroke
  • Various Stoke Data classes: (PointVec, Asset, Fill, Pen, Gradient, GradientData,StrokeDecoration)
  • Renderer: (UpdateFlags, ViewPortData, TransfromOperatorInOut)
  • Set & Template: DrawingSet, DrawingSetTemplate, DrawingTemplate – these aren’t complete at the time or writing.

A drawing is a full drawing (a page), which has a base elements array and Layers each with an elements array.

In the elements array there are only Strokes (Vector information) or Groups (collections of strokes).

The renderer

The renderer renders drawing elements, it has a viewport and scale. The render stores a cache of RenderObject against each object in the drawing, which has the various render data stored init (paths, Paints, etc)

You need to call DrawingElement.update when you make changes to DrawingElement (Stroke) for them appear on screen. When you remove DrawingElements from a drawing you should remove then from the render cache too Renderer.dropCache or Renderer.removeFromCache. You can get efficiency for animation by modifying the render object directly (see below).

File repository and loading

The package contains file and saving functionality.

  • FileRepository: Manages the directory structure for a top level Vecotroid repository.
  • SaveFile: Contains all the functionality to load sets and files and render them to bitmap and other formats. A SaveFile is actually a directory.
  • DrawingFileUtil: Utilities to load drawings from assets and other places.
  • AssetManager: Used by SaveFile to manage Assets (bitmaps at this stage)
  • FileNameUtil: File naming conventions

File repository structure

There is a global file repository ( and application repos. The global repos allows the framework to store common files (Clipart, fonts ,etc) and make them available to all apps using Vectorid.

Local app repositories are for saving files, but can have their own private assets to use. Note that it not secure or DRM’d though. Both repos have the same structure:

  • .saves: All the drawing SaveFiles
  • raw: Camera capture file.
  • .ttfonts: Fonts
  • output: Published bitmap output.
  • .templates: Set templates – not available yet.

A save file can have different file types, there can multiple <DRAWING>s in one file:

  • .assets: Directory for bitmap assets used in bitmap fills/backgrounds.
  • <DRAWING>.json: The drawing file.
  • <DRAWING>.preview.png: Preview bitmap
  • <DRAWING>.png: FUll size rendered output.
  • <DRAWING>.svg: SVG output (unreleased)

JSON Rendering

There were a few attempts at finding efficient JSON rendering, as the JSON files are quite large and need to be saved regualrly, hence the different attempts in*.

At the time of writing GSON is used for input processing and SJSON is used for output processing. This need to be cleaned up

The Examples

Vectoroid example

This example just loads a drawing JSON file from the app asset directory. The loading code is here in the onCreate method:

        DisplayView dv = (DisplayView) findViewById(;
A DisplayView is declared in the layout main.xml:
Voila! Drawing displayed

SuprCards Explodr

This app allows you to scroll through a FIleRepository and load a Drawing. It then loads the drawing and animates the top level Render Objects in random directions (an ‘explode’ effect)

There are quite a few parts of the API touched in this example:

  • Using a file Repository
  • Loading a file
  • Basic Animation

Using a file Repository

In CoverFlowImageAdapter.refresh(FileRepository fr) we get the list of save files:

ArrayList<SaveFile> mImagesFile = fr.getFiles(this.mContext);
it then makes a reflected bitmap form the preview files using the CoverFlow code from Neil Davies.

Loading a file

When a drawing is clicked, we get the save file and pass an intent to SuprCardsExploderActivity:

SaveFile saveFile = (SaveFile)_coverImageAdapter.getItem(_selectedItemPosition);
Intent i = new Intent(SuprCardsConstants.INTENT_ACTION_LOAD_FILE);	i.setAction(SuprCardsConstants.INTENT_ACTION_LOAD_FILE);
i.putExtra(SuprCardsExploderActivity.INTENT_PARAM_LOAD_FILE_SET, saveFile.getSet().getId());
i.putExtra(SuprCardsExploderActivity.INTENT_PARAM_LOAD_FILE_DRAWING, saveFile.getSet().getDrawingIDs().get(0));

In SuprCardsExploderActivity.onStart() we tell the displayView to load the file:

String set = i.getStringExtra(INTENT_PARAM_LOAD_FILE_SET);
if (set!=null && !set.equals(_currentSet)) {
   	String drawingID = i.getStringExtra(INTENT_PARAM_LOAD_FILE_DRAWING);
  	try {
  	  	SaveFile saveFile =SuprCardsConstants.getFileRepo(this).getSaveFile( set, this );
  	  	ArrayList drawingIDs = saveFile.getSet().getDrawingIDs();
  	  	if (drawingIDs.size()>0) {
  	  	  	_displayView.setDrawingFile( saveFile.getDrawingFile(drawingIDs.get(0)), saveFile);
 	 	 	_textView.setText("Click to play ...");
  	} catch (Exception e) {
There is a loading listener set on the DisplayView in onCreate
_displayView.setOnLoadListener(new OnAsyncListener() {
  	public void onAsync(Integer request) {
  	  	if (request==DisplayView.LOADSTATE_LOADED) {
  	  	  	_textView.setText("Click to play ...");
	 	} else if (request==DisplayView.LOADSTATE_FAILED) {
  	  	  	_textView.setText("Error ..");
		} else if (request==DisplayView.LOADSTATE_LOADING) {
			_textView.setText("Loading ...");
		} else if (request==DisplayView.LOADSTATE_UPDATING) {
			_textView.setText("Updating ...");

Basic Animation

For small images an OK frame rate can be achieved for animating drawing objects by modifying the render objects asociated with the drawing elements. The animatin is achieved by posting the the Renderer.animations array. The below code run in a android.os.Handler(_handler), the Motion(m) class just stores the animation variables, ignoring the end case code, this is

Layer l = _displayView.getDrawing().getLayer(SuprCardsConstants.DRAW_LAYER_NAME);
for (int i=0; i< l.elements.size();i++) {//i<6 &&
	DrawingElement s = l.elements.get(i);
	Motion m = elMotion.get(s);;
	_displayView.getRenderer().animations.put(s, m.operatorAcc);

You can also modify the Stroke using StrokeUtil.translate(s,, dv.getRenderer());. This is less efficient but it modifies the model, so you need to do this if you want to save the modified vectors.

No comments yet!

You can be legendary and add one ...

All spam will be deleted - don't waste my time and yours. Fackbook profiles posted will be reported to FB as spam accounts

Allowed HTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


By submitting a comment you grant Sentinel Web Technologies a perpetual license to reproduce your words and name/web site in attribution. Inappropriate and irrelevant comments will be removed at an admin’s discretion. Your email is used for verification purposes only, it will never be shared.