问题描述
我对 angularjs 还很陌生，我正在尝试将 szimek 的 signature_pad 库集成到我的应用程序中。基本上我有一个引导选项卡，用于接受用户签名的不同方法。一个是在第一个选项卡的输入字段中输入名称，第二个是在第二个选项卡中绘制签名（这是这个库出现的地方），第三个是上传图像。 这些选项卡位于模态内，如下所示：
我参考了文档 Demo 中的演示，您会发现 90% 的代码仅从演示中复制而来，直接从 HTML 复制到 Js 和 CSS。
现在的问题是，首先，即使调用了调整大小函数，我的画布也没有正确获得高度和宽度。 offsetWidth 和 offsetHeight 始终为 0，因此画布无法获得正确的高度和宽度。现在，即使我注释掉 resizeCanvas 函数并对画布的高度和宽度进行硬编码，画布也会获取尺寸但无法在其上绘制任何内容，即点击时未注册点。
这是我的 JS 代码：
$scope.showSignaturePopup = (documentData) => {
$("#signaturePopup").modal("show");
$scope.signatureName = '';
$scope.signatureFont = '';
$scope.documentData = documentData;
$scope.documentPreviewEnabled = true;
$scope.wrapper = document.getElementById("signature-pad");
$scope.canvas = $scope.wrapper.querySelector("canvas");
$scope.signaturePad = new SignaturePad($scope.canvas,{
// It's Necessary to use an opaque color when saving image as JPEG;
// this option can be omitted if only saving as PNG or SVG
backgroundColor: 'rgb(255,255,255)'
});
// console.log('$scope.signaturePad,$scope.canvas -------> ',$scope.signaturePad,$scope.canvas);
window.onresize = $scope.resizeCanvas;
$scope.resizeCanvas();
}
$scope.resizeCanvas = () => {
$scope.ratio = Math.max(window.devicePixelRatio || 1,1);
$scope.canvas.width = $scope.canvas.offsetWidth * $scope.ratio;
$scope.canvas.height = $scope.canvas.offsetHeight * $scope.ratio;
$scope.canvas.getContext("2d").scale($scope.ratio,$scope.ratio);
console.log('$scope.canvas.width,$scope.canvas.height -------> ',$scope.canvas.width,$scope.canvas.height);
console.log('$scope.canvas.offsetWidth,$scope.canvas.offsetHeight -------> ',$scope.canvas.offsetWidth,$scope.canvas.offsetHeight);
console.log('$scope.ratio -------> ',$scope.ratio);
$scope.signaturePad.clear();
console.log('$scope.signaturePad,$scope.canvas);
}
$scope.saveSign = () => {
console.log('signaturePad.toDataURL() -------> ',$scope.signaturePad.toDataURL());
}
这是我的 HTML 代码
<div id="signaturePopup" class="modal erpModal fade" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<!-- Modal content-->
<form name="signForm" class="erpForm" ng-submit="" novalidate>
<div class="modal-content">
<div class="modal-header greyBg">
<button type="button" class="close" ng-click="" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-weight: bold;">Sign Document</h4>
</div>
<div class="modal-body longModal">
<!-- Signature Acceptance section -->
<div class="padd15">
<ul class="signatureTabs nav nav-tabs">
<li class="active"><a class="signatureTab" data-toggle="tab" data-target="#typeSign" role="tab" data-toggle="tab">Type</a></li>
<li><a class="signatureTab" data-toggle="tab" data-target="#drawSign" role="tab" data-toggle="tab">Draw</a></li>
<li><a class="signatureTab" data-toggle="tab" data-target="#menu2" role="tab" data-toggle="tab">Upload</a></li>
</ul>
<div class="tab-content">
<div id="typeSign" class="tab-pane fade in active">
<div class="marTop20 marBottom20 f-15">Create your signature by typing your full name.</div>
<div id="signatureNameContainer">
<input type="text" ng-model="signatureName" class="erpInput">
</div>
</div>
<div id="drawSign" class="tab-pane fade">
<h3>Menu 1</h3>
<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button" data-action="change-color">Change color</button>
<button type="button" class="button" data-action="undo">Undo</button>
</div>
<div>
<button type="button" class="button save" data-action="save-png" ng-click="saveSign()">Save as PNG</button>
</div>
</div>
</div>
</div>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,totam rem aperiam.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-default greyBtn custBtn" data-dismiss="modal" ng-click="">Cancel</button>
<button type="submit" class="btn btn-default yellowBtn custBtn" ng-click="">Submit</button>
<button type="submit" class="btn btn-default yellowBtn custBtn" ng-click="documentPreviewEnabled = false">Add Signature</button>
</div>
</div>
</form>
</div>
</div>
这是我的 CSS：
.signature-pad {
position: relative;
display: -webkit-Box;
display: -ms-flexBox;
display: flex;
-webkit-Box-orient: vertical;
-webkit-Box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 10px;
width: 100%;
height: 100%;
max-width: 700px;
max-height: 460px;
border: 1px solid #e8e8e8;
background-color: #fff;
Box-shadow: 0 1px 4px rgba(0,0.27),0 0 40px rgba(0,0.08) inset;
border-radius: 4px;
padding: 16px;
}
.signature-pad::before,.signature-pad::after {
position: absolute;
z-index: -1;
content: "";
width: 40%;
height: 10px;
bottom: 10px;
background: transparent;
Box-shadow: 0 8px 12px rgba(0,0.4);
}
.signature-pad::before {
left: 20px;
-webkit-transform: skew(-3deg) rotate(-3deg);
transform: skew(-3deg) rotate(-3deg);
}
.signature-pad::after {
right: 20px;
-webkit-transform: skew(3deg) rotate(3deg);
transform: skew(3deg) rotate(3deg);
}
.signature-pad--body {
position: relative;
-webkit-Box-flex: 1;
-ms-flex: 1;
flex: 1;
border: 1px solid #f4f4f4;
}
.signature-pad--body
canvas {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 4px;
Box-shadow: 0 0 5px rgba(0,0.02) inset;
}
.signature-pad--footer {
color: #C3C3C3;
text-align: center;
font-size: 1.2em;
margin-top: 8px;
}
.signature-pad--actions {
display: -webkit-Box;
display: -ms-flexBox;
display: flex;
-webkit-Box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 8px;
}
我也尝试创建一个 JS 小提琴，但我不知道如何创建 angularjs 应用程序。这是链接 - JSFiddle。这不起作用。
请大家帮忙。希望你能帮助一个菜鸟。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）