Giter VIP home page Giter VIP logo

raphael-shapes's Introduction

Raphaël Shapes plugin - 0.0.2-xdissent

What is it?

An extension to the Raphael Vector Library.
Currently it provides the following shapes:

  • polygon (throw in raw SVG polygon string)
  • n-gon
  • star

What's different?

This version of the shapes extension does not rely on any external libraries (except Raphael).

Usage

Basic usage:

// Creates canvas 800 × 500 at 10, 10
var paper = Raphael(10, 10, 800, 500);

Add a polygon

// Creates an polygon
var raw_poly = "47.013,30.086 0.087,45.24 49.609,26.648 50.346,17.421 63.277,21.084 110.657,0.228";
var polygon = paper.polygon(50, 60, raw_poly);

Update an polygon

// Updates the polygon
var new_poly = "47.013,30.086 0.087,45.24 49.609,26.648 50.346,17.421 63.277,21.084 110.657,0.228 69.127,21.084 97.674,17.421 59.075,26.648 29.338,45.24";
ngon.sett("points", new_poly);

Add a hexagon

// Creates an n-gon at x 50 and y 60 with radius 100 and 6 sides
var ngon = paper.ngon(50, 60, 100, 6);

Update an n-gon

// Updates the n-gon to have 5 edges
ngon.sett({ points: 5 });

// or
ngon.sett("points", 5);

Add a star

// Creates a star at x 200 and y 60 with inner radius 50, outer radius 100 and 9 points
var star = paper.star(200, 60, 50, 100, 9);

Update a star

// Updates the star to have 11 points, inner radius 40 and outer radius 120
star.sett({ points: 11, r1: 40, r2: 120 });

Retrieve the settings of a shape

var type = star.setts.type;
var points = star.setts.points;
var radius = star.setts.r;
...

Dependencies

Important

  • This plugin is still under development

To-do

  • writing tests
  • testing with sets
  • adding cross
  • adding arrow
  • animating with sett (morphing shapes)

raphael-shapes's People

Contributors

micahalles avatar xdissent avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

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.