doc22940 / react-pts-canvas

Pts Canvas React Component

react-pts-canvas

This is a React Component for canvas drawing using Pts. Pts is a javascript library for visualization and creative-coding. You may use Pts by itself, or with React and other frameworks.

Install

npm install --save react-pts-canvas

Examples

• The example folder provides a quick example of using PtsCanvas in a React app
• Take a look at more examples in pts-react-example repo.

QuickStartCanvas component

If you are getting started with Pts, take a look at the demos and read the guides.

<QuickStartCanvas> helps you get started quickly. Here is a minimal example that draws a point the follows the cursor, by passing a callback function to onAnimate property:

import React from 'react'
import {QuickCanvas} from 'react-pts-canvas'

// ...
<QuickStartCanvas onAnimate={ (space, form, time) => form.point( space.pointer, 10) } />
// ...

In addition to the props in PtsCanvas (see below), QuickStartCanvas provides 4 callback props that correspond to the player functions in Pts. The space and form instances are also passed as parameters.

<QuickStartCanvas
onStart={ (bound, space) => {...} }
onAnimate={ (space, form, time, ftime) => {...} }
onResize={ (space, form, size, evt) => {...} }
onAction={ (space, form, type, px, py, evt) => {...} }
/>

PtsCanvas

PtsCanvas is a component that you may extend to implement your own drawings and animations on canvas using Pts. Like this:

class MyCanvas extends PtsCanvas {
  
  animate (time, ftime, space) { 
    // your code for drawing and animation 
  }

  start (bound, space) { 
    // Optional code for canvas init 
  }

  action: (type, x, y, event) { 
    // Optional code for interaction 
  }

  resize (size, event) { 
    // Optional code for resize 
  }
}

There are 4 functions in Pts that you can (optionally) overrides: animate, start, resize, and action. See this guide to learn more about how these functions work.

Once you have implemented your own canvas, you can use it as a component like this:

import React from 'react'
import {PtsCanvas} from 'react-pts-canvas'

class Example extends React.Component {
  render () {
    return (
      <MyCanvas background="#abc" play={true} />
    )
  }
}

PtsCanvas component provides the following props:

• background
  • background fill color of the canvas. Default value is "#9ab".
• resize
  • A boolean value to indicate whether the canvas should auto resize. Default is true.
• retina
  • A boolean value to indicate whether the canvas should support retina resolution. Default is true.
• play
  • A boolean value to set whether the canvas should animate. Default is true.
• touch
  • A boolean value to set whether the canvas should track mouse and touch events. Default is true.
• name
  • The css class name of the container <div>. Default value is "pts-react". Use this class name to set custom styles in your .css file.
• style
  • Optionally override css styles of the container <div>.
• canvasStyle
  • Optionally override css styles of the <canvas> itself. Avoid using this except for special use cases.

License

Apache License 2.0. See LICENSE file for details. Copyright © 2017-2018 by William Ngan and contributors.