1. Accueil
  2. Question et réponse
  3. Étendre javascript pour utiliser plusieurs boîtes de toile

Étendre javascript pour utiliser plusieurs boîtes de toile

2017-10-02 5 views
1

J'ai très peu de connaissances de javascript, malheureusement. Je suis en train de travailler sur un script. Je veux signer des fichiers en ligne, possible avec n'importe quel type d'écran tactile. J'ai un script en ligne qui fournit une petite boîte de toile avec des fonctionnalités de signature. Malheureusement, mes compétences javascript sont trop mauvaises pour l'utiliser comme je le veux.Étendre javascript pour utiliser plusieurs boîtes de toile

var isSign = false; 
 
\t \t var leftMButtonDown = false; 
 
\t \t 
 
\t \t jQuery(function(){ 
 
\t \t \t //Initialize sign pad 
 
\t \t \t init_Sign_Canvas(); 
 
\t \t }); 
 
\t \t 
 
\t \t function fun_submit() { 
 
\t \t \t if(isSign) { 
 
\t \t \t \t var canvas = $("#canvas").get(0); 
 
\t \t \t \t var imgData = canvas.toDataURL(); 
 
\t \t \t \t jQuery('#page').find('p').remove(); 
 
\t \t \t \t jQuery('#page').find('img').remove(); 
 
\t \t \t \t jQuery('#page').append(jQuery('<p>Your Sign:</p>')); 
 
\t \t \t \t jQuery('#page').append($('<img/>').attr('src',imgData)); 
 
\t \t \t \t 
 
\t \t \t \t closePopUp(); 
 
\t \t \t } else { 
 
\t \t \t \t alert('Please sign'); 
 
\t \t \t } 
 
\t \t } 
 
\t \t 
 
\t \t function closePopUp() { 
 
\t \t \t jQuery('#divPopUpSignContract').popup('close'); 
 
\t \t \t jQuery('#divPopUpSignContract').popup('close'); 
 
\t \t } 
 
\t \t 
 
