JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1439
  • Score
    100M100P100Q106836F
  • License MIT

A JavaScript library that lets you curve type on the web.

Package Exports

  • circletype

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (circletype) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CircleType

Build Status

A JavaScript library that lets you curve type on the web.

Demo: http://circletype.labwire.ca

Installation

In a browser:

<script src="circletype.min.js"></script>

Using npm:

$ npm i circletype --save

Load ES6 module:

import CircleType from `circletype`;

API

CircleType

A CircleType instance creates a circular text element.

Kind: global class

new CircleType(elem)

Param Type Description
elem HTMLElement A target HTML element.

Example 

// Instantiate `CircleType` with an HTML element.
const circleType = new CircleType(document.getElementById('myElement'));

// Set the text radius and direction. Note: setter methods are chainable.
circleType.radius(200).dir(-1);

circleType.radius(value) ⇒ CircleType

Sets the desired text radius. The minimum radius is the radius required for the text to form a complete circle. If value is less than the minimum radius, the minimum radius is used.

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

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

Example 

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

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

circleType.radius() ⇒ number

Gets the text radius in pixels. The default radius is the radius required for the text to form a complete circle.

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

const circleType = new CircleType(document.getElementById('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(document.getElementById('myElement'));

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

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

circleType.dir() ⇒ number

Gets the 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(document.getElementById('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(document.getElementById('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(document.getElementById('myElement'));

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