使用 jquery ui 的 raphael 行为答案

【问题标题】：raphael behavior with jquery ui使用 jquery ui 的 raphael 行为
【发布时间】：2015-03-08 03:09:35
【问题描述】：

我正在尝试使用 Raphael 和 jQuery UI。我的问题的一个非常简单的示例涉及一个打开 jQuery 对话框的简单按钮。

在该对话框中，我使用 Raphael 论文从数组中绘制文本列表，并由一些分配有点击事件的透明矩形覆盖。

我不知道如何为此示例创建一个 jsfiddle，因此将我的代码粘贴在下面。

一、html部分：

<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css"/>
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/raphael-2.1.2.min.js"></script>
    <script type="text/javascript" src="js/jscode.js"></script>
</head>
<body>
<div><button id="fireit">Open</button></div>
<div id="content"></div>
</body>
</html>

接下来是jscode.js部分：

$( function() {

    $("#content").dialog({
        position: {my: "left top", at: "left+5px top+40px", of: window},
        title: "A title",
        width: 350,
        height: 375,
        resizable: false,
        closeOnEscape: true,
        autoOpen: false
    });

    var paper_content = Raphael("content", 300, 30);
    var info = ["foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo"];

    paper_content.setStart();
    var texts = paper_content.setFinish();

    function print_texts() {
        texts.remove();
        var i;
        var row = 10;

        paper_content.setStart();

        for (i = 0; i < info.length; i++) {
            paper_content.text(25, row, info[i])
                .attr({'text-anchor': 'start', 'font-size': '14px'});
            row += 20;     
        }

        row = 10;
        var somerect;

        for (i = 0; i < info.length; i++) {
            somerect = paper_content
                .rect(5, row - 10, 500, 20)
                .attr({fill: "#acadea", 'stroke-opacity': '0.5', 'fill-opacity': 0.5});
            somerect.id = i;
            somerect.click(function() {
                alert(info[this.id]);
            })
            row += 20;
        }

        texts = paper_content.setFinish();
    }

    $("#fireit").click(function() {
        print_texts();
        $(paper_content.canvas).height(texts.getBBox().height + 20);
        $("#content").dialog("open");
    })
});

click 函数触发 print_texts() 函数，由于 Raphael 打印的内容比纸张高，因此纸张画布会被调整大小。

触发按钮时出现问题：Raphael 打印的文本不在应有的位置...！

再次点击按钮会神奇地将它们按正确的顺序排列。

现在的问题是：我该如何克服这个问题？我需要从第一次点击就得到正确的顺序。

提前感谢您的任何提示，阿德里安

【问题讨论】：

标签： raphael jquery-ui-dialog

【解决方案1】：

像往常一样，一旦获得一个最小的例子，答案就会自动弹出。关键是首先打开对话框，然后才运行其他指令：

$("#fireit").click(function() {
    $("#content").dialog("open");
    print_texts();
    $(paper_content.canvas).height(texts.getBBox().height + 20);
})

【讨论】：