Question

我正在开发画布，我正在使用x和y坐标在数据库中存储多个图像。现在我想把这些图像放在画布上给定的位置（即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/stackoverflow/';
                    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 [[]，[]，[]]数组来存储每个表的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对象。

如何从数据库中在画布中动态绘制图像

1 个答案: