Question

我的设置是NodeJS使用EJS连接到MongoDB。

我有一个工作台/实验室地图应用程序我正在使用Lodash foreach函数来填充基于数据库对象的工作台。目前我有这个动态构建地图的SVG图像，我想开始使用canvas元素，但无法让它工作。

这是有效的SVG版本：

<svg version="1.1"
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 x="0px" 
 y="0px"
 viewBox="0 0 520 1820" 
 enable-background="new 0 0 520 1820" 
 xml:space="preserve">
 <g id="Background">
<rect fill="#D1D3D4" stroke="#000000" stroke-miterlimit="10" width="520" height="1820"/>
</g>
    <!--Run forEach for each bench entry in DB-->
    <% _.each(labs, function(lab) { %>

    <!--Set bFill variable to null-->
        <% bFill = null; %>

    <!--Check if the bench is set to active. If true, it sets bFill to green, if not it sets to grey-->
        <% if (lab.active == true) { this.bFill='#008000'; this.LabActive+1; }else{ this.bFill='#C0C0C0' ; } %>

                <!--Fill in RECT info from DB fields-->
                <g id="<%= lab.number %>">
                    <title>- Lab bench Info - 
                    Bench: <%= lab.number %>
                    User: <%= lab.currentUser %>
                    </title>
                    <rect 
                          class="bench" 
                          id="<%= lab.number%>" 
                          x="<%= lab.x %>" 
                          y="<%= lab.y %>" 
                          fill="<%= this.bFill %>" 
                          stroke="#000000" 
                          stroke-width="0.25" 
                          stroke-miterlimit="10" 
                          width="<%= lab.w %>" 
                          height="<%= lab.h %>"  
                          />
                </g>        
                <% }) %>

</svg>

以下是无效的Canvas版本：

<!--Begin Canvas-->
<canvas id="labCanvas" width="520" height="1820" style="border:5px solid #000000"></canvas>
    <script>
        var c = document.getElementById("labCanvas");
        var ctx = c.getContext("2d");

        //      Run forEach for each bench entry in DB
    _.each(labs, function(lab) {

        //      Fill in RECT info from DB fields            

    ctx.rect(lab.x, lab.y, lab.w, lab.h);
    ctx.stroke();


                })
</script>

我错过了什么或做错了什么？

Answer 1

经过大量的探索，我能够找出问题所在。我在这里提出答案，以防有人遇到类似的问题。

由于我正在使用带有EJS的SailsJS，因此页面将在服务器端呈现并发送到客户端。当我使用EJS调用创建SVG版本时，这很好，但是使用新的Canvas版本我使用脚本标记并且页面正在客户端呈现。因此，我的服务器端控制器定义的对象阵列（实验室）对客户端不可用。这是通过执行JSON.stringify将服务器（labs）数组放入客户端数组来解决的。请注意，这种方法很脏且不安全，但在我的情况下，它抓取的数据本质上不是保密的。

以下是此代码的工作版本：

<!--Begin Canvas-->
<canvas id="labCanvas" width="520" height="1820" style="border:5px solid #000000"></canvas>
    <script>
        var labs = <%- JSON.stringify(labs) %>

        var c = document.getElementById("labCanvas");
        var ctx = c.getContext("2d");

        //      Run forEach for each bench entry in DB
    labs.forEach(function(lab) {

        //      Fill in RECT info from DB fields            

    ctx.rect(lab.x, lab.y, lab.w, lab.h);
    ctx.stroke();


                });
</script>

无法让foreach使用canvas

1 个答案: