Draw2d文本類型未在ui-bootstrap手風琴angularjs應用中正確顯示

Question

我正在嘗試在angularjs應用程序內的ui-bootstrap-tpls手風琴內使用draw2d 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);
        }
    };
}]);

這是顯示結果的圖形：頂部圖形是預期結果。 請注意，文本周圍的框的大小和位置不正確。

除了格式問題（文本位置不正確，框尺寸不正確）之外，還無法像在風琴外一樣選擇和移動標簽一樣選擇和移動標簽。

我猜想，相應的（也許還有其他模板）的draw2d庫和ui-bootstrap-tpls在屬性命名和/或css中以某種方式發生沖突。

謝謝您的幫助。

Answer 1

經過大量搜索之后，問題似乎與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/ ）是，直到文本元素在DOM中並且可見， getBBox才能在文本元素上正常運行。

因此，我將修改后的<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 個解決方案

解決方案1
1 2016-03-23 22:44:12

Draw2d文本類型未在ui-bootstrap手風琴angularjs應用中正確顯示

問題描述

1 個解決方案

解決方案1 1 2016-03-23 22:44:12

解決方案1
1 2016-03-23 22:44:12