The right way to draw a zoom circle on an image

beginners
#1

Hi everyone

I’m trying to draw an image, and draw a zoom circle on top of it, so when the user moves the mouse, the zoom circle moves and the user sees the zoomed image inside of it.

After running the program, I notice that the zoom circle acts strangely, but only in some parts of the image.
I recorded a short clip of this:

https://www.youtube.com/watch?feature=player_detailpage&v=7QaSrZIwhMw

Since I’m new to both openframeworks and opengl, I’m not sure if I am doing this the right way or not.
here’s my code:

  //DRAW IMAGE
    ofImage image;
    image.loadImage("images/image01.png");
    
    float height=840;
    float width=image.width*height/image.height;

    ofSetColor(255,255,255);
    image.draw(100,30,width,height);
    
    //DRAW ZOOM GLASS
    float radius=130;
    ofSetColor(57,74,84);
    ofNoFill();
    ofSetLineWidth(10);
    ofCircle(mouseX,mouseY,radius);

    //DRAW ZOOMED IMAGE INSIDE GLASS
    ofImage zoomedImage=image;
    float zoomFactor=image.height/height;

    ofSetColor(255,255,255);
    ofMesh meshNormal;
    ofMesh meshZoomed;
    ofPath path;

    path.setCircleResolution(100);
    path.setFilled(true);
    path.circle(mouseX,mouseY,radius-5);
    path.close();

    meshNormal=path.getTessellation();

    path.clear();
    path.setCircleResolution(100);
    path.setFilled(true);
    path.circle((mouseX-left)*zoomFactor,(mouseY-top)*zoomFactor,radius-5);
    path.close();

    meshZoomed=path.getTessellation();

    for (int i=0;i<meshNormal.getNumVertices();i++)
         meshNormal.addTexCoord(meshZoomed.getVertex(i));
    zoomedImage.bind();
    meshNormal.draw();
    zoomedImage.unbind();

Thanks in advance for your help.

#2

@poorya7, I think your texture coordinates for your magnifying glass mesh are getting mangled somewhere in there. I’m not sure exactly why. Below is a rewrite of your code that works on my machine. You don’t need to create and triangulate two meshes to create your magnification effect - you can just use the vertex positions to calculate the texture positions. Hopefully the variable names I used make that clear?

The code is written in ofSketch, but it’s easily translatable into whatever IDE you are using.

Hope this helps!

ofImage image;
float zoomFactor;
float radius;

ofVec2f imgPos;

void setup() {
    ofSetWindowShape(1000, 1000);
    image.loadImage("images/image01.png");
    zoomFactor = 2.0;	
    radius = 100;    
    imgPos.x = 100;
    imgPos.y = 30;
}

void draw() {

    ofSetColor(255,255,255);
    image.draw(imgPos.x, imgPos.y, image.width, image.height);

    ofVec2f mousePos(ofGetMouseX(), ofGetMouseY());
    
    ofSetColor(57, 74, 84);
    ofNoFill();
    ofSetLineWidth(10);
    ofSetCircleResolution(100);
    ofCircle(mousePos.x, mousePos.y, radius);

    ofPath magnifierPath;
    ofMesh magnifierMesh;
    magnifierPath.setCircleResolution(100);
    magnifierPath.setFilled(true);
    magnifierPath.circle(mousePos.x, mousePos.y, radius);
    magnifierPath.close();
    magnifierMesh=magnifierPath.getTessellation();

    for (int i=0; i<magnifierMesh.getNumVertices(); i++) {
        ofVec2f vertPos = magnifierMesh.getVertex(i);
        ofVec2f zoomedPos = ((vertPos - mousePos) / zoomFactor) + mousePos;
        ofVec2f uvPos = zoomedPos - imgPos;
        magnifierMesh.addTexCoord(uvPos);  
    }
         
    ofSetColor(255, 255, 255);
    image.bind();
        magnifierMesh.draw();
    image.unbind();
}
3 Likes
#3

Thanks a lot @mikewesthad.
I used your code and tweaked some variables a little and it works great!

1 Like