Airy Canvas

Powerful front-end interactive drawing board.

Quick start

Try Airy Canvas mini, a mini demo with backend.

Features

• infinite canvas
• toolbox plugins
• integration with Vuex

Basic Usage

<!-- Vue Component -->
<template>
  <airy-canvas
    :data="airyCanvasData"
    :options="airyCanvasOptions"
  />
</template>

<script>
import Vue from 'Vue'
import AiryCanvas from 'airy-canvas'

export default {
  ...,
  components: {
    AiryCanvas
  },
  data() {
    return {
      airyCanvasData: [],
      airyCanvasOptions: {
        fluid: true
      }
    }
  },
  ...
}
</script>

Options

| Attribute | Description | Type | Accepted Values | Default | | - | - | - | - | - | | width | canvas width | number | - | 800 | | height | canvas height | number | - | 600 | | fluid | resize by container size | boolean | - | false | | plugins | plugins array | array | - | [] | | store | vuex integration options | object | - | undefined |

Methods

| Name | Arguments | Return | | - | - | - | | clear | - | - | | getHistory | - | Array of history data |

Plugins (Not finished)

Want more tools in Airy Canvas? Airy Canvas accept plugins.

init with Airy Canvas

<!-- Vue Component -->
<template>
  <airy-canvas
    :data="airyCanvasData"
    :options="airyCanvasOptions"
  />
</template>

<script>
import Vue from 'Vue'
import AiryCanvas from 'airy-canvas'
import AiryCanvasPolygon from 'airy-canvas-polygon'

export default {
  ...,
  components: {
    AiryCanvas
  },
  data() {
    return {
      airyCanvasData: [],
      airyCanvasOptions: {
        fluid: true,
        plugins: [AiryCanvasPolygon]
      }
    }
  },
  ...
}
</script>

plugin hot loading

<template>
  <airy-canvas
    :data="airyCanvasData"
    :options="airyCanvasOptions"
    ref="airy-canvas"
  />
</template>

<script>
import Vue from 'Vue'
import AiryCanvas from 'airy-canvas'
import AiryCanvasPolygon from 'airy-canvas-polygon'

export default {
  ...,
  components: {
    AiryCanvas
  },
  data() {
    return {
      airyCanvasData: [],
      airyCanvasOptions: {
        fluid: true
      }
    }
  },
  methods: {
    ...
    addPolygonPlugin() {
      this.$refs['airy-canvas'].addPlugin(AiryCanvasPolygon)
    },
    ...
  },
  ...
}

integration with Vuex

<!-- Vue Component -->
<template>
  <airy-canvas
    :data="airyCanvasData"
    :options="airyCanvasOptions"
  />
</template>

<script>
import Vue from 'Vue'
import AiryCanvas from 'airy-canvas'

export default {
  ...,
  components: {
    AiryCanvas
  },
  data() {
    return {
      airyCanvasData: [],
      airyCanvasOptions: {
        fluid: true,
        store: {
          getter() => {
            return this.$store.getters.history
          },
          dispatcher(payload) {
            Store.dispatch('updateCanvas', payload)
          },
          ...
        }
      }
    }
  },
  ...
}
</script>