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

我一直在开发离子框架来开发一个混合应用程序.该应用程序需要Signature插件,我看到 JSignature和 SiganturePad有很好的实现.但是它们都是通过jQuery support.mine实现的,完全支持Angular JS.

从上面的选择我决定在我的应用程序中使用SignaturePad实现.我使用$ionicModal服务填充SignaturePad html.我在这里添加了代码.

Signature.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>

Js在这里

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


});

我有一个问题从html引用DOM元素到getElementbyID().这个问题通过以下解决方案修复.ionic modal object reference

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

TypeError: Object [object Object] has no method ‘getContext’

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

解决方法

这会返回数组

angular.element

这会返回一个元素

angular.element[0]

所以要获得2d背景,我们应该这样做;

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

顺便说一句,我们最好小心使用控制器内部的angular.element.它会让你的考试变得困难.