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>
复制代码效果图:
|