24eme/signaturepdf
24eme/signaturepdf
1
0
Fork 0
mirror of https://github.com/24eme/signaturepdf.git synced 2023-08-25 09:33:08 +02:00
Code Issues Releases Wiki Activity

Transformation du texte avec une police originale en chemin svg

Browse Source
This commit is contained in:
Vincent LAURENT 2021-09-20 22:49:44 +02:00
parent 6d50b1a87e
commit c563595bd2
4 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
font/Caveat-Regular.ttf Normal file
View File

Binary file not shown.

18
js/app.js
View File

@ -5,10 +5,17 @@ var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified. // The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js'; pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
// Asynchronous download of PDF // Asynchronous download of PDF
var loadingTask = pdfjsLib.getDocument(url); var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) { loadingTask.promise.then(function(pdf) {
var fontCaveat = null;
opentype.load('font/Caveat-Regular.ttf', function(err, font) {
fontCaveat = font;
});
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), { var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
backgroundColor: 'rgba(255, 255, 255, 0)', backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)', penColor: 'rgb(0, 0, 0)',
@ -99,12 +106,11 @@ loadingTask.promise.then(function(pdf) {
} }
if(document.getElementById('radio_signature_text').checked) { if(document.getElementById('radio_signature_text').checked) {
var textSignature = new fabric.Text(document.getElementById('input-text-signature').value, { var fontPath = fontCaveat.getPath(document.getElementById('input-text-signature').value, 0, 0, 42);
fontFamily: 'Caveat' var fabricPath = new fabric.Path(fontPath.toPathData());
}); fabricPath.top = y - (fabricPath.getScaledHeight() / 2);
textSignature.top = y - (textSignature.getScaledHeight() / 2); fabricPath.left = x - (fabricPath.getScaledWidth() / 2);
textSignature.left = x - (textSignature.getScaledWidth() / 2); canvasEdition.add(fabricPath).renderAll();
canvasEdition.add(textSignature).renderAll();
} }
if(document.getElementById('radio_signature_text_classic').checked) { if(document.getElementById('radio_signature_text_classic').checked) {

2
js/opentype.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
pdf.html.php
View File

@ -20,7 +20,7 @@
<aside class="col-lg-2 col-md-3 col-sm-4 col-xs-6 mt-2 position-fixed end-0 bg-white"> <aside class="col-lg-2 col-md-3 col-sm-4 col-xs-6 mt-2 position-fixed end-0 bg-white">
<div class="form-check form-switch float-end"><input class="form-check-input" type="radio" name="radio_signature" id="radio_signature_pad"></div> <div class="form-check form-switch float-end"><input class="form-check-input" type="radio" name="radio_signature" id="radio_signature_pad"></div>
<h5><i class="bi bi-vector-pen"></i> À main lever</h5> <h5><i class="bi bi-vector-pen"></i> À main lever</h5>
<canvas id="signature-pad" class="border bg-light" width=200 height=150></canvas> <canvas id="signature-pad" class="border bg-light" width=235 height=125></canvas>
<hr /> <hr />
<div class="form-check form-switch float-end"><input class="form-check-input" type="radio" name="radio_signature" id="radio_signature_text"></div> <div class="form-check form-switch float-end"><input class="form-check-input" type="radio" name="radio_signature" id="radio_signature_text"></div>
<h5><i class="bi bi-fonts"></i> Texte à la main</h5> <h5><i class="bi bi-fonts"></i> Texte à la main</h5>
@ -54,5 +54,6 @@
var url = '/data/<?php echo $key ?>.pdf'; var url = '/data/<?php echo $key ?>.pdf';
</script> </script>
<script src="/js/app.js"></script> <script src="/js/app.js"></script>
<script src="/js/opentype.min.js"></script>
</body> </body>
</html> </html>