Мне нужно загрузить изображение и нарисовать некоторые строки на нем. Увеличение и уменьшение после этого мне нужно сохранить в виде файла pdf.

Question

Мне нужно сделать мобильное приложение со следующим сервисом:
1- загрузить изображение, затем нарисовать некоторые строки на нем и сохранить результат в виде pdf-файла
2- пользователь имеет возможность увеличивать и уменьшать масштаб изображения из изображения
3-, когда он нажмите закончить результат должен быть сохранен в виде pdf-файла
4 applicaiton должен работать на Android и IOS мобильные

поэтому я выбрал пользователя onsen (angularjs) с помощью monaca (помог мне с некоторыми полезными плагинами)
поэтому я добавил элемент в мой HTML

<ons-gesture-detector ng-pinchin= "onPinchInGesture()" ng-pinchout="onPinchOutGesture()" ng-dragleft="onDragLeftGesture()" ng-dragright="onDragRightGesture()" ng-dragdown="onDragDownGesture()" ng-dragup="onSwipeUpGesture()"> 
    <canvas id="the-canvas" width="300px" height="400px" style="border: 1px solid blue;"> 
      Your browser does not support the canvas element. 
    </canvas> 
</ons-gesture-detector> 

и вот ява скрипт работает

$scope.onPinchOutGesture = function(gesture) { 
     height = height + (2.5*(height/400)); 
     width = width + (2.5*(width/300)); 
     xPosition = xPosition - (2.5*(width/300)); 
     yPosition = yPosition - (2.5*(width/300)); 
     make_base(width , height, xPosition , yPosition); 
    }; 


    $scope.onPinchInGesture = function(gesture) { 
     height = height - (2.5*(height/400)); 
     width = width - (2.5*(width/300)); 
     xPosition = xPosition + (2.5*(width/300)); 
     yPosition = yPosition + (2.5*(width/300)); 
     make_base(width , height, xPosition , yPosition); 
    }; 

    $scope.onSwipeLeftGesture = function(gesture) { 
     xPosition = xPosition - (5*(width/300)); 
     make_base(width , height, xPosition , yPosition); 
    }; 

    $scope.onSwipeRightGesture = function(gesture) { 
     xPosition = xPosition + (5*(width/300)); 
     make_base(width , height, xPosition , yPosition); 
    }; 

    $scope.onSwipeDownGesture= function(gesture) { 
     yPosition = yPosition + (5*(height/400)); 
     make_base(width , height, xPosition , yPosition); 
    }; 

    $scope.onSwipeUpGesture= function(gesture) { 
     yPosition = yPosition - (5*(height/400)); 
     make_base(width , height, xPosition , yPosition); 
    }; 

проблемы, когда я пытаюсь изменить масштаб описываются особые части изображение стало больше, не фокусируясь на том, что часть
так что я должен увеличить первым затем ищу разыскиваемую часть

ДОБАВЛЕННОЙ

function make_base(x , y, xPos, yPos){ 
     width = x; 
     height = y; 
     xPosition = xPos; 
     yPosition = yPos; 
     var canvas = document.getElementById('the-canvas'), 
     context = canvas.getContext('2d'); 
     base_image = new Image(); 
     base_image.src =image path; 
     base_image.onload = function(){ 
      context.clearRect(0, 0, canvas.width, canvas.height); 
      context.drawImage(base_image, xPosition, yPosition, x, y); 
     }; 
    } 

Answer 1

Если кто-то заинтересован, это правильный ответ

