我需要加载图像并在其上绘制一些线条放大和缩小之后我需要将其保存为 pdf 文件

Question

我必须按照以下要求制作移动应用程序
1- 加载图像，然后在其上绘制一些线条并将结果保存为 pdf 文件
2- 用户可以放大和缩小图像
3- 当他按下完成时，结果必须保存为 pdf 文件
4- 应用程序必须在 android 和 IOS 手机上运行

所以我选择使用 monaca 来使用 onsen (angularjs)（帮助我使用了一些有用的插件）
所以我将元素添加到我的 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>

这里是java脚本函数

  $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;
        }
    }