【模块示例】drawingBoard模块示例demo

马浩川 · *发表于 2019-10-17 12:00:50*

drawingBoard

drawingBoard 模块是一个手写签名模块。开发者可自定义个固定宽高（w、h）的 “frame”，该 “frame” 即是可手写签名的背景透明的画板，可将此画板固定在指定的 frame 或 window 上，从而自定义出符合自己需求的各种 UI 效果的签名功能。

该模块可以控制画布颜色和画笔颜色进行签名，并且可以保存透明背景的签名。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
label {
margin: 10px;
font-size: 24px;
}
ul {
margin-bottom: 10px;
}
ul li {
margin: 5px 10px;
padding: 5px;
color: #000;
word-wrap: break-word;
}
h1 {
text-align: center;
}
footer {
position: absolute;
bottom: 40px;
left: 0;
}
h2 {
float: left;
display: inline-block;
height: 40px;
width: 120px;
}
</style>
</head>
<body>
<h1 id='info'>画板</h1>
<footer>
<h2 onclick="openBroad()">open</h2>
<h2 onclick="saveBroad()">save</h2>
<h2 onclick="closeBroad()">close</h2>
<h2 onclick="hideBroad()">hide</h2>
<h2 onclick="showBroad()">show</h2>
<h2 onclick="restoreBroad()">restore</h2>
<h2 onclick="revokeBroad()">revoke</h2>
<h2 onclick="clearBroad()">clear</h2>
<h2 onclick="resetBrush()">resetBrush</h2>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var drawingBoard;
apiready = function() {
drawingBoard = api.require('drawingBoard');
console.log(drawingBoard);
drawingBoard.open({
rect: {
x: 0,
y: 60,
w: 'auto',
h: 300
},
styles: {
brush: {
color: '#ff0000',
width: 6
},
bgColor: '#ff0'
},
fixedOn: api.frameName
});
};
function openBroad() {
drawingBoard.open({
rect: {
x: 0,
y: 60,
w: 'auto',
h: 300
},
styles: {
brush: {
color: '#ff0000',
width: 6
},
bgColor: '#ff0'
},
fixedOn: api.frameName
});
}
function saveBroad() {
console.log(api.fsDir);
drawingBoard.save({
savePath: 'fs://image/4.png',
copyToAlbum: true,
overlay: false
}, function(ret) {
alert(JSON.stringify(ret));
});
}
function closeBroad() {
console.log(111);
drawingBoard.close();
}
function hideBroad() {
drawingBoard.hide();
}
function clearBroad() {
drawingBoard.clear();
}
function showBroad() {
drawingBoard.show();
}
function revokeBroad() {
drawingBoard.revoke();
}
function restoreBroad() {
drawingBoard.restore();
}
function resetBrush() {
drawingBoard.resetBrush({
color: '#000',
width: 6
});
}
</script>
</html>

复制代码

效果图：

angelshelter · 回复于2019-10-17 13:25:24

厉害。

易大侠 · 回复于2019-10-17 17:44:13

感谢分享

啥啥啥

小米手机画板写完不显示是怎么回是

kaiJ

感谢分享. 0. 0. 0.0 0 0.

kaiJ

感谢分享. 0. 0. 0.0 0 0.

nanerlou · 回复于2021-11-26 10:53:53

感谢分享