Resize and drag canvas

@fabiobalsamo wrote:

hi i need to create an ionic app to draw on image or pdf.
I need to drag the canvas where i want on the image, draw on it, resize it and save in another image wich is the result of the old one plus the draw canvas.

canvas is like this, now i can drag or i can draw, but i'm not capable to set 4 anchor on the edge of canvas to resize it

canvas ion-pinch overflow-scroll="false" id='signatureCanvas' on-drag="true" width="200" height="300" style='border: 1px solid black; background-color: transparent;'

the directive to drag

.directive('ionPinch', function($timeout,$ionicGesture) {
return {
restrict: 'A',
link: function($scope, $element) {

  $timeout(function() {
    var canvas = $element[0],
        posX = 0,
        posY = 0,
        lastPosX = 0,
        lastPosY = 0,
        bufferX = 0,
        bufferY = 0,
        scale = 1,
        lastScale,
        rotation = 0,
        last_rotation, dragReady = 0;
    ionic.onGesture('touch drag transform dragend', function(e) {
      e.gesture.srcEvent.preventDefault();
      e.gesture.preventDefault();
      switch (e.type) {
        case 'touch':
          lastScale = scale;
          last_rotation = rotation;
          break;
        case 'drag':
          posX = e.gesture.deltaX + lastPosX;
          posY = e.gesture.deltaY + lastPosY;
          break;
        case 'transform':
          rotation = e.gesture.rotation + last_rotation;
          scale = e.gesture.scale * lastScale
          break;
        case 'dragend':
          lastPosX = posX;
          lastPosY = posY;
          lastScale = scale;
          break;
      }
      var transform =
          "translate3d(" + posX + "px," + posY + "px, 0) " +
          "scale(" + scale + ")" +
          "rotate(" + rotation + "deg) ";
      e.target.style.transform = transform;
      e.target.style.webkitTransform = transform;
    }, $element[0]);
  });
}

};
})

and the controller to draw

ratio = 1.0;

$scope.dev_width = $window.innerWidth;
$scope.dev_height = $window.innerHeight;
var dev_width = $window.innerWidth;
var dev_height = $window.innerHeight;

console.log(dev_width);


  var canvas = document.getElementById('signatureCanvas');
  var context = canvas.getContext('2d');
  window.addEventListener('resize', resizeCanvas, false);
      function resizeCanvas() {
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext('2d').scale(ratio, ratio);

       }
       resizeCanvas();


  var signaturePad = new SignaturePad(canvas);


  $scope.clearCanvas = function() {
      signaturePad.clear();
  }

  $scope.saveCanvas = function() {
    $scope.clearSave = false;
    $scope.FirmaBtn = true;
    $scope.canvasSi = false;
      var sigImg = signaturePad.toDataURL();
      $scope.signature = sigImg;

      if ($scope.signature) {
                 $scope.resizeCanvas();
               }

             };

             $scope.resizeCanvas = function () {

               canvas.width = canvas.offsetWidth * ratio;
               canvas.height = canvas.offsetHeight * ratio;
               canvas.getContext('2d').scale(ratio, ratio);
             };

thank in advance

Posts: 1

Participants: 1

Read full topic