用tui-image-editor实现画图

tui-image-editor 是一个基于 JavaScript 和 HTML5 Canvas 的开源图像编辑器，可以实现图像裁剪、旋转、缩放、滤镜、涂鸦等功能。

下面是一个使用 tui-image-editor 实现画图的示例代码：

1. 安装 tui-image-editor

可以使用 npm 或 yarn 安装 tui-image-editor：

npm install tui-image-editor --save
# 或者
yarn add tui-image-editor

2. 在组件中引入 tui-image-editor

可以通过 CDN 或模块化方式引入 tui-image-editor：

<template>
  <div ref="editor"></div>
</template>

<script>
import ImageEditor from 'tui-image-editor';

export default {
  name: 'DrawImage',
  mounted() {
    const editor = new ImageEditor(this.$refs.editor, {
      includeUI: {
        loadImage: {
          path: 'https://img-cdn-qiniu.dcloud.net.cn/images/paint.jpg',
          name: 'SampleImage',
        },
        theme: {
          // 主题配置
        },
        menu: ['shape', 'filter'],
        initMenu: 'filter',
        uiSize: {
          // UI 大小配置
        },
      },
      cssMaxWidth: 700,
      cssMaxHeight: 500,
      selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70,
      },
    });
  },
}
</script>

在上面的代码中，我们在组件的 template 中添加了一个 div 元素，并使用 ref 属性获取其引用。

在 mounted 钩子函数中，我们通过 new ImageEditor() 创建了一个新的 tui-image-editor 实例，并将其绑定到组件的 $refs.editor 属性上。

通过 includeUI 属性可以配置 tui-image-editor 的 UI 界面，包括加载图片、主题、菜单、UI 大小等。

3. 在组件中使用 tui-image-editor 的 API

可以通过 tui-image-editor 实例的 API 来实现各种画图功能。例如，我们可以在组件中添加一个按钮，点击按钮后在图像上绘制一条线段。

<template>
  <div>
    <div ref="editor"></div>
    <button @click="drawLine">绘制线段</button>
  </div>
</template>

<script>
import ImageEditor from 'tui-image-editor';

export default {
  name: 'DrawImage',
  mounted() {
    this.editor = new ImageEditor(this.$refs.editor, {
      includeUI: {
        loadImage: {
          path: 'https://img-cdn-qiniu.dcloud.net.cn/images/paint.jpg',
          name: 'SampleImage',
        },
        theme: {
          // 主题配置
        },
        menu: ['shape', 'filter'],
        initMenu: 'filter',
        uiSize: {
          // UI 大小配置
        },
      },
      cssMaxWidth: 700,
      cssMaxHeight: 500,
      selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70,
      },
    });
  },
  methods: {
    drawLine() {
      const activeObj = this.editor._graphics.getActiveObject();
      const points = [
        { x: activeObj.left + 50, y: activeObj.top + 50 },
        { x: activeObj.left + 100, y: activeObj.top + 100 },
      ];
      const line = new fabric.Line(points, {
        strokeWidth: 5,
        fill: 'red',
        stroke: 'red',
        originX: 'left',
        originY: 'top',
      });
      this.editor._graphics.add(line);
      this.editor._graphics.renderAll();
      this.editor._graphics.setActiveObject(line);
    },
  },
}
</script>

在上面的代码中，我们使用了 tui-image-editor 实例的 _graphics 属性来获取当前图像的画布对象，并使用 fabric.js 中的 Line 类来创建一条线段。然后将线段添加到画布对象中，并调用 renderAll() 方法重新渲染画布。

最后，我们使用 setActiveObject() 方法将新创建的线段设为当前选中对象。