Redraw an Image on MouseEvent

General JUCE discussion
1

Hi,

I was searching in this forum but I can’t find an answer for my problem.

I don’t know how to redraw an specific image(Component) on MouseDragEvent.

I painted all images in the paint(Graphics& g) method and added the images to ImageComponents. Then I added an MouseListener to one ImageComponent for testing and now I want to drag the specific ImageComponent. How can I do this?

I wrote the MouseDrag method in the public section of the class.

I hope someone can help me :slight_smile:

2

Just move the component, it’ll take care of redrawing itself.

3

There is my problem. How?

I have this code in my paint method:

File listenerActiveFile("listenerActive.png");

Image listenerActive = ImageFileFormat::loadFrom(listenerActiveFile);

ImageComponent listenerImageComponent("Image Component for the Listener");
listenerImageComponent.setImage(listenerActive);
listenerImageComponent.addMouseListener(this, true);

g.drawImage(listenerActive, view.getListenerPosition().getX()-50, view.getListenerPosition().getY()-40.5, 100, 75, 0, 0, 100, 75);

And the MouseDrag method in the header file:

public:
    void mouseDrag(const MouseEvent &e) {
        view.setListenerPosition(10+e.getMouseDownX(), 10+e.getMouseDownY());
        
        // How to move/ redraw the image at the mouse position?
    }
4

So you’re creating an ImageComponent, and then deleting it immediately…? Have a look at some examples of how to add child components to a parent.

5

Now I have an ImageComponent added to the AudioProcessorEditor and set the Image to it. Also the MouseListener. But even now, if I try to move or drag the ImageComponent to another position, the MousePosition will be logged but the ImageComponent does not repaint itself. What is wrong on my code? Or does the moving just work with child components on parent components? Like: Surface as parentComponent with the ImageComponent as childComponent?

PluginEditor.h

void mouseDrag(const MouseEvent &e) {
        listenerImageComponent->setBounds(e.getPosition().getX()-50, e.getPosition().getY()-32.5,100, 75); // tried the same with e.setTopLeftPosition(...);
        listenerImageComponent->repaint();
        listenerImageComponent->moved();
    }

PluginEditor.cpp

SweetSpotterAudioProcessorEditor::SweetSpotterAudioProcessorEditor (SweetSpotterAudioProcessor* ownerFilter)
    : AudioProcessorEditor (ownerFilter)
{
    // This is where our plugin's editor size is set.
    setSize (500, 500);
    
    File listenerActiveFile("listenerActive.png");
    Image listenerActive = ImageFileFormat::loadFrom(listenerActiveFile);

    listenerImageComponent = new ImageComponent("Image Component for the Listener");
    listenerImageComponent->setImage(listenerActive);
    listenerImageComponent->addMouseListener(this, true);
    
    addAndMakeVisible(listenerImageComponent);
}

//==============================================================================
void SweetSpotterAudioProcessorEditor::paint (Graphics& g)
{   
    componentsOrigin = Point<int>(getWidth()/2, getHeight()/2-175);

    listenerImageComponent->setBounds(componentsOrigin.getX()-listenerImageComponent->getWidth()/2, componentsOrigin.getY()+view.getY_Front()-listenerImageComponent->getHeight()/2, 100, 75);
}
6

Your code is completely muddled, I don’t know where to begin! Why not have a look at the DragOntoDesktopDemoComp in the juce demo - that’s a component that lets you drag it around.