circletype

CircleType

A JavaScript library that lets you curve type on the web

Demos: http://circletype.labwire.ca

Installation

npm

npm i circletype --save

bower

bower i circletype.js --save

API

CircleType

A CircleType instance creates a circular text element.

Kind: global class

• CircleType
  • new CircleType(elem)
  • .radius(value) ⇒ Number
  • .radius() ⇒ Number
  • .dir(value) ⇒ CircleType
  • .dir() ⇒ Number
  • .refresh() ⇒ CircleType
  • .destroy() ⇒ CircleType

new CircleType(elem)

Param	Type	Description
elem	HTMLElement	A target HTML element.

Example

const circleType = new CircleType(document.getElementById('elementId'));

// Instance methods are chainable.
circleType.radius(200).dir(-1);

circleType.radius(value) ⇒ Number

Sets the text radius.

Kind: instance method of CircleType
Returns: Number - The current instance.

Param	Type	Description
value	Number	A new text radius in pixels.

Example

const circleType = new CircleType(myElement);

// Set the radius to 150 pixels.
circleType.radius(150);

circleType.radius() ⇒ Number

Gets the current text radius in pixels.

Kind: instance method of CircleType
Returns: Number - The current text radius.
Example

const circleType = new CircleType(myElement);

circleType.radius();
// > 150

circleType.dir(value) ⇒ CircleType

Sets the text direction. 1 is clockwise, -1 is counter-clockwise.

Kind: instance method of CircleType
Returns: CircleType - The current instance.

Param	Type	Description
value	Number	A new text direction.

Example

const circleType = new CircleType(myElement);

// Set the direction to counter-clockwise.
circleType.dir(-1);

// Set the direction to clockwise.
circleType.dir(1);

circleType.dir() ⇒ Number

Gets the current text direction. 1 is clockwise, -1 is counter-clockwise.

Kind: instance method of CircleType
Returns: Number - The current text radius.
Example

const circleType = new CircleType(myElement);

circleType.dir();
// > 1 (clockwise)

circleType.refresh() ⇒ CircleType

Schedules a task to recalculate the height of the element. This should be called if the font size is ever changed.

Kind: instance method of CircleType
Returns: CircleType - The current instance.
Example

const circleType = new CircleType(myElement);

circleType.refresh();

circleType.destroy() ⇒ CircleType

Removes the CircleType effect from the element, restoring it to its original state.

Kind: instance method of CircleType
Returns: CircleType - This instance.
Example

const circleType = new CircleType(myElement);

// Restore `myElement` to its original state.
circleType.destroy();