javascript - Draw2d文本类型未在ui-bootstrap Accordion angularjs应用中正确显示

我试图在draw2d应用程序内的ui-bootstrap-tpls手风琴内使用angularjs javascript库。

一个简单的示例：（我将构建一个插件，但无法包含所需的库。在此示例中，draw2d-canvas被实现为angularjs指令。

index.html：

<body id="myBody" ng-controller="MyDrawCtlr">
<div class="col-xs-12 panel panel-default row">
    <div id="canvas1" draw2d-canvas></div>
        <uib-accordion close-others="true" class="col-xs-8">
           <uib-accordion-group heading="The Chart" is-open="true">
               <div id="canvas2" draw2d-canvas></div>
           </uib-accordion-group>
        </uib-accordion>
    </div>
</body>

app.js ：（取自作为draw2d软件包一部分提供的angularjs模板）

var app = angular.module('test2dApp', ['draw2d', 'ui.bootstrap']);

app.controller('MyDrawCtlr', function ($scope) {
    $scope.jsonDocument1 =
        [
            {
                "type": "draw2d.shape.basic.Rectangle",
                "id": "rec1",
                "x": 50,
                "y": 100,
                "width": 201,
                "height": 82,
                "radius": 5,
                "resizeable": true,
                "selectable": true
            },
            {
                "type": "draw2d.shape.basic.Label",
                "text": "This is a label.",
                "id": "myLabel1",
                "x": 50,
                "y": 50,
                "minWidth": 100,
                "fontSize": 30,
                "padding": 200,
                "resizeable": true,
                "selectable": true,
                "cssClass": "draw2d_shape_basic_Label"
            }
        ];
});

var d2 = angular.module('draw2d', []);

d2.directive("draw2dCanvas", ["$window", "$parse", "$timeout", function ($window, $parse, $timeout) {
    return {
        restrict: 'E,A',
        link: function (scope, element, attrs, controller) {
            scope.editor = $.extend(true, {
                canvas: {
                    width: 1000,
                    height: 1000
                },
                palette: {
                    figures: []
                },
                selection: {
                    className: null,
                    figure: null,
                    attr: null
                }
            }, scope.editor);
            var canvas = new draw2d.Canvas(element.attr("id"), scope.editor.canvas.width, scope.editor.canvas.height);
            canvas.setScrollArea("#" + element.attr("id"));
            canvas.onDrop = $.proxy(scope.editor.canvas.onDrop, canvas);

            var reader = new draw2d.io.json.Reader();
            reader.unmarshal(canvas, scope.jsonDocument1);
        }
    };
}]);

这是显示结果的图形：顶部图形是预期的结果。请注意，文本周围的框的大小和位置不正确。

javascript - Draw2d文本类型未在ui-bootstrap Accordion angularjs应用中正确显示-LMLPHP

除了格式问题（文本位置不正确，框尺寸不正确）之外，还无法像在风琴外一样选择和移动标签一样选择和移动标签。

我猜想根据属性（和其他模板）的draw2d库和ui-bootstrap-tpls在属性命名和/或css中以某种方式发生冲突。

谢谢您的帮助。

最佳答案

经过大量搜索后，问题似乎出在SVG的功能getBBox（获取绑定框）上。正在快速创建对象。因此，注入一个短超时（在这种情况下为20ms）就可以解决问题。

改变中

reader.unmarshal(canvas, scope.jsonDocument1);

至

setTimeout(function(){reader.unmarshal(canvas, scope.jsonDocument1);}, 0 );

做到了。

好吧----错误（或者不完全正确）

入睡后，发现setTimeout（或angularjs $timeout）功能仅在“手风琴”上设置了“ is-open="true"”时才“修复”此问题。如果未设置或在其他手风琴上，则修复失败。

似乎手风琴必须打开，并且用于正确显示文本标签的超时。

将会有更多的研究......

很好的答案（来自Draw2d Developer http://www.draw2d.org/draw2d/）是getBBox在文本元素上不能正常工作，除非该元素在DOM中并且可见。

因此，我将修改后的<uib-accoridion-group>标头添加到：

<uib-accordion-group heading="The Chart"
    ng-init="status = {isOpen: false}" is-open="status.isOpen">

我还在内部div中添加了ng-if来创建图形。这会导致在打开手风琴时DOM创建div。

<div ng-if="status.isOpen" id="canvas2" draw2d-canvas></div>

像魔术。