將paper.js集成到angular.js中

我有將paper.js集成到angular.js中的問題。我的問題是，我根本不知道在哪裏加載paperscript部分。將paper.js集成到angular.js中

我有一個視圖和一個控制器，我不能真正將代碼放在控制器中，我知道它，如果放在視圖中，它不會加載。

我的控制器是這樣的：

var hash = window.location.hash.split('/'); 

$scope.status = 'Loading'; 
var request = jQuery.ajax(system.server, { 
    'url': system.server, 
    'headers': { 
     'Accept': 'application/json', 
     'Request': system.request + '/hcbs/allocations/resident/' + hash[3], 
     'Username': system.username, 
     'Password': system.password 
    } 
}) 
.always(function(response) 
{ 
    signature.constructor(); 
    switch(response.status) 
    { 
     case 200: 
     case undefined: 
      $scope.$apply(function() 
      { 
       $scope.status = ''; 
       var res = JSON.parse(response); 
       $scope.hcbsAllocations = res.hcbsServiceAllocations; 

       $scope.change = function(allocationId) 
       { 
        console.log(jQuery('[data='+ allocationId +'][name=startDate]').val()); 
        console.log(jQuery('[data='+ allocationId +'][name=endDate]').val()); 
       } 

       $scope.submit = function(allocationId) 
       { 
        // Validate dates 

        // Make signature popup 
        $scope.signaturePop = true; 
       } 
      }); 
      break; 
     case 404: 
      console.log('error ' + response.status); 
      $scope.$apply(function() 
      { 
       $scope.status = 'Problems loading ressource at the moment'; 
      }); 
     default: 
      console.log(response); 
    } 
});

我的看法是這樣的：

<div id="app-content"> 
    <div consumer /> 

    <h1>Consumer</h1> 

    <div ng-show="status"> 
     <div class="notice"> 
      <p>{{status}}</p> 
     </div> 
    </div> 

    <form name="attendance"> 
     <table class="hcbs"> 
      <tr ng-repeat="allocation in hcbsAllocations"> 
       <td class="first"><h3>{{allocation.type}}</h3></td> 
       <td class="middle"> 
         <input type="datetime-local" name="startDate" ng-model="startDate" ng-change="change(allocation.id)" data="{{allocation.id}}" placeholder="Choose start date" /> 

         <input type="datetime-local" name="endDate" ng-model="endDate" ng-change="change(allocation.id)" data="{{allocation.id}}" placeholder="Choose end date" /> 
       </td> 
       <td class="last"> 
        <span class="btn" class="submit" data="{{allocation.id}}" ng-click="submit(allocation.id)"><i class="icon-ok icon-large"></i></span> 
       </td>  
      </tr> 
     </table> 
    </form> 
</div>

來源

2013-10-02 user1645908

該指令的方法來這樣：

Check out the jsFiddle

HTML：

<canvas id="canvas" resize draw></canvas>

指令：

app.directive('draw', function() { 
    return { 
     restrict: 'A', 
     link: function postLink(scope, element, attrs) { 
      var path; 
      var drag = false; 

      function mouseUp(event) { 
       //Clear Mouse Drag Flag 
       drag = false; 
      } 

      function mouseDrag(event) { 
       if (drag) { 
        path.add(new paper.Point(event.layerX, event.layerY)); 
        path.smooth(); 
       } 
      } 

      function mouseDown(event) { 
       //Set flag to detect mouse drag 
       drag = true; 
       path = new paper.Path(); 
       path.strokeColor = 'black'; 
       path.add(new paper.Point(event.layerX, event.layerY)); 
      } 

      function initPaper() { 
       paper.install(window); 
       paper.setup('canvas'); 
      } 

      element.on('mousedown', mouseDown).on('mouseup', mouseUp).on('mousemove', mouseDrag); 

      initPaper(); 

     } 
    }; 
});

來源

2014-05-14 21:03:02 tdhulster

以及我們如何使用onFrame？ – ratata

好的...添加---> paper.view.onFrame = onFrame; initPaper函數將起作用。 – ratata

無需加載paperscript。您可以使用javascript directly

<body ng-controller="PaperController"> 

    <canvas id="canvas" resize ng-mousedown="mouseDown($event)" ng-mousemove="mouseDrag($event)" ng-mouseup="mouseUp()"></canvas> 
</body> 
<script type="text/javascript"> 
function PaperController($scope){ 

    var path; 
    var drag = false; 

    $scope.mouseUp = function(){ 
     //Clear Mouse Drag Flag 
     drag = false; 
    }; 

    $scope.mouseDrag = function(event){ 
     if(drag){ 
      path.add(new paper.Point(event.x, event.y)); 
      path.smooth(); 
     } 
    }; 

    $scope.mouseDown = function(event){ 
     //Set flag to detect mouse drag 
     drag = true; 
     path = new paper.Path(); 
     path.strokeColor = 'black'; 
     path.add(new paper.Point(event.x, event.y)); 
    }; 

    init(); 
    function init(){ 
     paper.install(window); 
     paper.setup('canvas');   
    } 
} 

</script>

來源

2013-12-18 03:12:48

以前的解決方案對我來說不起作用，而且他們也有很多冗餘的代碼和ID。

jsFiddle

我只是有我的元素，假設

<canvas draw></canvas>

和一個簡單的指令，像這樣的：

app.directive('draw', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var path; 
      paper.setup(element.get(0)); 
      var tool = new paper.Tool(); 
      tool.onMouseDown = function (event) { 
       path = new paper.Path(); 
       path.strokeColor = 'black'; 
      }; 
      tool.onMouseDrag = function (event) { 
       path.add(event.point); 
      }; 
      tool.onMouseUp = function (event) { 
       //nothing special here 
      }; 
     } 
    }; 
});

來源

2015-10-04 13:35:48 mir88

這對我有效，其他解決方案沒有經過一些修改。我喜歡使用指令來將畫布鏈接到指令/控制器代碼 - 不需要額外的「ID」。很好謝謝。 – user2800708

將paper.js集成到angular.js中

回答

相關問題