工程地址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 |
