Skript erweitern zu mehreren Canvasboxen

[Tonald Drump]

Servus und Grüßgott,

Ich habe leider sehr begrenzte javascript und Jquery Skills und wollte hier mal um Hilfe bitten. Ich habe im Internet ein Skript für Signaturen gefunden. Und mein Ziel ist es jetzt, 3 Felder für Unterschriften zu haben, sodass ich die dann weiter "verarbeiten" kann. Das Problem ist nun, dass ich es einfach nicht schaffe das Skript so zu erweitern, dass ich drei funktionierende und unabhängige Canvas-Felder habe. Aber hier zunächst einmal der Code:

Der HTML-Code:

    <div class="sign1">
                        <canvas id="canvas1">Canvas is not supported</canvas>
    </div>

    <div class="sign2">
                        <canvas id="canvas2">Canvas is not supported</canvas>
    </div>

    <div class="sign3">
                        <canvas id="canvas3">Canvas is not supported</canvas>
    </div>

Der Javascript-Code. Weil ich seit Stunden rumprobiere und wild hin- und herkopiere, lass ich den inzwischen durch PHP generieren und einfach per For-Schleife dreimal unterschiedlich ausgeben.

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

             if(canvasContext)
             {
                 canvasContext.canvas.width  = 350;
                 canvasContext.canvas.height = 100;

                 canvasContext.fillStyle = 'rgba(255, 0, 0, 0.0)';
                 canvasContext.fillRect(0,0,sizedWindowWidth,350);
                
                 canvasContext.moveTo(100,150);
                 canvasContext.lineTo(sizedWindowWidth-50,150);
                 canvasContext.stroke();
                
                 canvasContext.fillStyle = "#000";
                 canvasContext.font="20px Arial";
                 canvasContext.fillText("x",40,155);
             }
             // Bind Mouse events
             $(canvas).on('mousedown', function (e) {
                 if(e.which === 1) {
                     leftMButtonDown = true;
                     canvasContext.fillStyle = "#000";
                     var x = e.pageX - $(e.target).offset().left;
                     var y = e.pageY - $(e.target).offset().top;
                     canvasContext.moveTo(x, y);
                 }
                 e.preventDefault();
                 return false;
             });
            
             $(canvas).on('mouseup', function (e) {
                 if(leftMButtonDown && e.which === 1) {
                     leftMButtonDown = false;
                     isSign<?php echo $x; ?> = true;
                 }
                 e.preventDefault();
                 return false;
             });
            
             // draw a line from the last point to this one
             $(canvas).on('mousemove', function (e) {
                 if(leftMButtonDown == true) {
                     canvasContext.fillStyle = "#000";
                     var x = e.pageX - $(e.target).offset().left;
                     var y = e.pageY - $(e.target).offset().top;
                     canvasContext.lineTo(x,y);
                     canvasContext.stroke();
                 }
                 e.preventDefault();
                 return false;
             });
            
             //bind touch events
             $(canvas).on('touchstart', function (e) {
                leftMButtonDown = true;
                canvasContext.fillStyle = "#000";
                var t = e.originalEvent.touches[0];
                var x = t.pageX - $(e.target).offset().left;
                var y = t.pageY - $(e.target).offset().top;
                canvasContext.moveTo(x, y);
                
                e.preventDefault();
                return false;
             });
            
             $(canvas).on('touchmove', function (e) {
                canvasContext.fillStyle = "#000";
                var t = e.originalEvent.touches[0];
                var x = t.pageX - $(e.target).offset().left;
                var y = t.pageY - $(e.target).offset().top;
                canvasContext.lineTo(x,y);
                canvasContext.stroke();
                
                e.preventDefault();
                return false;
             });
            
             $(canvas).on('touchend', function (e) {
                if(leftMButtonDown) {
                    leftMButtonDown = false;
                    isSign<?php echo $x; ?> = true;
                }
            
             });
        }
    </script>
    <?php } ?>

Kann mir jemand hierbei vielleicht helfen? Das einzige, was ich bis jetzt geschafft habe ist es, dass ich entweder eine Fläche angezeigt bekomme oder gar keine. Einmal hatte ich auch einen leeren Rahmen ohne irgendetwas.

Ich bedanke mich schonmal bei jedem, der sich die Mühe macht.

Herzlichen Gruß,

 

[Tonald Drump]

Das war wohl die Entscheidende Antwort. An die Funktionen habe ich absolut gar nicht gedacht. Vielen Dank dafür. Es ist noch nicht perfekt, aber es funktioniert jetzt erstmal. Da ich das ganze aber etwas lästig fand, habe ich mir jetzt auf die schnelle eine Canvas-Class geschrieben.

Spoiler: Class

