Question

我正在尝试在我的代码中添加一个签名板，但是因为这是启动一个div元素并将scribble区域放入其中。我很震惊。 http://www.zetakey.com/codesample-signature.php

<script>
<div id="canvas"></div>
function signature() {
signatureCapture();
var canvas = document.getElementById("newSignature");
var dataURL = canvas.toDataURL("image/png");
alert(dataURL);
}
</script>

那么如何直接在视野中启动提前谢谢。

Answer 1

我不确定我是否能够正确使用，但是可以选择使用您提供的库。

我建议您使用sap.ui.core.HTML组件添加将实例化签名板的相关html代码。为此，您需要在项目中使用Signature.js文件（从站点下载），并进行微小的更改。

请检查代码示例。

<强>的index.html

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

    <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
        data-sap-ui-libs="sap.m" 
        data-sap-ui-theme="sap_goldreflection">
    </script>

<script>
    sap.ui.localResources("util");
    sap.ui.localResources("test");
    jQuery.sap.require("util.Signature");
    var view = sap.ui.view({id:"idApp1", viewName:"teste.App", type:sap.ui.core.mvc.ViewType.JS});
    view.placeAt("content");                
</script>

</head>
<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>
</html>

<强>测试/ App.view.js

sap.ui.jsview("test.App", {

    /** Specifies the Controller belonging to this View. 
    * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
    * @memberOf teste.App
    */ 
    getControllerName : function() {
        return "test.App";
    },

    /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
    * Since the Controller is given to this method, its event handlers can be attached right away. 
    * @memberOf test.App
    */ 
    createContent : function(oController) {

        var mySignature = '<div id="wrapper"> ' +
        '            <p>Zetakey Signature Webapp</p> ' +
        '            <div id="canvas"> ' +
        '                Canvas is not supported. ' +
        '            </div> ' +
        ' ' +
        '            <script> ' +
        '                signatureCapture(); ' +
        '            </script> ' +
        '        </div>';

        var myhtml = new sap.ui.core.HTML();
        myhtml.setContent(mySignature);

        var clearBtn = new sap.m.Button({text: "Clear Signature", tap: function(evt) {
            signatureClear();
        }});

        return new sap.m.Page({
            title: "Title",
            content: [
                      myhtml,
                      clearBtn
            ]
        });
    },

});

util / Signature.js （已下载，但我添加了第一行，使其成为ui5模块）

jQuery.sap.declare("util.Signature");

/*************************************************

 Signsend - The signature capture webapp sample using HTML5 Canvas

 Author: Jack Wong <jack.wong@zetakey.com>
 Copyright (c): 2014 Zetakey Solutions Limited, all rights reserved

 ...THE REST OF THE FILE...

这对你有用吗？让我知道。

问候。

Answer 2

实际上，我已经为此创建了一个签名板控件。这样您就可以将签名板代码封装在一个控件中。 http://jsbin.com/suquki/18/edit

-D

如何在sapui5页面中创建div

2 个答案: