工程地址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-$1/yl-$1.vue"}},...
}

代码引用

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

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

示例代码

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

<view>...<yl-graffiti ref="graffiti" canvas-id="myCanvas" :width="canvasStyle.w" :height="canvasStyle.h":shape="curShape" :lineColor="lineColor" :lineWidth="lineSize" :bgImage="picture"@stepChanged="stepChanged" :text="text" :optIndex="optIndex"></yl-graffiti><!-- 涂鸦组件控制视图，省略 -->...
</view>
<script>// 涂鸦组件功能由页面来控制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);});}}}
</script>

组件接口

属性

参数	说明	类型	默认值
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