angular.js에 paper.js 통합

이 문제는 angular.js에 paper.js를 통합 할 때 발생합니다. 내 문제는 필자가 paperscript 부분을로드 할 위치를 알지 못한다는 것이다.angular.js에 paper.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 방법을 사용할 수 있습니다

jsFiddle

난 그냥이 같은

<canvas draw></canvas>

그리고 간단한 지시를 가정 내 요소가? – ratata

ok ... 추가 ---> 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가 있습니다.

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

angular.js에 paper.js 통합

답변

관련 문제