uniapp图片涂鸦插件(支持多种涂鸦方式，图片放大缩小)

工程地址https://gitee.com/geshijia/ct-graffiti

ct-graffiti涂鸦组件使用说明

参考说明

参考��接：https://github.com/ylyuanlu/yl-graffiti 感谢作者的付出，给我提供了一些思路，并做了如下优化：

• 增加图片放大缩小移动功能
• 添加更多涂鸦图形的选择
• 增加文字涂鸦功能 需要自己配置一个可用弹框输入文字后赋值给text(index文件384行)

  组件引用方式

  easycom方式引用

  将yl-graffiti组件放入根目录下的components中:

  |--components|    |--yl-graffiti|        |-yl-graffiti.vue|--pages|--pages.json

  然后在pages.json文件中添加easycom声明：

  {    "easycom": {        "autoscan": true,        "custom": {            "^yl-(.*)": "@/components/yl-/yl-.vue"        }    },    ...}

  代码引用

  同上，将yl-graffiti组件放入根目录下的components中或放在使用该组件页面对应的目录下，然后在页面中导入该组件：

      import ylGraffiti from "./components/yl-graffiti/yl-graffiti.vue";    export default {        components: {            ylGraffiti        },        ...    }

  示例代码

  组件使用相关代码，详细代码请参考示例工程，下面贴出主要代码。

      ...            ...    // 涂鸦组件功能由页面来控制    import ylGraffiti from "./components/yl-graffiti/yl-graffiti.vue";        export default {        components: {            ylGraffiti        },        data() {            return {            text: '',//文字            optIndex: 3,                stepInfo: { // 用来控制撤销和重做                    curStep: -1,                    len: 0                },                saving: false            }        },        ...,        methods: {            ...,                        /**             * 当前位置变化             * @param {Object} e             */            stepChanged(e) {                this.stepInfo = e;            },                        /**             * 选择涂鸦的类型             * @param {Object} index             */            selectWritingOption(index) {switch (index) {case 0:case 1:case 2:this.optIndex = index;break;case 3:this.optIndex = index;break;case 4:this.$refs.graffiti.repeal();break;case 5:this.$refs.graffiti.redo();break;case 6:this.$refs.graffiti.clearBoard();break;default:break;}},                /**             * 保存涂鸦             */            savePicture() {                this.saving = true;                this.$refs.graffiti.saveCanvas().then(res => {                    this.pictures[this.swiperCurrent].url = res;                    setTimeout(_ => this.saving = this.writing = false, 100);                });            }        }    }

  组件接口

  属性

  参数	说明	类型	默认值
  canvasId	画布ID	string	MyCanvas
  width	画布宽度	number	300
  height	画布高度	number	225
  shape	画笔绘制图形形状	string	curve
  lineColor	画笔颜色	string	#091A22
  lineWidth	画笔宽度	number	5
  bgColor	背景颜色	string
  bgImage	背景图片	string
  text	文字涂鸦	string	文字文字
  optIndex	当前选择功能	string、number	3