Question

嗨，我需要创建一个离子应用程序来绘制图像或PDF。我需要将画布拖动到我想要的图像上，在其上绘制，调整大小并保存在另一个图像中，这是旧图像和绘制画布的结果。

画布是这样的，现在我可以拖动或者我可以画画，但是我无法在画布的边缘设置4个锚点来调整它的大小

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

拖动指令

.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();
  }

调整画布大小并合并

0 个答案: