Question

所以，我是Node的新手，并建立了一个练习网站，用户可以登录并在校园地图上的任何地方创建聊天室或加入现有的聊天室。我有我的Mongo架构等工作。只是在按照我想要的方式渲染模型时遇到一些麻烦。

基本上，我正在尝试使用canvas首先绘制地图，然后为所有现有的聊天室绘制位置指针。

这是我的控制器：

var db = require('../models')

module.exports = function(req, res) {
// finds all the current chatrooms and passes them to the
// the campus map to be rendered
db.Chatroom.find().exec(function(err, chatrooms) {
    if (err) throw err;

    res.render('map.ejs', { title: "Campus Map", chatrooms : chatrooms })
});
};

这是我的观点：

<% include header.ejs %>

<script type="text/javascript">
    var images = {};

    /*
    Pre-loads the images so they can be drawn in order.
    */
    function loadImages() {
        var sources = ["campus_map.png", "icon.png"]
        var loadedImages = 0;

        for (var src in sources) {
            images[src] = new Image();
            images[src].onload = function() {
                if(++loadedImages >= 2) {
                    drawImages();
                }
            };
            images[src].src = sources[src];
        }
    }

    /*
    Draws the map and all the current chatroom locations onto the canvas.
    */
    function drawImages() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        ctx.canvas.width = window.innerWidth;
        ctx.canvas.height = window.innerHeight;

        ctx.drawImage(images[0], 0, 0, window.innerWidth, window.innerHeight);

        chatrooms.forEach(function(chatroom) { 
        ctx.drawImage(images[1], chatroom.x_coordinate + 10, chatroom.y_coordinate + 20, 20, 20);
        }
    }
    </script>
</head>

<body onload="loadImages();">
    <canvas id="canvas"></canvas>

<% include footer.ejs %>

我认为我的问题是我正在尝试通过我的控制器（聊天室）在我脑海中的脚本块中访问传递给视图的上下文，但我真的不知道如何解决这个问题。

非常感谢任何指导！感谢。

使用Node.js和EJS在画布上绘制图像

0 个答案: