Question

我想在我的移动应用程序中实现此示例http://jsfiddle.net/vY2B4/1/ 我正在使用带有angularjs的onsen来构建移动应用程序我需要的是在温泉标签上显示pdf文件

<ons-page id="PDFPlam.html" ng-controller="pdfPlanCtrl">
    <button class="button button-block button-positive"></button>
    <canvas id="canvas" width="800" height="600">
        Your browser does not support the canvas element.
    </canvas>
</ons-page>

这是我的控制器

angular.module('myApp').controller('pdfPlanCtrl',['$scope', function($scope) {
     $scope.canvas ;
      $scope.context

     addEventListener('load', load, false);

        function load(){
            alert('loaded');
            $scope.canvas = document.getElementById("canvas");
            console.log('canvas is '+ $scope.canvas);
            $scope.context = document.getElementById('canvas').getContext('2d');
            var mountain = new Image();
            mountain.onload = function() {
                console.log('init pdf');
                $scope.context.drawImage(this, 0, 0);
                initPointCollection();
            }
            mountain.src = 'file:///storage/emulated/0/Android/data/com.example.helloworld/files/249_139.jpg';  
        }


  var points = [];

  // Determine where the user clicked, I believe I pulled this from elsewhere on StackOverflow a while ago.
  function getCursorPosition(e) {
    var mx, my;
    if (e.pageX || e.pageY) {
      mx = e.pageX;
      my = e.pageY;
    }
    else {
      mx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      my = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    mx -= canvas.offsetLeft;
    my -= canvas.offsetTop;
    return {x: mx, y: my};
  }

  // Once we have at least two points, draw a line between them.
  function drawPath() {
    context.beginPath();
    for (var i = 0; i < points.length - 1; i++) {
      context.moveTo(points[i]['x'], points[i]['y']);
      context.lineTo(points[i+1]['x'], points[i+1]['y']);
      context.stroke();
    }
    context.closePath();
  }

  // Listen for clicks, and redraw the map when they occur.
  function initPointCollection() {
    canvas.onclick = function(e) {
      var point = getCursorPosition(e);
      points.push(point);

      if (points.length > 1) {
        drawPath();
      }
    }
  }

    $scope.initPDFPlan = function() {
        // Load up your image.  Don't attempt to draw it until we know it's been loaded.
    }      
}]);

没有调用Ioad函数的问题，因此它不起作用

使用onsen和angularjs加载和编辑pdf文件或图像

0 个答案: