Scaling manually works, but not when using ofScale


#1

Hi, I’m scaling an image by dragging the corners and the result is a bit strange. As I scale, I keep track of my new width and height. When I draw using ofScale and the scale ratio, I notice an offset between my image and the border. When I don’t use ofScale and just draw the image using the scaled width and height everything works.

Not using ofScale:


ofPushMatrix();
ofSetColor(255,255,255);
ofTranslate(pic->imageCenter.x, pic->imageCenter.y);
ofRotateZRad(pic->angle);
pic->image.draw(-1*pic->width/2, -1*pic->height/2, pic->width, pic->height); //Using scaled width and height![24%20PM|660x500](upload://npSyPZMqEEEbl1XcvuFaq2yLbMu.jpeg) ![26%20PM|647x500](upload://2Ec3s32cdc37EYDFMKA9kNsHYyG.jpeg) 
ofPopMatrix();

ofPushMatrix();
ofTranslate(pic->imageCenter.x, pic->imageCenter.y);
ofRotateZRad(pic->angle);
ofSetColor(255,0,0);
ofNoFill();
ofSetLineWidth(3);
ofDrawRectangle(-1*pic->width/2, -1*pic->height/2, pic->width, pic->height);

Using ofScale:


ofPushMatrix();
ofSetColor(255,255,255);
ofTranslate(pic->imageCenter.x, pic->imageCenter.y);
ofScale((pic->width/pic->image.getWidth()), (pic->height/pic->image.getHeight()), 0); //Scale using ratio
ofRotateZRad(pic->angle);
pic->image.draw(-1*pic->width/2, -1*pic->height/2); //Using original image dimensions
ofPopMatrix();

ofPushMatrix();
ofTranslate(pic->imageCenter.x, pic->imageCenter.y);
ofRotateZRad(pic->angle);
ofSetColor(255,0,0);
ofNoFill();
ofSetLineWidth(3);
ofDrawRectangle(-1*pic->width/2, -1*pic->height/2, pic->width, pic->height);

pic is just an object that contains the original image, scaled width, scaled height, and angle.

offset when using ofScale:


#3

It looks like the order of operations (scale and translate) are flipped within the ofPushMatrix() call. I’d hazard a guess here and say maybe it’s happening because of the new GLM math that’s being used instead of the old oF matrix and vector classes because the matrix multiplication order for transformations were done the other way around in the old oF libraries if I remember correctly and in GLM they’re done the more traditional computer graphics way.


#4

I tried changing the order of operations of scale and translate and the offset happens in the opposite direction.


#5

I figured it out. When drawing the image, I’m using the scaled width and height to set the origin and then applying scale, instead of using the original width and height.