Question

总而言之，我正在改变通过ajax调用显示的画布以及每个画布上绘制的内容。主要问题是我的主绘图函数在getContext上失败，还有其他奇怪的行为，比如缺少画布（但它们肯定存在）。

这是我在画布上绘制的功能：

function PlotSet(plot_properties){
    var p = plot_properties;
    var canvas = document.getElementById(p.panel_name);
    var spinner_target = document.getElementById(p.spinner_name);
    if (!canvas) {
        alert('Error: Cannot find the canvas element!');
        return;
    } else if (!canvas.getContext) {
        alert('Error: Canvas context does not exist!');
        return;
    } else {
        var ctx = canvas.getContext('2d');
        /*Do the drawing*/
    }
}

我的页面的一部分有3个按钮，用于确定面板/画布的数量和排列。当有人点击一个时，会加载另一个带有该安排的php页面。

<div id="panel_single" name="panel_control" class="xs-btn sm-btn-h-grp sm-btn-one-panel"></div>
<div id="panel_split" name="panel_control" class="xs-btn sm-btn-h-grp sm-btn-four-panel"></div>
<div id="panel_rows" name="panel_control" class="xs-btn sm-btn-h-grp sm-btn-list-panel"></div>
<script>
    $("#panel_single_settings").hide();
    $("div[name=panel_control]").click(function(event) {
        var nav_id = $(this).attr("id");
        if(nav_id == "panel_single"){
            $("#panel_single_settings").show();
        }else{
            $("#panel_single_settings").hide();
        }
        //$("span[name=vnav-text]").removeClass("vnav-active");
        //$("#" + nav_id).addClass('vnav-active');
        refresh_content($(".widget-panel"), nav_id, function(){
            side_panel_hide($(".side_panel"), "600px");
        });
    });
</script>

加载页面后点击这些内容时，一切正常。但是在更改绘图属性/重绘时我有两个问题。（1）当第一个画布显示多个画布时，当使用此函数重绘已绘制的画布时（使用带有ajax的弹出窗体设置重绘的内容），PlotSet函数在getContext上失败，除了第一个画布。（2）当只显示一个面板时，可以更改设置并重新绘制面板，但是当我加载带有多个面板的页面时，除了第一个面板之外的所有面板都是空白的（即此页面按预期运行，除了当我在另一页上重绘画布时）。

单面板示例：

<script>
    var plot_properties = {
        //Settings to draw
    }
    PlotSet(plot_properties);
</script>

多面板配置示例：

<canvas class="analytics-graph-medium" id="graph_send"></canvas>        
<canvas class="analytics-graph-medium" id="graph_recv"></canvas>
<canvas class="analytics-graph-medium" id="graph_cpu"></canvas>
<canvas class="analytics-graph-medium" id="graph_ram"></canvas>


<script>
    var split_send_plot_properties = {
        //Settings to draw
    }
    PlotSet(split_send_plot_properties);

    var split_recv_plot_properties = {
        //Settings to draw
    }
    PlotSet(split_recv_plot_properties);
    .
    .
    .
    //**************************************************************
    //Panel Settings Events
    //**************************************************************
    $("#cpu_panel_settings").on("click", function(){
        var panel_name = $(this).attr('id');
        set_side_panel_html($(".side_panel"), "/gui/pages/status/dialogs/panel_settings.php", split_cpu_plot_properties, function(){
            side_panel_show($(".side_panel"), "500px");
        });
    });
    .
    .
    .
</script>

这是用于更改设置的提交按钮操作：

$("#mod_panel").click(function(){
            plot_properties = {
                //lots of properties to be drawn
            }
            PlotSet(plot_properties);
            side_panel_hide($(".side_panel"), "600px");
        });

Answer 1

好吧，我似乎已经解决了这个问题。我仍然不明白这个问题，但解决方案是添加一个具有相同名称的新画布，删除旧画布并使用getElementById重新获取具有相同旧名称的新画布。但只有在可以找到画布时才这样做，但上下文不存在...否则使用原始上下文。

function PlotSet(plot_properties){
        var p = plot_properties;
        var spinner_target = document.getElementById(p.spinner_name);
        var canvas = document.getElementById(p.panel_name);
        if (!canvas) {
            alert('Error: Cannot find the canvas element!');
            return;
        } else if (!canvas.getContext) {
            var new_canvas = document.createElement(p.panel_name);
            canvas.parentNode.insertBefore(new_canvas, canvas.nextSibling);
            canvas.parentNode.removeChild(canvas);
            canvas = document.getElementById(p.panel_name);
        } 
        var ctx = canvas.getContext('2d');
        //Draw Something
}

这使一切正常，所有动态页面加载都有多个画布，加上更改任何画布的设置/绘图，以及在制作chane后切换页面。

如果有人对导致问题的原因或此解决方案的工作原因有任何进一步的了解，我会非常热心。

javascript，动态加载画布和绘制上下文功能;上下文消失

1 个答案: