如何从数据库中动态绘制 canvas 中的图像

Question

我正在开发 canvas 并且我在数据库中存储了多个图像及其 x 和 y 坐标。现在我想将这些图像放在给定位置的 canvas 上（即 x，y 坐标）。

这是我的代码。

   <!DOCTYPE HTML>
    <html>
        <head>
            <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
            <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
            <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
            <style>

                #container{
                    border:solid 1px #ccc;
                    margin-top: 10px;
                    width:100%;
                    height:100%;
                }
                html,body,kineticjs-content {

                    width:100%;
                    height:100%;
                    margin: 0px;

                }

            </style>
        </head>
        <body>
            <div id="container"></div>
            <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
            <script defer="defer">
                function writeMessage(message) {
                    text.setText(message);
                    layer.draw();
                }
                function loadImages(sources, callback) {
                    var assetDir = 'https://dl.dropboxusercontent.com/u/139992952/Whosebug/';
                    var images = {};
                    var loadedImages = 0;
                    var numImages = 0;
                    for (var src in sources) {
                        numImages++;
                    }
                    for (var src in sources) {
                        images[src] = new Image();
                        images[src].onload = function () {
                            if (++loadedImages >= numImages) {
                                callback(images);
                            }
                        };
                        images[src].src = assetDir + sources[src];
                    }
                }
                function buildStage(images) {
                    var table2 = new Kinetic.Image({
                        image: images.table2,
                        x: 120,
                        y: 50
                    });

                    var table1 = new Kinetic.Image({
                        image: images.table1,
                        x: 280,
                        y: 30
                    });

                    var table3 = new Kinetic.Image({


  image: images.table3,
                    x: 500,
                    y: 30
                });
                var table4 = new Kinetic.Image({
                    image: images.table4,
                    x: 50,
                    y: 500
                });
                var table5 = new Kinetic.Image({
                    image: images.table5,
                    x: 200,
                    y: 400
                });
                table2.on('click', function () {
                    writeMessage('mouseover monkey');
                });


                table1.on('click', function () {
                    writeMessage('mouseover lion');
                });

                table3.on('click', function () {
                    writeMessage('mouseover lion');
                });
                table4.on('click', function () {
                    writeMessage('mouseover lion');
                });
                table5.on('click', function () {
                    writeMessage('mouseover lion');
                });

                layer.add(table2);
                layer.add(table1);
                layer.add(table3);
                layer.add(table4);
                layer.add(table5);
                layer.add(text);
                stage.add(layer);

                // in order to ignore transparent pixels in an image when detecting
                // events, we first need to cache the image
                table1.cache();

                // next, we need to redraw the hit graph using the cached image
                table1.drawHitFromCache();

                // finally, we need to redraw the layer hit graph
                layer.drawHit();
            }
            var stage = new Kinetic.Stage({
                container: 'container',
                width: $(window).width(),
                height: $(window).height()
            });
            var layer = new Kinetic.Layer();

            var text = new Kinetic.Text({
                x: 10,
                y: 10,
                fontFamily: 'Calibri',
                fontSize: 24,
                text: '',
                fill: 'black'
            });

            <?php

            ?>
            var sources = {
                table1: 'house204-2.jpg',
                table2: 'house204-2.jpg',
                table3: 'house204-1.jpg',
                table4: 'house204-1.jpg',
                table5: 'house204-1.jpg'
            };


            loadImages(sources, buildStage);

        </script>
    </body>
</html>

现在我正在源代码中给出硬代码值。 x,y 坐标现在也是静态的。帮我创建一个数组，它将动态地从数据库中获取值，我们可以将这个数组（值）发送到源。

我正在使用 tablePosition[[],[],[]] 数组来存储每个 table.

的 id,x,y 坐标

Answer 1

对于每个图像，创建一个包含图像 url 及其 x、y 位置的 javascript 对象，并将这些对象放入数组中。

var images=[];

images.push({x:10,y:20,url:{'myImage1.png'});
images.push({x:10,y:20,url:{'myImage2.png'});

然后使用 JSON.stringify 将该数组转换为字符串，并将该字符串保存到您的数据库中。

var imageDefinitions = JSON.stringify(images);

// now push the imageDefinitions string into your database (maybe use AJAX)
jquery.post(...url to post the imageDefinitions string...);

当您想通过绘制图像重新创建场景时，从数据库中获取 imageDefinitions 并使用 JSON.parse 重新创建图像数组。

// now pull the imageDefinitions from your database (maybe use AJAX)
var imageDefinitions=jQuery.get(...url to GET the imageDefinitions string...);

var images=JSON.parse(imageDefinitions);

并使用此数组创建新的 Image() 对象，然后创建 Kinetic 对象。

如何从数据库中动态绘制 canvas 中的图像

how to draw dynamically images in canvas from database

html

javascript

jquery

kineticjs