如何使用 kinetic js 替换 canvas 中的图像

Question

我正在开发 canvas 以创建酒店楼层视图。我正在从数据库中在 canvas 上绘制图像。我从数据库中获取 x,y 坐标并在该点上绘制图像。但我想为这些图像提供触摸事件。我想在触摸或点击事件时替换图像。我想创建与 book my show 相同的功能。

这是我的代码。

<!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://localhost/zoilo_admin/public/kinetic-v5.1.0.js"></script>
        <script defer="defer">
            function writeMessage(message) {
                text.setText(message);
                layer.draw();
            }
            function loadImages(sources, position, callback) {
                var assetDir = '';
                var images = {};
                var loadedImages = 0;
                var numImages = 0;

                for (i = 0; i < sources.length; i++)
                {
                    numImages++;
                }
                for (i = 0; i < sources.length; i++)
                {
                    images[i] = new Image();
                    images[i].onload = function () {
                        if (loadedImages == (sources.length - 1)) {
                            callback(images, position);
                        }
                        loadedImages++;
                    };
                    images[i].src = assetDir + sources[i];
                }

            }
            function buildStage(images, position) {

                var positionIndex = 0;
                var tableActual = {};

                console.log(images);
                for (var i = 0; i < sources.length; i++)
                {
                    console.log("Here");
                    tableActual[i] = new Kinetic.Image({
                        image: images[i],
                        x: position[i].x,
                        y: position[i].y
                    });
//                    var tableName = src;
//                    var table1 = new Kinetic.Image({
//                        image: images[src],
//                        x: position[positionIndex].x,
//                        y: position[positionIndex].y
//                    });

                    tableActual[i].on('click', function () {
                        console.log(this.index);

                        var image = new Kinetic.Image({
                            image: '4top.png',
                            x: position[this.index].x,
                            y: position[this.index].y
                        });

                        drawImage(image);

                        switch (this.index)
                        {
                            case 0:
                                writeMessage('Click on Table ' + 0);
                                tableActual[positionIndex] = new Kinetic.Image({
                                    image: images[positionIndex],
                                    x: position[positionIndex].x,
                                    y: position[positionIndex].y
                                });
                                this.setIm = "4top.png";
                                break;
                            case 1:
                                writeMessage('Click on Table ' + 1);
                                break;
                            case 2:
                                writeMessage('Click on Table ' + 2);
                                break;
                            case 3:
                                writeMessage('Click on Table ' + 3);
                                break;
                            case 4:
                                writeMessage('Click on Table ' + 4);
                                break;
                        }
                        writeMessage('mouseover ' + this[src]);
                    });
                    drawImage(tableActual[i]);
                    positionIndex++;
                }



                // 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'
            });
            var sources = [
                'house204-2.jpg',
                'house204-1.jpg',
                '4top.png',
                'house204-1.jpg',
                '4top.png'
            ];
            var position = [
                {
                    x: 380,
                    y: 60
                },
                {
                    x: 180,
                    y: 60
                }
                ,
                {
                    x: 90,
                    y: 60
                },
                {
                    x: 260,
                    y: 60
                },
                {
                    x: 50,
                    y: 60
                }
            ];
            loadImages(sources, position, buildStage);

            function drawImage(Image)
            {
                layer.add(Image);
                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
                Image.cache();
                // next, we need to redraw the hit graph using the cached image
                Image.drawHitFromCache();
            }
        </script>
    </body>
</html>

Answer 1

是的！您可以通过更改 java 脚本图像的来源来更改 touch/click 事件。

<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<script defer="defer">
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var layer = new Kinetic.Layer();

  var imageObj = new Image();
  imageObj.onload = function() {
    var yoda = new Kinetic.Image({
      x: 140,
      y: stage.getHeight() / 2 - 59,
      image: imageObj,
      width: 106,
      height: 118
    });

    var filteredYoda = new Kinetic.Image({
      x: 320,
      y: stage.getHeight() / 2 - 59,
      image: imageObj,
      width: 106,
      height: 118
    });

    // add the shape to the layer
    layer.add(yoda);
    layer.add(filteredYoda);

    // add the layer to the stage
    stage.add(layer);
    stage.on('click',function(){
    imageObj.src = 'http://crushlabs.com/wp-content/uploads/2013/01/jacee-terry-hello-card-business-card-design-back.jpg';

    });

    // apply grayscale filter to second image
    filteredYoda.applyFilter(Kinetic.Filters.Grayscale, null, function() {
      layer.draw();
    });
  };
  imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

</script>

如何使用 kinetic js 替换 canvas 中的图像

How to replace image in canvas using kinetic js

html

javascript

jquery

kineticjs