class CanvasBox {

public $number;
public $width;
public $height;
public $BorderStrength;

function __construct ($number, $width, $height, $BorderStrength) {

$this->number = $number;
$this->width = $width;
$this->height = $height;
$this->BorderStrength = $BorderStrength;

}

function Script () {

$x = $this->number;


?><script type="text/javascript">
var isSign<?php echo $x; ?> = false;
var leftMButtonDown = false;

jQuery(function(){
//Initialize sign pad
init_Sign_Canvas<?php echo $x; ?>();
});

function fun_submit<?php echo $x; ?>() {
if(isSign<?php echo $x; ?>) {
var canvas<?php echo $x; ?> = $("#canvas<?php echo $x; ?>").get(0);
var imgData<?php echo $x; ?> = canvas<?php echo $x; ?>.toDataURL();
jQuery('#page').find('p').remove();
jQuery('#page').find('img').remove();
jQuery('#page').append(jQuery('<p>Your Sign:</p>'));
jQuery('#page').append($('<img/>').attr('src',imgData));

closePopUp<?php echo $x; ?>();
} else {
alert('Please sign');
}
}

function closePopUp<?php echo $x; ?>() {
jQuery('#divPopUpSignContract').popup('close');
jQuery('#divPopUpSignContract').popup('close');
}

function init_Sign_Canvas<?php echo $x; ?>() {
isSign<?php echo $x; ?> = false;
leftMButtonDown = false;

//Set Canvas width
var sizedWindowWidth = $(window).width();
if(sizedWindowWidth > 700)
sizedWindowWidth = $(window).width() / 2;
else if(sizedWindowWidth > <?php echo $this->width; ?>)
sizedWindowWidth = sizedWindowWidth - 100;
else
sizedWindowWidth = sizedWindowWidth - 50;

$("#canvas<?php echo $x; ?>").width(<?php echo $this->width;?>);
$("#canvas<?php echo $x; ?>").height(<?php echo $this->height;?>);
$("#canvas<?php echo $x; ?>").css("border", "<?php echo $this->BorderStrength;?>px solid #000");

var canvas<?php echo $x; ?> = $("#canvas<?php echo $x; ?>").get(0);

canvasContext<?php echo $x; ?> = canvas<?php echo $x; ?>.getContext('2d');

if(canvasContext<?php echo $x; ?>)
{
canvasContext<?php echo $x; ?>.canvas.width = <?php echo $this->width;?>;
canvasContext<?php echo $x; ?>.canvas.height = <?php echo $this->height;?>;

canvasContext<?php echo $x; ?>.fillStyle = 'rgba(255, 0, 0, 0.0)';
canvasContext<?php echo $x; ?>.fillRect(0,0,sizedWindowWidth,<?php echo $this->width;?>);


// Unterschreiblinie
canvasContext<?php echo $x; ?>.moveTo(500,<?php echo $this->height; ?>);
canvasContext<?php echo $x; ?>.lineTo(sizedWindowWidth-50,<?php echo $this->height;?>);
canvasContext<?php echo $x; ?>.stroke();

canvasContext<?php echo $x; ?>.fillStyle = "#000";
canvasContext<?php echo $x; ?>.font="20px Arial";
canvasContext<?php echo $x; ?>.fillText("x",500,155);
}
// Bind Mouse events
$(canvas<?php echo $x; ?>).on('mousedown', function (e) {
if(e.which === 1) {
leftMButtonDown = true;
canvasContext<?php echo $x; ?>.fillStyle = "#000";
var x = e.pageX - $(e.target).offset().left;
var y = e.pageY - $(e.target).offset().top;
canvasContext<?php echo $x; ?>.moveTo(x, y);
}
e.preventDefault();
return false;
});

$(canvas<?php echo $x; ?>).on('mouseup', function (e) {
if(leftMButtonDown && e.which === 1) {
leftMButtonDown = false;
isSign<?php echo $x; ?> = true;
}
e.preventDefault();
return false;
});

// draw a line from the last point to this one
$(canvas<?php echo $x; ?>).on('mousemove', function (e) {
if(leftMButtonDown == true) {
canvasContext<?php echo $x; ?>.fillStyle = "#000";
var x = e.pageX - $(e.target).offset().left;
var y = e.pageY - $(e.target).offset().top;
canvasContext<?php echo $x; ?>.lineTo(x,y);
canvasContext<?php echo $x; ?>.stroke();
}
e.preventDefault();
return false;
});

//bind touch events
$(canvas<?php echo $x; ?>).on('touchstart', function (e) {
leftMButtonDown = true;
canvasContext<?php echo $x; ?>.fillStyle = "#000";
var t = e.originalEvent.touches[0];
var x = t.pageX - $(e.target).offset().left;
var y = t.pageY - $(e.target).offset().top;
canvasContext<?php echo $x; ?>.moveTo(x, y);

e.preventDefault();
return false;
});

$(canvas<?php echo $x; ?>).on('touchmove', function (e) {
canvasContext<?php echo $x; ?>.fillStyle = "#000";
var t = e.originalEvent.touches[0];
var x = t.pageX - $(e.target).offset().left;
var y = t.pageY - $(e.target).offset().top;
canvasContext<?php echo $x; ?>.lineTo(x,y);
canvasContext<?php echo $x; ?>.stroke();

e.preventDefault();
return false;
});

$(canvas<?php echo $x; ?>).on('touchend', function (e) {
if(leftMButtonDown) {
leftMButtonDown = false;
isSign<?php echo $x; ?> = true;
}

});
}
</script>

<?php

}
function ExternalCss() {

?>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><?php




}
function DropBox() {

echo '<canvas class="canvas" id="canvas'.$this->number.'">Canvas is not supported</canvas>';



}

}

$Canvas1 = new CanvasBox('1', 400, 300, 1);
$Canvas2 = new CanvasBox('2', 500, 600, 0);

?>


<!DOCTYPE html>
<html lang="en">
  <head>


   <title>Signing ..</title>
<?php  
$Canvas1->ExternalCss();
$Canvas1->Script();
$Canvas2->Script();
 ?>
</head><body>

<?php $Canvas1->DropBox(); ?>
<?php $Canvas2->DropBox(); ?>

</body>
</html>

Es funktioniert und erfüllt den Zweck, der für das erste für mich reicht. Wenn ich das Objekt erstelle, kann ich die "Nummer" eingeben, Breite, Höhe und ob mit oder ohne Rand. Funktioniert, wackelt und hat Luft, wie mein Opa immer gesagt hat.

Daher tausend Dank und lieben Gruß,