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
1
2
3
4
5

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

{
    "easycom": {
        "autoscan": true,
        "custom": {
            "^yl-(.*)": "@/components/yl-$1/yl-$1.vue"
        }
    },
    ...
}
1
2
3
4
5
6
7
8
9

代码引用

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

<script>
    import ylGraffiti from "./components/yl-graffiti/yl-graffiti.vue";
    export default {
        components: {
            ylGraffiti
        },
        ...
    }
</script>
1
2
3
4
5
6
7
8
9

示例代码

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

组件接口

属性