angularjs - paper.js angular.js canvas 仅在 Canvas 鼠标悬停时更新

Question

我已经使用 angular.js 设置了一个应用程序。我正在通过 ng-repeat 创建一个菜单。每个链接都会调用指令内的一个函数，该函数使用 paper.js 将文本绘制到 Canvas 上。

但是 Canvas 不会更新，直到我在浏览器中移动鼠标。在 Canvas 上绘图的函数正在立即调用，但是如果鼠标没有从链接上移开， Canvas 什么也不会显示？

在指令内调用绘图函数的 angular.js Controller :

.controller('NavCtrl', function($scope, $location, $http, WorkService) {
  $scope.works = [];
  $http({method: 'GET', url: '/api/v1/work'}). //collects all works
  success(function(data, status, headers, config) {
      $scope.works = data.objects;
  });
  $scope.setTitle = function(work) { 
      $scope.currentTitle=work.title;  

          $scope.writeTitle(work.title);

  };


})

angular.js 指令:

.directive('draw', function () {
return {
    restrict: 'A',
    link: function postLink($scope, element, attrs) {

        $scope.writeTitle = function(inText){
            var letters = inText.split(''); 
            for(var i=0; i<2; i++){
            var text = new PointText(new Point(getRandom(0, 200), getRandom(0, 100)));
            text.content = letters[i];
            text.style = {
                fontFamily: 'Arial',
                fontWeight: 'normal',
                fontSize: 14,
                fillColor: 'red',
                justification: 'center'
            };

            }

        }



        function getRandom(min, max) {
              return Math.random() * (max - min) + min;
            }


        function initPaper() {

            paper.install(window);
            paper.setup('canvas');
        }


        initPaper();


    }
};

});

我的base.html中调用 Controller 函数来绘制的菜单:

<div ng-controller=NavCtrl>
        <nav>
             <a href='#/bilgi'>bilgi</a>
             <a  ng-click="setTitle(work)" href='#/ardiye/{{work.id}}'  ng-repeat='work in works'>{{$index+1}}</a>
        </nav>

    </div>

---- 更新 ----

我添加了:

<script type="text/paperscript" canvas="canvas">

function onFrame(event) {

}
</script>

这个空的 onFrame 函数添加到 base.html 中，现在 Canvas 可以正常更新。但为什么？

Answer 1

您是否尝试过更新 View ？

我在 Firefox 和 IE11 上遇到问题，在启动某些操作后，直到鼠标悬停在 Canvas 上时 Canvas 才会更新。

我只是在每个函数的末尾调用了paper.view.update()，一切顺利。

如果这是问题，则与 Angular 无关