vue有哪些canvas插件

1. vue-canvas

vue-canvas是一款简单易用的基于canvas的vue组件。它可以帮助你快速实现绘图，动画等各种canvas功能，同时支持props双向数据绑定，使得数据的操作更为便捷。

1.1 安装

使用npm进行安装:

npm install vue-canvas --save

1.2 基本用法

在需要使用vue-canvas的组件中引入：

import Vue from 'vue'

import VueCanvas from 'vue-canvas'
Vue.use(VueCanvas)

在模板中使用：

<vue-canvas width="600" height="400"></vue-canvas>

其中，width和height属性分别表示画布的宽度和高度。

1.3 实例方法

vue-canvas提供了以下实例方法：

draw()：绘制图形

clear()：清空画布

animate()：实现动画

line()：绘制直线

rect()：绘制矩形

circle()：绘制圆形

下面是一个绘制矩形的示例：

<vue-canvas width="600" height="400" ref="canvas"></vue-canvas>

this.$refs.canvas.drawRect({

  x: 100,
  y: 100,
  width: 200,
  height: 100,
  fillColor: 'red'
})

上述代码可以绘制一个左上角坐标为(100,100), 宽度为200，高度为100，填充颜色为红色的矩形。

2. vue-chartjs

vue-chartjs是一款基于chartjs的vue组件。它可以让你很容易地在vue项目中使用chartjs图表，而且支持在线更新图表数据。

2.1 安装

使用npm进行安装:

npm install vue-chartjs chart.js --save

2.2 基本用法

在需要使用vue-chartjs的组件中引入：

import Vue from 'vue'

import { Bar } from 'vue-chartjs'
Vue.component('bar-chart', Bar)

在模板中使用：

<bar-chart :data="data"></bar-chart>

其中，data属性是一个对象，表示图表的数据和配置。

2.3 实例方法

vue-chartjs暴露了以下实例方法：

renderChart()：绘制图表

update()：更新图表数据

addPlugin()：添加插件

afterDatasetsDraw()：绘制后回调函数

destroy()：销毁图表

下面是一个绘制饼图的示例：

<pie-chart :data="data"></pie-chart>

data: {

  labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
  datasets: [
    {
      label: '销售额',
      backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360', '#8B4E8B'],
      data: [12, 19, 3, 5, 2, 3]
    }
  ]
}

上述代码可以绘制一个包含六个数据项的饼图，每个数据项表示一月至六月的销售额。

3. vue-konva

vue-konva是一款基于Konva的Vue.js组件库。它可以帮助你快速创建各种canvas场景，动画等各种canvas功能，同时支持viewport概念，自由拖拽、缩放场景，支持多个图层，可扩展性强。

3.1 安装

使用npm进行安装:

npm install vue-konva konva --save

3.2 基本用法

在需要使用vue-konva的组件中引入：

import Vue from 'vue'

import VueKonva from 'vue-konva'
Vue.use(VueKonva)

在模板中使用：

<v-stage>

  <v-layer>
    <v-rect x="50" y="50" width="100" height="100" fill="red"></v-rect>
  </v-layer>
</v-stage>

其中，v-stage表示一个canvas容器，v-layer表示一个图层，而v-rect则表示一个矩形。

3.3 实例方法

vue-konva支持所有Konva.Node中的方法和事件。可以在组件上使用 $refs 属性获得节点实例：

<v-stage ref="stage">

  <v-layer ref="layer">
    <v-rect ref="rect" x="50" y="50" width="100" height="100" fill="red"></v-rect>
  </v-layer>
</v-stage>

然后可以通过以下方式获取节点实例：

this.$refs.stage.getNode()

this.$refs.layer.getNode()
this.$refs.rect.getNode()

下面是一个绘制圆形并实现动画效果的示例：

<template>

  <v-stage ref="stage" :config="stageConfig">
    <v-layer ref="layer">
      <v-circle ref="circle" :config="circleConfig" @click="animate"></v-circle>
    </v-layer>
  </v-stage>
</template>
<script>
import { Circle } from 'vue-konva'
export default {
  components: {
    Circle
  },
  data () {
    return {
      stageConfig: {
        width: 400,
        height: 400
      },
      circleConfig: {
        x: 200,
        y: 200,
        radius: 50,
        fill: 'red'
      }
    }
  },
  methods: {
    animate() {
      this.$refs.circle.to({
        x: Math.random() * 400,
        y: Math.random() * 400,
        duration: 0.5
      })
    }
  }
}
</script>

上述代码可以绘制一个半径为50，填充颜色为红色的圆形，并实现点击圆形后随机移动的动画效果。

总结

通过本文介绍，我们可以看到，vue有许多优秀的canvas插件，不仅能够快速帮助我们实现绘图，动画等各种canvas功能，而且具有很好的可扩展性和灵活性。