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

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

這可能對你有所幫助。 盡管這個例子使用KineticJs這是舊版本的KonvaJs 。 所以只需用Konva取代Kinetic，事情就會對你有用。

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