$scope.loadImage = function(){ 
     make_base(screen.width, screen.height, 0 , 0); 
     newWidth = screen.width; 
     newHeight = screen.height; 
     var canvas = document.getElementById("the-canvas"); 
     var ctx = canvas.getContext('2d');  
     PhoneGapReady = true; 
     document.addEventListener('touchstart', touchStart); 
     document.addEventListener('touchmove', touchMove); 
     document.addEventListener('touchend', touchEnd); 
     document.addEventListener('touchCancel', touchCancel); 
    }; 

    function make_base(x , y, xPos, yPos){ 
     width = x; 
     height = y; 
     xPosition = xPos; 
     yPosition = yPos; 
     var canvas = document.getElementById('the-canvas'), 
     context = canvas.getContext('2d'); 
     theImage = new Image(); 
     theImage.src = 'file:///storage/emulated/0/Android/data/com.example.helloworld/files/11111.png'; 
     theImage.height = imgHeight; 
     theImage.width = imgWidth; 
     theImage.style.left = currentOffsetX + "px"; 
     theImage.style.top = currentOffsetY + "px"; 


     theImage.onload = function(){ 
      context.clearRect(0, 0, canvas.width, canvas.height); 
      context.drawImage(theImage, xPosition, yPosition, x, y); 
     }; 
    } 



    function touchStart(event) 
    { 
     panning = false; 
     zooming = false; 
     if (event.touches.length == 1) { 
      panning = true; 
      startX0 = event.touches[0].pageX; 
      startY0 = event.touches[0].pageY; 
     } 
     if (event.touches.length == 2) { 
      zooming = true; 
      startX0 = event.touches[0].pageX; 
      startY0 = event.touches[0].pageY; 
      startX1 = event.touches[1].pageX; 
      startY1 = event.touches[1].pageY; 
      centerPointStartX = ((startX0 + startX1)/2.0); 
      centerPointStartY = ((startY0 + startY1)/2.0); 
      percentageOfImageAtPinchPointX = (centerPointStartX - currentOffsetX)/currentWidth; 
      percentageOfImageAtPinchPointY = (centerPointStartY - currentOffsetY)/currentHeight; 
      startDistanceBetweenFingers = Math.sqrt(Math.pow((startX1-startX0),2) + Math.pow((startY1-startY0),2)); 
     } 
    } 

    function touchMove(event) 
    { 
     // This keeps touch events from moving the entire window. 
     event.preventDefault(); 

     if (panning) { 
      endX0 = event.touches[0].pageX; 
      endY0 = event.touches[0].pageY; 
      translateFromTranslatingX = endX0 - startX0; 
      translateFromTranslatingY = endY0 - startY0; 
      newOffsetX = currentOffsetX + translateFromTranslatingX; 
      newOffsetY = currentOffsetY + translateFromTranslatingY; 
      theImage.style.left = newOffsetX + "px"; 
      theImage.style.top = newOffsetY + "px"; 
      make_base(newWidth , newHeight, newOffsetX, newOffsetY); 
     } 
     else if (zooming) {  
      // Get the new touches 
      endX0 = event.touches[0].pageX; 
      endY0 = event.touches[0].pageY; 
      endX1 = event.touches[1].pageX; 
      endY1 = event.touches[1].pageY; 

      // Calculate current distance between points to get new-to-old pinch ratio and calc width and height 
      endDistanceBetweenFingers = Math.sqrt(Math.pow((endX1-endX0),2) + Math.pow((endY1-endY0),2)); 
      pinchRatio = endDistanceBetweenFingers/startDistanceBetweenFingers; 
      newContinuousZoom = pinchRatio * currentContinuousZoom; 
      newWidth = imgWidth * newContinuousZoom; 
      newHeight = imgHeight * newContinuousZoom; 

      // Get the point between the two touches, relative to upper-left corner of image 
      centerPointEndX = ((endX0 + endX1)/2.0); 
      centerPointEndY = ((endY0 + endY1)/2.0); 

      // This is the translation due to pinch-zooming 
      translateFromZoomingX = (currentWidth - newWidth) * percentageOfImageAtPinchPointX; 
      translateFromZoomingY = (currentHeight - newHeight) * percentageOfImageAtPinchPointY; 

      // And this is the translation due to translation of the centerpoint between the two fingers 
      translateFromTranslatingX = centerPointEndX - centerPointStartX; 
      translateFromTranslatingY = centerPointEndY - centerPointStartY; 

      // Total translation is from two components: (1) changing height and width from zooming and (2) from the two fingers translating in unity 
      translateTotalX = translateFromZoomingX + translateFromTranslatingX; 
      translateTotalY = translateFromZoomingY + translateFromTranslatingY; 

      // the new offset is the old/current one plus the total translation component 
      newOffsetX = currentOffsetX + translateTotalX; 
      newOffsetY = currentOffsetY + translateTotalY; 

      // Set the image attributes on the page 
      theImage.style.left = newOffsetX + "px"; 
      theImage.style.top = newOffsetY + "px"; 
      theImage.width = newWidth; 
      theImage.height = newHeight; 
      make_base(newWidth , newHeight, newOffsetX, newOffsetY); 
     } 
    } 

    function touchEnd(event) 
    { 
     if (panning) { 
      panning = false; 
      currentOffsetX = newOffsetX; 
      currentOffsetY = newOffsetY; 
     } 
     else if (zooming) { 
      zooming = false; 
      currentOffsetX = newOffsetX; 
      currentOffsetY = newOffsetY; 
      currentWidth = newWidth; 
      currentHeight = newHeight; 
      currentContinuousZoom = newContinuousZoom; 
     } 
    } 

    function touchCancel(event) 
    { 
     alert("cancel fired!"); 
     if (panning) { 
      panning = false; 
     } 
     else if (zooming) { 
      zooming = false; 
     } 
    }