我想創建konvajs階段使用angularjs指令任何人都可以幫我

Question

我在我的控制器下面的代碼嘗試，它工作正常，但我不知道如何將下面的代碼轉換爲指令。我想在angularjs中創建一個指令並將其包含到index.html文件中。

'use strict'; 

     //prepared stage object 
     var preparedStage; 

     //onload function will call first when controller invkoed 
     function onLoad() { 
     var width = window.innerWidth; 
     var height = window.innerHeight; 

     // first we need Konva core things: stage and layer 
     preparedStage = new Konva.Stage({ 
      container: 'container', 
      width: width, 
      height: height 
     }); 
     } 

     //stage controller 
     function StageController($scope) { 
     //load function 
     onLoad(); 
     //get prepared stage object. 
     var stage = preparedStage; 
     //get layer object 
     var layer = new Konva.Layer(); 
     //add laeyr onto the stage 
     stage.add(layer); 

     // then we are going to draw into special canvas element 
     var canvas = document.createElement('canvas'); 
     canvas.width = 800; 
     canvas.height = 400; 
     // creted canvas we can add to layer as "Konva.Image" element 
     var image = new Konva.Image({ 
      image: canvas, 
      x: stage.width()/4, 
      y: stage.height()/4, 
      stroke: 'green', 
      shadowBlur: 15 
     }); 
     //add image onto the layer 
     layer.add(image); 
     //finally drew the stage. 
     stage.draw(); 
     } 
    //angular module 
     var app = angular.module('app', []), 
      requires = [ 
      '$scope', 
      StageController 
      ]; 
     //controller with dependences array. 
     app.controller('StageController', requires); 

Answer 1

這裏的something這可能會幫助你。雖然此示例使用KineticJs，這是舊版本的KonvaJs。所以只需將Kinetic替換成Konva就可以了。

(function() { 
    'use strict'; 
    angular.module('konva') 
    .directive('stage', ['$rootScope', 
    function stageDirective ($rootScope) { 
     return { 
      restrict: 'EA', 
      scope: { 
       stageWidth: '=', 
       stageHeight: '=' 
      }, 
      link: function linkFn (scope, elem, attrs) { 
       var id = attrs["id"]; 
       if (!id) { 
        id = Math.random().toString(36).substring(8); 
        elem.attr('id', id); 
       } 
       var stageWidth = scope.stageWidth || 800; 
       var stageHeight = scope.stageHeight || 600; 

       var konva= { 
        stage: new Konva.Stage({ 
         container: id, 
         width: stageWidth, 
         height: stageHeight 
        }) 
       }; 

       scope.konva= konva; 

       $rootScope.$broadcast('KONVA:READY', konva.stage); 
      } 
     }; 
    }]); 
})();