javascript - 我想使用 angularjs 指令创建 konvajs 阶段，任何人都可以帮助我

Question

我在 Controller 中尝试了下面的代码，它工作正常，但我不知道如何将下面的代码转换为指令。我想在 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);
            }
        };
    }]);
})();