0

我正在尝试在应用程序内的手风琴内使用draw2djavascript 库。ui-bootstrap-tplsangularjs

一个简单的例子：（我会构建一个 plunker，但我无法包含所需的库。在这个例子中，draw2d-canvas实现为 angularjs 指令。

索引.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中以某种方式发生冲突。

谢谢您的帮助。

4

1 回答 1

1

经过大量搜索，问题似乎围绕着 SVG 的功能getBBox（Get Bound Box）。对象的创建速度很快。因此，注入一个短暂的超时，在本例中为 20 毫秒，起到了作用。

改变

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">

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

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

就像魔术一样。

于 2016-03-23T22:44:12.467 回答