jquery - Canvas 对象在 Angular JS/iONIC 中显示未定义的 getContext() 方法？

Question

我一直在使用 ionic Framework 来开发混合应用程序。该应用程序需要签名插件，我已经看到 JSignature & SiganturePad有很好的实现。但是它们都是通过 jQuery 支持实现的。Angular JS 完全支持我的。

根据上述选择，我决定在我的应用程序中实现 SignaturePad。我正在使用 $ionicModal 填充 SignaturePad html服务。我的代码内容添加到这里。

签名.html

<ion-modal-view> 
    <div id="signature-pad" class="m-signature-pad">
    <div class="m-signature-pad--body">
      <canvas></canvas>
    </div>
    <div class="m-signature-pad--footer">
      <div class="description">Sign above</div>
      <button class="button clear" data-action="clear" ng-click="doSave()">Clear</button>
      <button class="button save" data-action="save">Save</button>
    </div>
  </div>  
 </ion-modal-view>

这里是J

$ionicModal.fromTemplateUrl('templates/signature.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
    $scope.wrapper = angular.element(document.getElementById("signature-pad"));
    var  canvas = angular.element($scope.wrapper.find('.canvas')); 

    SignaturePad(canvas);   
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
  //$timeout($scope.openModal, 200);

 $scope.doSave=function()
  {
  if (angular.isUndefined($scope.signaturePad)) {
        alert("Please provide signature first.");
    } else {
        window.open($scope.signaturePad.toDataURL());
    }
  };
  var SignaturePad = function (canvas, options) {
        var self = this,
            opts = options || {};

        this.velocityFilterWeight = opts.velocityFilterWeight || 0.7;
        this.minWidth = opts.minWidth || 0.5;
        this.maxWidth = opts.maxWidth || 2.5;
        this.dotSize = opts.dotSize || function () {
            return (this.minWidth + this.maxWidth) / 2;
        };
        this.penColor = opts.penColor || "black";
        this.backgroundColor = opts.backgroundColor || "rgba(0,0,0,0)";
        this.onEnd = opts.onEnd;
        this.onBegin = opts.onBegin;

        this._canvas = canvas;


        this._ctx = canvas.getContext("2d");
        console.log("CANVAS"+this._canvas.width);
        //this.clear();

      //  this._handleMouseEvents();
       // this._handleTouchEvents();
    };


});

我在通过 getElementbyID() 从 html 引用 DOM 元素时遇到问题。该问题已通过以下解决方案解决。 ionic modal object reference

默认情况下Angular js通过jQuery/jqlite提供一些功能.所以，在所有问题之后，我今天早上就开始工作了。但根据 jqlite，通过 id 或选择器访问的 Canvas 元素作为 jQuery 对象而不是 Canvas 返回。所以作为 jQuery 对象，我无法使用 canvas 属性。所以运行代码后我收到错误为

TypeError: Object [object Object] has no method 'getContext'

我该如何制作 Canvas 类或者有什么方法可以满足我的要求？

Answer 1

这将返回数组

angular.element

这会返回一个元素

angular.element[0]

因此，为了获得 2d 上下文，我们应该这样做；

angular.element[0].getContext('2d') //angular.element[0] must be a canvas element

顺便说一句，我们最好小心在 Controller 内使用 angular.element 。这会让你的测试变得困难。