Question

我第一次使用HTML 5，并使用此HTML5 canvas tutorial。

我已经将示例更改为包含4个图像，并且我希望能够在对click事件进行重定向之前检测单击了哪个图像。

这是我目前的代码，有人可以告诉我如何在我的点击事件中检测到哪个图片被点击了吗？此外，mouseout事件似乎并不总是调整图像大小，任何想法为什么？

<!DOCTYPE HTML>
<html>
<head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        #myCanvas {
            border: 0px;
        }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic2d-v1.0.4.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script>
        function initRectangles(rectangles){
            // initialize an array of rectangles that provide
            // rectangular paths and properties for the images
            return [{
                name: "buffalo",
                image: null,
                x: 40,
                y: 45,
                width: 80,
                height: 80,
                scale: 1
            }, {
                name: "indianapolis",
                image: null,
                x: 125,
                y: 45,
                width: 80,
                height: 80,
                scale: 1
            }, {
                name: "miami",
                image: null,
                x: 210,
                y: 45,
                width: 80,
                height: 80,
                scale: 1
            }, {
                name: "nyjets",
                image: null,
                x: 295,
                y: 45,
                width: 80,
                height: 80,
                scale: 1
            }];
        }

        function loadImages(sources, callback){
            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 = sources[src];
            }
        }

        function mapImages(rectangles, images){
            // map images to rectangles
            var counter = 0;
            for (var img in images) {
                rectangles[counter++].image = images[img];
            }
        }

        function initStage(images){
            var rectangles = initRectangles(rectangles);
            mapImages(rectangles, images);

            kin = new Kinetic_2d("myCanvas");
            var context = kin.getContext();

            kin.setDrawStage(function () {
                this.clear();
                var mousePos = kin.getMousePos();

                for (var n = 0; n < rectangles.length; n++) {
                    var rect = rectangles[n];

                    context.save();
                    context.translate(rect.x, rect.y);
                    context.scale(rect.scale, rect.scale);
                    kin.beginRegion();
                    var rectX = -1 * rect.width / 2;
                    var rectY = -1 * rect.height / 2;
                    context.drawImage(rect.image, rectX, rectY, rect.width, rect.height);
                    context.beginPath();
                    context.rect(rectX, rectY, rect.width, rect.height);
                    context.closePath();

                    this.addRegionEventListener("mouseover", function () {
                        document.body.style.cursor = "pointer";
                        rectangles[n].scale = 1.07;
                    });
                    this.addRegionEventListener("mouseout", function () {
                        document.body.style.cursor = "default";
                        rectangles[n].scale = 1;
                    });

                    this.closeRegion();
                    context.restore();
                }
            });
        }

        window.onload = function(){
            var sources = {
                buffalo: "buffalo.png",
                indianapolis: "indianapolis.png",
                miami: "miami.png",
                nyjets: "nyjets.png"
            };

            loadImages(sources, initStage);

            $("#myCanvas").click(function (e) {


            }); 
        };
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="90">
    </canvas>
</body>
</html>

Answer 1

尝试使用事件mouseup：

this.addRegionEventListener("mouseup", function() {
    alert("mouse up");
});

HTML 5图像悬停调整大小和重定向

1 个答案: