Skip to content

Add non destructive zoom functionaliy to Raphael

Notifications You must be signed in to change notification settings

arv100kri/raphael-zoom

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Raphaël Zoom plugin - 0.0.4

What is it?

An extension to the Raphael Vector Library.
It enables Raphael to zoom the whole paper, stroke widths included.

The zoom functionality is non destructive. This means that you can set the zoom back to 1 (100%) at any time.

Usage

Basic usage:

Create a paper of 800 × 500 at 10, 10 and initialize it's zoom

var paper = Raphael(10, 10, 800, 500).initZoom();

Add a circle and initialize it's zoom

var circle = this.paper.circle(150, 120, 100).initZoom();
circle.setAttr({
  fill:           "#83B100",
  stroke:         "#333",
  "stroke-width": 10
});

Set the paper zoom to 50%

paper.setZoom(0.5);

When using a zoomed paper the standard "attr" method should be replaced with "setAttr". The raphael.zoom plugin will than take care of zoomed stroke widths and text elements.

Example of setting attributes with the zoom plugin:

circle.setAttr("stroke-width", 2);

or

circle.setAttr({ "stroke-width": 2 });

Important: Using element.attr instead of element.setAttr with a zoomed paper, the shape will be transformed in the current zoom value and not the real value!

Also element.translate shoud be replaced with element.setTranslation. Like

Translate element

circle.setTranslation(20, 30);

Dependencies

To-do

  • animated zoom

About

Add non destructive zoom functionaliy to Raphael

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published