Kinetic JS, touch/hover this, affect all other objects

Question

So, I'll try to explain this as best as I can: I have a canvas with a bunch of objects to touch have a highlighted state (swapping a background image as you can see here). I'm only showing 2 examples here for the objects 'applications' and 'enterprises', but there are many of these objects. My goal is to allow one object to have its hover image, while the rest do not. Once I click on another object, I want that object's hover image to activate, and hover images for all other objects removed (essentially getting rid of the 'touched mouseout' function.

I'd like to say something like: 'If touchstart/mouseover this object, use its hover image, and disable all hover images on all other objects.

applications.on('touchstart mouseover', function() {
                        writeMessage(messageLayer, 'touchstart applications circle');
                        this.setFill({ image: images.applicationshover});
                        layer.draw();
                    });
applications.on('touchend mouseout', function() {
                        writeMessage(messageLayer, 'Mouseup applications circle');
                        this.setFill({ image: images.applicationsimage});
                        layer.draw();
                    });

enterprises.on('touchstart mouseover', function() {
                        writeMessage(messageLayer, 'touchstart enterprises circle');
                        this.setFill({ image: images.enterpriseshover});
                        layer.draw();
                    });
enterprises.on('touchend mouseout', function() {
                        writeMessage(messageLayer, 'Mouseup enterprises circle');
                        this.setFill({ image: images.enterprisesimage});
                        layer.draw();
                    });

score 1 · Answer 1 · answered Dec 16 '12 at 17:21

I hate answering questions to something I know little of without an example to tweak, but here goes....

Instead of what ever your doing, why not try this....
When you create your shapes/images add an attribute to them that is the image to use for the hover and not hover state.
Kinda like this....

 var thing = new Kinetic.Image({
            x: 0,
            y: 0,
            image: imageObj,
            hoverImage: hoverImageObj,
            notHoverImage: imageObj,
            name: 'image'
        });

Then you can have one routine for all images...

var hover = function() {
        writeMessage(messageLayer, 'touchstart enterprises circle');
        this.setFill({
            image: this.attrs.hoverImage
        });
        layer.draw();
    }

var notHover = function() {
        writeMessage(messageLayer, 'Mouseup enterprises circle');
        this.setFill({
            image: this.attrs.notHoverImage
        });
        layer.draw();
    }

icons.on('touchstart mouseover', hover);
icons.on('touchend mouseout', notHover);

There could be better ways to do this, Ive really got to go read the docs ;)

Kinetic JS, touch/hover this, affect all other objects

1 Answers1