SHARE
TWEET

Untitled

a guest Feb 25th, 2020 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var Canvas = function() {
  2.  
  3.     this.initCanvas = function() {
  4.         this.painting = false;
  5.         this.canvasWidth = 350;
  6.         this.canvasHeight = 100;
  7.         this.confirmButton = document.getElementById('confirm-button');
  8.         this.clearButton = document.getElementById('reset-button');
  9.         this.canvas = document.getElementById('canvas');
  10.         this.context = this.canvas.getContext('2d');
  11.         this.canvasEventListener();
  12.         this.canvasTouchEventListener();
  13.     }
  14.  
  15.     this.canvasEventListener = function() {
  16.         this.canvas.addEventListener('mousedown', this.mouseDown.bind(this));
  17.         this.canvas.addEventListener('mouseup', this.mouseUp.bind(this));
  18.         this.clearButton.addEventListener('click', this.clearSignature.bind(this));
  19.         this.canvas.addEventListener('mousemove', function(evt) {
  20.             var mousePos = this.getMousePos(canvas, evt); // cf function getMousePos
  21.             var posx = mousePos.x;
  22.             var posy = mousePos.y;
  23.             this.draw(canvas, posx, posy);
  24.         }.bind(this));
  25.     }
  26.  
  27.     this.mouseDown = function() {       // TOUCHSTART   // Fonction qui detecte que la souris est cliquee sur le canvas
  28.         this.painting = true;
  29.         this.context.beginPath();
  30.     }
  31.  
  32.     this.mouseUp = function() {         // TOUCHEND // Fonction qui detecte que la souris est relachee
  33.         this.painting = false;
  34.         this.canvas.style.cursor = "default";
  35.         this.confirmButton.style.display = "block";
  36.     }
  37.  
  38.     this.getMousePos = function(canvas, evt) {      // Fonction obtenir les corrodnn√©es de la souris (son postionnement x et y sur le canvas)
  39.         var rect = this.canvas.getBoundingClientRect(); // retourne la position de la souris par rapport √† la zone d'affichge (element canvas)
  40.         return {
  41.         x: evt.clientX - rect.left,
  42.         y: evt.clientY - rect.top
  43.         }
  44.     }
  45.  
  46.     this.draw = function(canvas, posx, posy) {      // Fonction dessiner la signature
  47.         if(this.painting) {
  48.         this.context.fillRect(posx, posy, 1, 1);
  49.         this.context.lineTo(posx, posy);
  50.         this.canvas.style.cursor = "pointer";
  51.         this.context.stroke();
  52.         }
  53.     }
  54.  
  55.     this.clearSignature = function() {
  56.         this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
  57.         this.context.beginPath();
  58.         this.confirmButton.style.display = "none";
  59.     }
  60.  
  61.     // Responsive design
  62.  
  63.     this.getTouchPos = function(canvas, touchEvent) {
  64.     var rect = this.canvas.getBoundingClientRect();
  65.     return {
  66.         x: touchEvent.touches[0].clientX - rect.left,
  67.         y: touchEvent.touches[0].clientY - rect.top
  68.         }
  69.     }
  70.  
  71.     this.canvasTouchEventListener = function() {
  72.         this.canvas.addEventListener('touchstart', function(e) {
  73.         var mousePos = this.getTouchPos(canvas, e);
  74.         var touch = e.touches[0];
  75.         var mouseEvent = new MouseEvent('mousedown', {
  76.             clientX: touch.clientX,
  77.             clientY: touch.clientY
  78.         });
  79.         this.canvas.dispatchEvent(mouseEvent);
  80.         }.bind(this));
  81.  
  82.         this.canvas.addEventListener('touchend', function(e) {
  83.             var mouseEvent = new MouseEvent('mouseup', {});
  84.             this.canvas.dispatchEvent(mouseEvent);
  85.         }.bind(this));
  86.  
  87.         this.canvas.addEventListener('touchmove', function(e) {
  88.             var mousePos = this.getTouchPos(canvas, e);
  89.             var touch = e.touches[0];
  90.             var mouseEvent = new MouseEvent('mousemove', {
  91.                 clientX: touch.clientX,
  92.                 clientY: touch.clientY
  93.             });
  94.             this.canvas.dispatchEvent(mouseEvent);
  95.         }.bind(this));
  96.     }
  97.  
  98.     this.resizeCanvas = function(newWidth) {
  99.         this.canvasHeight = this.canvasHeight * newWidth / this.canvasWidth;
  100.         this.canvasWidth = newWidth;
  101.         this.canvas.width = this.canvasWidth;
  102.         this.canvas.height = this.canvasHeight;
  103.     }
  104. };
  105.  
  106.  
  107. var canvas1 = new Canvas();
  108. canvas1.initCanvas();
  109.  
  110. function adaptCanvasToScreen() {
  111.     // 480
  112.     // 481 > 767
  113.     // 768 > 979
  114.     // 980 > 1199
  115.     // > 1200
  116.     var screenWidth = window.innerWidth;
  117.     if (screenWidth <= 480) {
  118.         canvas1.resizeCanvas(280);
  119.     }
  120.     else if (screenWidth <= 767) {
  121.         canvas1.resizeCanvas(400);
  122.     }
  123.     else if (screenWidth <= 979) {
  124.         canvas1.resizeCanvas(250);
  125.     }
  126.     else {
  127.         canvas1.resizeCanvas(350);
  128.     }
  129.     /*canvas1.resizeCanvas(
  130.         screenWidth <= 480 ? 280
  131.         : screenWidth <= 767 ? 400
  132.         : screenWidth <= 979 ? 250
  133.         : 350
  134.     );*/
  135. }
  136.  
  137. window.addEventListener("load", function() {
  138.     adaptCanvasToScreen();
  139. });
  140.  
  141. window.onresize = function() {
  142.     adaptCanvasToScreen();
  143. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top