\t \t function init_Sign_Canvas() { 
 
\t \t \t isSign = false; 
 
\t \t \t leftMButtonDown = false; 
 
\t \t \t 
 
\t \t \t //Set Canvas width 
 
\t \t \t var sizedWindowWidth = $(window).width(); 
 
\t \t \t if(sizedWindowWidth > 700) 
 
\t \t \t \t sizedWindowWidth = $(window).width()/2; 
 
\t \t \t else if(sizedWindowWidth > 400) 
 
\t \t \t \t sizedWindowWidth = sizedWindowWidth - 100; 
 
\t \t \t else 
 
\t \t \t \t sizedWindowWidth = sizedWindowWidth - 50; 
 
\t \t \t 
 
\t \t \t $("#canvas").width(200); 
 
\t \t \t $("#canvas").height(50); 
 
\t \t \t $("#canvas").css("border","1px solid #000"); 
 
\t \t \t 
 
\t \t \t var canvas = $("#canvas").get(0); 
 
\t \t \t 
 
\t \t \t canvasContext = canvas.getContext('2d'); 
 

 
\t \t \t if(canvasContext) 
 
\t \t \t { 
 
\t \t \t \t canvasContext.canvas.width = 200; 
 
\t \t \t \t canvasContext.canvas.height = 50; 
 

 
\t \t \t \t canvasContext.fillStyle = "#fff"; 
 
\t \t \t \t canvasContext.fillRect(0,0,sizedWindowWidth,200); 
 
\t \t \t \t 
 
\t \t \t \t canvasContext.moveTo(50,150); 
 
\t \t \t \t canvasContext.lineTo(sizedWindowWidth-50,150); 
 
\t \t \t \t canvasContext.stroke(); 
 
\t \t \t \t 
 
\t \t \t \t canvasContext.fillStyle = "#000"; 
 
\t \t \t \t canvasContext.font="20px Arial"; 
 
\t \t \t \t canvasContext.fillText("x",40,155); 
 
\t \t \t } 
 
\t \t \t // Bind Mouse events 
 
\t \t \t $(canvas).on('mousedown', function (e) { 
 
\t \t \t \t if(e.which === 1) { 
 
\t \t \t \t \t leftMButtonDown = true; 
 
\t \t \t \t \t canvasContext.fillStyle = "#000"; 
 
\t \t \t \t \t var x = e.pageX - $(e.target).offset().left; 
 
\t \t \t \t \t var y = e.pageY - $(e.target).offset().top; 
 
\t \t \t \t \t canvasContext.moveTo(x, y); 
 
\t \t \t \t } 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t \t return false; 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t $(canvas).on('mouseup', function (e) { 
 
\t \t \t \t if(leftMButtonDown && e.which === 1) { 
 
\t \t \t \t \t leftMButtonDown = false; 
 
\t \t \t \t \t isSign = true; 
 
\t \t \t \t } 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t \t return false; 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t // draw a line from the last point to this one 
 
\t \t \t $(canvas).on('mousemove', function (e) { 
 
\t \t \t \t if(leftMButtonDown == true) { 
 
\t \t \t \t \t canvasContext.fillStyle = "#000"; 
 
\t \t \t \t \t var x = e.pageX - $(e.target).offset().left; 
 
\t \t \t \t \t var y = e.pageY - $(e.target).offset().top; 
 
\t \t \t \t \t canvasContext.lineTo(x,y); 
 
\t \t \t \t \t canvasContext.stroke(); 
 
\t \t \t \t } 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t \t return false; 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t //bind touch events 
 
\t \t \t $(canvas).on('touchstart', function (e) { 
 
\t \t \t \t leftMButtonDown = true; 
 
\t \t \t \t canvasContext.fillStyle = "#000"; 
 
\t \t \t \t var t = e.originalEvent.touches[0]; 
 
\t \t \t \t var x = t.pageX - $(e.target).offset().left; 
 
\t \t \t \t var y = t.pageY - $(e.target).offset().top; 
 
\t \t \t \t canvasContext.moveTo(x, y); 
 
\t \t \t \t 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t \t return false; 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t $(canvas).on('touchmove', function (e) { 
 
\t \t \t \t canvasContext.fillStyle = "#000"; 
 
\t \t \t \t var t = e.originalEvent.touches[0]; 
 
\t \t \t \t var x = t.pageX - $(e.target).offset().left; 
 
\t \t \t \t var y = t.pageY - $(e.target).offset().top; 
 
\t \t \t \t canvasContext.lineTo(x,y); 
 
\t \t \t \t canvasContext.stroke(); 
 
\t \t \t \t 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t \t return false; 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t $(canvas).on('touchend', function (e) { 
 
\t \t \t \t if(leftMButtonDown) { 
 
\t \t \t \t \t leftMButtonDown = false; 
 
\t \t \t \t \t isSign = true; 
 
\t \t \t \t } 
 
\t \t \t 
 
\t \t \t }); 
 
\t \t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="canvas">Canvas is not supported</canvas>

J'ai besoin 3 boîtes de toile, qui peuvent être signés parallèlement les uns aux autres. Est-il possible de me donner un indice ou un tutoriel ou quelque chose qui me fera comprendre ce que j'ai besoin de changer?

Source

2017-10-02 YXCD

+0

Que voulez-vous dire par: « Je veux signer des fichiers en ligne, possible avec tout type d'écran tactile. »? Pouvez-vous être plus précis sur ce que vous voulez réaliser? – jahller

+0

J'ai vraiment échoué à expliquer ce que je voulais dire, désolé à ce sujet. mon problème est que j'ai besoin de 3 champs. Chaque champ doit être signé par une personne différente et à la fin il devrait y avoir 3 fichiers png générés avec les 3 signatures, donc je peux produire le fichier PDF. C'est vraiment ce que je voulais dire .. Désolé .. – YXCD

Répondre

0

Vous ne savez pas exactement si c'est ce que vous voulez dire (peut-être trois boîtes de connexion indépendantes?).

Utilisez 3 éléments HTML5 <canvas> et initialisez-les. Utilisez ensuite la fonction drawImage() pour copier la première image de canevas dans le contexte canevas des deux autres.

var isSign = false; 
 
\t \t var leftMButtonDown = false; 
 
\t \t 
 
\t \t jQuery(function(){ 
 
\t \t \t //Initialize sign pad 
 
\t \t \t init_Sign_Canvas(); 
 
\t \t }); 
 
\t \t 
 
\t \t function fun_submit() { 
 
\t \t \t if(isSign) { 
 
\t \t \t \t var canvas = $("#canvas").get(0); 
 
\t \t \t \t var imgData = canvas.toDataURL(); 
 
\t \t \t \t jQuery('#page').find('p').remove(); 
 
\t \t \t \t jQuery('#page').find('img').remove(); 
 
\t \t \t \t jQuery('#page').append(jQuery('<p>Your Sign:</p>')); 
 
\t \t \t \t jQuery('#page').append($('<img/>').attr('src',imgData)); 
 
\t \t \t \t 
 
\t \t \t \t closePopUp(); 
 
\t \t \t } else { 
 
\t \t \t \t alert('Please sign'); 
 
\t \t \t } 
 
\t \t } 
 
\t \t 
 
\t \t function closePopUp() { 
 
\t \t \t jQuery('#divPopUpSignContract').popup('close'); 
 
\t \t \t jQuery('#divPopUpSignContract').popup('close'); 
 
\t \t } 
 
\t \t 
 
\t \t function init_Sign_Canvas() { 
 
\t \t \t isSign = false; 
 
\t \t \t leftMButtonDown = false; 
 
\t \t \t 
 
\t \t \t //Set Canvas width 
 
\t \t \t var sizedWindowWidth = $(window).width(); 
 
\t \t \t if(sizedWindowWidth > 700) 
 
\t \t \t \t sizedWindowWidth = $(window).width()/2; 
 
\t \t \t else if(sizedWindowWidth > 400) 
 
\t \t \t \t sizedWindowWidth = sizedWindowWidth - 100; 
 
\t \t \t else 
 
\t \t \t \t sizedWindowWidth = sizedWindowWidth - 50; 
 
\t \t \t 
 
\t \t \t $("#canvas").width(200); 
 
\t \t \t $("#canvas").height(50); 
 
\t \t \t $("#canvas").css("border","1px solid #000"); 
 
\t \t \t $("#canvas2").width(200); 
 
\t \t \t $("#canvas2").height(50); 
 
\t \t \t $("#canvas2").css("border","1px solid #000"); 
 
\t \t \t $("#canvas3").width(200); 
 
\t \t \t $("#canvas3").height(50); 
 
\t \t \t $("#canvas3").css("border","1px solid #000"); 
 

 
\t \t \t var canvas = $("#canvas").get(0); 
 
\t \t \t var canvas2 = $("#canvas2").get(0); 
 
\t \t \t var canvas3 = $("#canvas3").get(0); 
 

 
\t \t \t canvasContext = canvas.getContext('2d'); 
 
      canvas2ctx = canvas2.getContext('2d'); 
 
      canvas3ctx = canvas3.getContext('2d'); 
 
\t \t \t if(canvasContext) 
 
\t \t \t { 
 
\t \t \t \t canvasContext.canvas.width = 200; 
 
\t \t \t \t canvasContext.canvas.height = 50; 
 
       canvas2ctx.canvas.width = 200; 
 
\t \t \t \t canvas2ctx.canvas.height = 50; 
 
       canvas3ctx.canvas.width = 200; 
 
\t \t \t \t canvas3ctx.canvas.height = 50; 
 
\t \t \t \t canvasContext.fillStyle = "#fff"; 
 
\t \t \t \t canvasContext.fillRect(0,0,sizedWindowWidth,200); 
 
\t \t \t \t 
 
\t \t \t \t canvasContext.moveTo(50,150); 
 
\t \t \t \t canvasContext.lineTo(sizedWindowWidth-50,150); 
 
\t \t \t \t canvasContext.stroke(); 
 
\t \t \t \t 
 
\t \t \t \t canvasContext.fillStyle = "#000"; 
 
\t \t \t \t canvasContext.font="20px Arial"; 
 
\t \t \t \t canvasContext.fillText("x",40,155); 
 
\t \t \t } 
 
\t \t \t // Bind Mouse events 
 
\t \t \t $(canvas).on('mousedown', function (e) { 
 
\t \t \t \t if(e.which === 1) { 
 
\t \t \t \t \t leftMButtonDown = true; 
 
\t \t \t \t \t canvasContext.fillStyle = "#000"; 
 
\t \t \t \t \t var x = e.pageX - $(e.target).offset().left; 
 
\t \t \t \t \t var y = e.pageY - $(e.target).offset().top; 
 
\t \t \t \t \t canvasContext.moveTo(x, y); 
 
\t \t \t \t } 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t \t return false; 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t $(canvas).on('mouseup', function (e) { 
 
\t \t \t \t if(leftMButtonDown && e.which === 1) { 
 
\t \t \t \t \t leftMButtonDown = false; 
 
\t \t \t \t \t isSign = true; 
 
        canvas2ctx.drawImage(canvas,0,0); 
 
        canvas3ctx.drawImage(canvas,0,0); 
 
\t \t \t \t } 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t \t return false; 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t // draw a line from the last point to this one 
 
\t \t \t $(canvas).on('mousemove', function (e) { 
 
\t \t \t \t if(leftMButtonDown == true) { 
 
\t \t \t \t \t canvasContext.fillStyle = "#000"; 
 
\t \t \t \t \t var x = e.pageX - $(e.target).offset().left; 
 
\t \t \t \t \t var y = e.pageY - $(e.target).offset().top; 
 
\t \t \t \t \t canvasContext.lineTo(x,y); 
 
\t \t \t \t \t canvasContext.stroke(); 
 
\t \t \t \t } 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t \t return false; 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t //bind touch events 
 
\t \t \t $(canvas).on('touchstart', function (e) { 
 
\t \t \t \t leftMButtonDown = true; 
 
\t \t \t \t canvasContext.fillStyle = "#000"; 
 
\t \t \t \t var t = e.originalEvent.touches[0]; 
 
\t \t \t \t var x = t.pageX - $(e.target).offset().left; 
 
\t \t \t \t var y = t.pageY - $(e.target).offset().top; 
 
\t \t \t \t canvasContext.moveTo(x, y); 
 
\t \t \t \t 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t \t return false; 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t $(canvas).on('touchmove', function (e) { 
 
\t \t \t \t canvasContext.fillStyle = "#000"; 
 
\t \t \t \t var t = e.originalEvent.touches[0]; 
 
\t \t \t \t var x = t.pageX - $(e.target).offset().left; 
 
\t \t \t \t var y = t.pageY - $(e.target).offset().top; 
 
\t \t \t \t canvasContext.lineTo(x,y); 
 
\t \t \t \t canvasContext.stroke(); 
 
\t \t \t \t 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t \t return false; 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t $(canvas).on('touchend', function (e) { 
 
\t \t \t \t if(leftMButtonDown) { 
 
\t \t \t \t \t leftMButtonDown = false; 
 
\t \t \t \t \t isSign = true; 
 
\t \t \t \t } 
 
\t \t \t 
 
\t \t \t }); 
 
\t \t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="canvas">Canvas is not supported</canvas> 
 
<canvas id="canvas2">Canvas is not supported</canvas> 
 
<canvas id="canvas3">Canvas is not supported</canvas>

Source

2017-10-02 10:53:55

+0

J'ai vraiment échoué à expliquer ce que je voulais dire, désolé à ce sujet. mon problème est que j'ai besoin de 3 champs. Chaque champ doit être signé par une personne différente et à la fin il devrait y avoir 3 fichiers png générés avec les 3 signatures, donc je peux produire le fichier PDF. C'est en fait ce que je voulais dire .. Désolé .. – YXCD

 Questions connexes

  • Aucun problème connexe^_^