1.4.2 • Published 3 years ago
white-board-mini v1.4.2
white-board-mini
小程序canvas画写板组件。
下载
使用npm:
$ npm install -S white-board-mini
演示
使用
// index.wxml
<board init-data="{{ boardData }}" class="board-comp" />
// boardData结构
boardData = {
disabled: false,
canvasSettings: {
inputType: 'fountain-pen',
lineWidth: 2,
strokeStyle: '#039be5'
},
zIndexInfo: [{
"update": true,
"inputType": "fountain-pen",
"color": "#9100FF",
"page": 1,
"size": 6,
"zIndex": 1,
"content": [],
"other": {
"img": [],
"audio": [],
"video": [],
"N2": []
}
}, {
"update": true,
"inputType": "fountain-pen",
"color": "#9100FF",
"page": 1,
"size": 6,
"zIndex": 2,
"content": [],
"other": {
"img": [],
"audio": [],
"video": [],
"N2": []
}
}, {
"update": true,
"inputType": "fountain-pen",
"color": "#9100FF",
"page": 1,
"size": 6,
"zIndex": 3,
"content": [{"p":[4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096,4096],"x":[57,61,70,86,109,144,198,259,329,390,452,493,519,535,547,559,571,583,593,603,610,614,614,614,614,614,614,614],"y":[65,65,70,81,96,117,144,173,206,238,271,294,308,317,324,330,333,337,339,342,343,344,345,345,345,345,345,345],"canvasSettings":{"strokeStyle":"#E95E57","lineWidth":2,"lineCap":"round","inputType":"fountain-pen"}},{"p":[4096,4096,4096,4096,4096,4096,4096,4096,4096,4096],"x":[164,163,163,173,209,258,327,380,411,418],"y":[383,381,381,399,448,505,569,610,628,629],"canvasSettings":{"strokeStyle":"#E95E57","lineWidth":2,"lineCap":"round","inputType":"fountain-pen"}},{"p":[4096,4096,4096,4096,4096,4096,4096,4096,4096],"x":[332,327,314,289,259,232,212,205,205],"y":[393,398,430,490,551,604,640,653,653],"canvasSettings":{"strokeStyle":"#E95E57","lineWidth":2,"lineCap":"round","inputType":"fountain-pen"}},{"p":[4096,4096,4096,4096,4096,4096,4096,4096,4096],"x":[349,361,389,441,507,554,585,592,591],"y":[371,386,427,497,563,602,623,626,618],"canvasSettings":{"strokeStyle":"#E95E57","lineWidth":2,"lineCap":"round","inputType":"fountain-pen"}},{"p":[4096,4096,4096,4096,4096,4096,4096],"x":[494,486,464,428,386,356,338],"y":[442,448,482,528,575,613,637],"canvasSettings":{"strokeStyle":"#E95E57","lineWidth":2,"lineCap":"round","inputType":"fountain-pen"}},{"p":[4096,4096,4096,4096,4096,4096,4096,4096],"x":[494,494,489,460,391,299,211,154],"y":[87,87,88,106,146,200,252,287],"canvasSettings":{"strokeStyle":"#E95E57","lineWidth":2,"lineCap":"round","inputType":"fountain-pen"}}],
"other": {
"img": [],
"audio": [],
"video": [],
"N2": []
},
"containerRect": {
"width": 635,
"height": 760
}
}],
rubberRange: 20
};
API
设置
const compInstance = this.selectComponent('.board-comp');
const newSettings = {
inputType: 'rubber',
lineWidth: 6,
strokeStyle: '#000000'
};
instance.setSettings({
...newSettings
});
保存
const compInstance = this.selectComponent('.board-comp');
const data = compInstance.getBoardData();
console.log(data);
禁用/取消禁用
const compInstance = this.selectComponent('.board-comp');
// boolean: true - 禁用 false - 启用
instance.disable(boolean);
1.4.2
3 years ago
1.4.1
3 years ago
1.4.0
3 years ago
1.3.9
3 years ago
1.3.8
3 years ago
1.3.7
3 years ago
1.3.6
3 years ago
1.3.5
4 years ago
1.3.4
4 years ago
1.3.3
4 years ago
1.3.2
4 years ago
1.3.1
4 years ago
1.3.0
4 years ago
1.2.2
4 years ago
1.2.1
4 years ago
1.2.0
4 years ago
1.1.9
4 years ago
1.1.8
4 years ago
1.1.7
4 years ago
1.1.6
4 years ago
1.1.5
4 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.2
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago