个人中心
gpt4 book ai didi

javascript - 如何使用kinetic js替换 Canvas 中的图像

转载 作者：行者123 更新时间：2023-12-02 16:25:39 24 4
gpt4 key购买 nike

我正在开发 Canvas 来创建酒店楼层 View 。我正在从数据库中在 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://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>

最佳答案

是的!您可以通过更改该 java 脚本图像的源来在触摸/单击事件上更改它。

<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>

关于javascript - 如何使用kinetic js替换 Canvas 中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28715723/

24 4 0
文章推荐： javascript - 使用 FSO 创建或删除文件夹
文章推荐： clojure - assoc-in 可以创建一个新向量而不是新 map 吗？
文章推荐： methods - 长方法的方法名称
文章推荐： javascript - Ajax 调用 API 返回错误 HTTP/1.1 405 Method Not Allowed
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com