Question

我正在尝试在draw2d应用内的ui-bootstrap-tpls手风琴中使用angularjs javascript库。

一个简单的例子:(我会构建一个plunker，但是我无法包含所需的库。在这个例子中，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);
        }
    };
}]);

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

除格式化问题（文字位置不正确且方框尺寸不正确）外，无法像手风琴外的同一标签一样选择和移动标签。

我猜测draw2d库和ui-bootstrap-tpls对于相应的（可能还有其他模板）在属性命名和/或css中都会发生冲突。

感谢您的帮助。

Answer 1

经过大量搜索，似乎问题围绕着SVG的函数getBBox（Get Bound Box）。正在快速创建对象。因此注入一个短暂的超时，在这种情况下是20ms，就可以了。

更改

reader.unmarshal(canvas, scope.jsonDocument1);

到

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

做了这个伎俩。

WELL ---- WONG（或者说不完全正确）

在睡眠之后，结果是setTimeout（或angularjs $timeout）功能仅“修复”此问题 IF is-open="true"已设置为手风琴。如果没有设置或者它是在另一个手风琴上，则修复失败。

似乎手风琴必须打开 AND 用于正确呈现文本标签的超时。

更多研究即将来临.......

答案（来自Draw2d开发人员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>

像魔术一样。

Draw2d文本类型未正确显示在ui-bootstrap手风琴angularjs应用程序中

1 个答案: