mask the original image without losing any data

[yunas]

HELLO

i am newbie to this core graphics or cv . I need a little help here. Can you plz guide me how to draw an image using openGL ES with my own cordinates or any other idea...

consider my points are topleft (40,160) topRight(80,160) bottomLeft(0,40) bottomRight(160,40)

i want my image to be drawn with in these points.....
and is it possible to do the same task without using OPENGL, I have seen some techniques that mask the image according to the mask.png provided... but that cuts the image i dont want my image to be cut instead i want it to fit in the region provided in my mask.png.... without losing any data

[Kalimba]

Please don't attach irrelevant polls to your posts.

[smasher]

Does it have to be OpenGL, or is UIKit ok? I would not start into OpenGL if this is your first iPhone program.

You can create an image and set it's frame in your view controller with code like this:

//load the image
UIImage *myImage = [UIImage imageNamed:@"test.png"];

//create the view for the image
UIImageView *myImageView = [[UIImageView alloc] initWithImage:myImage];

//set the frame using your coordinates
myImageView.frame = CGRectMake(0,40, // x,y
					40, 120); //width, height

[self.view addSubview: myImageView];

This code will only work to draw the image as a rectangle. Are you trying to bend the the image into some other non-rectangular shape?

If you're trying to skew the layers in some way then you can use a CATransform3D. Check out these examples:
UIView perspective transform - Stack Overflow
Watching Apple: Core Animation: 3D Perspective

I don't understand about the mask.png - what does it look like, and what are you trying to do with it?

[yunas]

well this was my first post so i thought it is necessary to add poll. Am sorry for that

[yunas]

well I have worked on some other projects but this is my first time dealing with images in that much detail
the masking i was asking about, you can see it here
How to Mask an Image

i have gone through the links you have snt me but i have solved the problem using the textures

const GLfloat squareVertices[] = {
-1.5f, -2.4f,
1.5f, -2.4f,
-1.5f, 0.0f,
1.5f, 0.0f
};
const GLfloat squareTexCoords[] = {
0.0, 1.0,
1.0, 1.0,
0.0, 0.5,
1.0, 0.5
};

glVertexPointer(2, GL_FLOAT, 0, squareVertices2);
glEnableClientState(GL_VERTEX_ARRAY);
glTexCoordPointer(2, GL_FLOAT, 0, squareTexCoords2);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);

glEnable(GL_TEXTURE_2D);

glBindTexture(GL_TEXTURE_2D, _textures[kUpperTexture]);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, _minTexParam);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, _magTexParam);
if (_anisotropySupported)
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAX_ANISOTROPY_EXT, _anisotropyTexParam);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

glDisable(GL_TEXTURE_2D);

glBindRenderbufferOES(GL_RENDERBUFFER_OES, _viewRenderbuffer);
[_context presentRenderbuffer:GL_RENDERBUFFER_OES];

this wuld be a really creepy code but as if you are master in image processing then i believe you can easily under stand how i have dealt with the world window and my window in this code.... any ways thnx alot 4 ur help and time

[smasher]

I guess I still don't understand your question and what your needs are.

Does it have to be OpenGL, or is UIKit ok? Are you trying to bend the the image into some other four-sided shape like a trapezoid, or are you trying to mask it inside another image, like cutting it into a puzzle piece?

[yunas]

i guess i am really bad at explaining ...
well being more simple and precise
i want my image to be drawn in an irregular shape.
The whole image will reside in that shape without losing any data...

for example

i decide a region i.e.
Left top (0,0)
left bottom (0,100)
Right top (250,0)
Right bottom (330,320)

these four points will make a shape that will be irregular shape.

now i want my image to be drawn in that region/shape.

and i want to know both ways i.e. in opengl and uikit

[smasher]

Okay, it sounds like you're trying to bend the image into shapes like this:

http://upload.wikimedia.org/wikipedi...terals.svg.png

Create a UIImageView, put it on the screen, then set the transform of the layer to get the "skew" effect you're asking for.

myImageView.layer.transform = mySkewTransform;

There's some info on how to calculate the transform here:
iPhone image stretching (skew) - Stack Overflow

CATransform3D compute_transform_matrix(X, Y, W, H, x1a, y1a, x2a, y2a, x3a, y3a, x4a, y4a) {
    var y21 = y2a - y1a, 
        y32 = y3a - y2a,
        y43 = y4a - y3a,
        y14 = y1a - y4a,
        y31 = y3a - y1a,
        y42 = y4a - y2a;

    var a = -H*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42);
    var b = W*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);
    var c = H*X*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42) - H*W*x1a*(x4a*y32 - x3a*y42 + x2a*y43) - W*Y*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);

    var d = H*(-x4a*y21*y3a + x2a*y1a*y43 - x1a*y2a*y43 - x3a*y1a*y4a + x3a*y2a*y4a);
    var e = W*(x4a*y2a*y31 - x3a*y1a*y42 - x2a*y31*y4a + x1a*y3a*y42);
    var f = -(W*(x4a*(Y*y2a*y31 + H*y1a*y32) - x3a*(H + Y)*y1a*y42 + H*x2a*y1a*y43 + x2a*Y*(y1a - y3a)*y4a + x1a*Y*y3a*(-y2a + y4a)) - H*X*(x4a*y21*y3a - x2a*y1a*y43 + x3a*(y1a - y2a)*y4a + x1a*y2a*(-y3a + y4a)));

    var g = H*(x3a*y21 - x4a*y21 + (-x1a + x2a)*y43);
    var h = W*(-x2a*y31 + x4a*y31 + (x1a - x3a)*y42);
    var i = W*Y*(x2a*y31 - x4a*y31 - x1a*y42 + x3a*y42) + H*(X*(-(x3a*y21) + x4a*y21 + x1a*y43 - x2a*y43) + W*(-(x3a*y2a) + x4a*y2a + x2a*y3a - x4a*y3a - x2a*y4a + x3a*y4a));

CATransform3D skewTransform;
skewTransform.m11 = a;
skewTransform.m12 = b;
skewTransform.m13 = 0;
skewTransform.m14 = c;
skewTransform.m21 = d;
skewTransform.m22 = e;
skewTransform.m23 = 0;
skewTransform.m24 = f;
skewTransform.m31 = 0;
skewTransform.m32 = 0;
skewTransform.m33 = 1;
skewTransform.m34 = 0;
skewTransform.m41 = g;
skewTransform.m42 = h;
skewTransform.m43 = 0;
skewTransform.m44 = i;

return skewTransform;
}

The OpenGL method is simpler, if you have openGL set up already. Just create two triangles that cover the area you want; no transformations needed. Just remember to put the vertices in the correct order:

const GLfloat squareVertices[] = {
     -1.5f, -2.4f, //NW corner
     1.5f, -2.4f, //NE corner
     -1.5f, 0.0f, //SW corner
     1.5f, 0.0f //SE corner
};

Judging from those coordinates, you have openGL set up with a very small coordinate system. When doing 2D work I would change your GL view setup so that you can enter coordinates in pixels; they you can just plug your coordinates into that array.

[yunas]

wow.... that seemed pretty amazing but I am not able to implement it.
These all points and coordinates thing jst passed over my head.
I will be really thankful to you if you can provide me sourcecode of Xcode that is actually implementing it.

[Guit]

Did you succeed?
I am trying to apply the technique of stackoverflow, without success...
I would like to find the way to transform a CAlayer defined by a CGRect, to a quadrilateral defined by four points (x1,y1)(x2,y2)(x3,y3)(x4,y4)

[yunas]

Originally Posted by Guit

Did you succeed?
I am trying to apply the technique of stackoverflow, without success...
I would like to find the way to transform a CAlayer defined by a CGRect, to a quadrilateral defined by four points (x1,y1)(x2,y2)(x3,y3)(x4,y4)

Hi Guit
well mate i had an image and i had an irregular shape and i wanted to draw that image into that irregular shape.


const GLfloat squareVertices[] = {
-1.5f, -2.4f,
1.5f, -2.4f,
-1.5f, 0.0f,
1.5f, 0.0f
};
const GLfloat squareTexCoords[] = {
0.0, 1.0,
1.0, 1.0,
0.0, 0.5,
1.0, 0.5
};

i used these two arrays to complete my task.... if you can provide a little more detail i will try to help you out....

[sindhutiwari]

I need to crop a image into irregular shape and deskew .

I have used this

Can some one please tell me the parameters which i need to pass here .. i mean to say what is X and Y here ??

i have passed center.x and center.y of the image and it resulted in a blank screen.

(void)compute_transform_matrix:(float)X:(float)Y:(float)W:(float)H:(float)x1a:(float)y1a:(float)x2a:(float)y2a:(float)x3a:(float)y3a:(float)x4a:(float)y4a
{
	float y21 = y2a - y1a, 
	y32 = y3a - y2a,
	y43 = y4a - y3a,
	y14 = y1a - y4a,
	y31 = y3a - y1a,
	y42 = y4a - y2a;
	
    float a = -H*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42);
    float b = W*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);
    float c = H*X*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42) - H*W*x1a*(x4a*y32 - x3a*y42 + x2a*y43) - W*Y*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);
	
    float d = H*(-x4a*y21*y3a + x2a*y1a*y43 - x1a*y2a*y43 - x3a*y1a*y4a + x3a*y2a*y4a);
    float e = W*(x4a*y2a*y31 - x3a*y1a*y42 - x2a*y31*y4a + x1a*y3a*y42);
    float f = -(W*(x4a*(Y*y2a*y31 + H*y1a*y32) - x3a*(H + Y)*y1a*y42 + H*x2a*y1a*y43 + x2a*Y*(y1a - y3a)*y4a + x1a*Y*y3a*(-y2a + y4a)) - H*X*(x4a*y21*y3a - x2a*y1a*y43 + x3a*(y1a - y2a)*y4a + x1a*y2a*(-y3a + y4a)));
	
    float g = H*(x3a*y21 - x4a*y21 + (-x1a + x2a)*y43);
    float h = W*(-x2a*y31 + x4a*y31 + (x1a - x3a)*y42);
    float i = W*Y*(x2a*y31 - x4a*y31 - x1a*y42 + x3a*y42) + H*(X*(-(x3a*y21) + x4a*y21 + x1a*y43 - x2a*y43) + W*(-(x3a*y2a) + x4a*y2a + x2a*y3a - x4a*y3a - x2a*y4a + x3a*y4a));
	
	CATransform3D skewTransform;
	skewTransform.m11 = a;
	skewTransform.m12 = b;
	skewTransform.m13 = 0;
	skewTransform.m14 = c;
	skewTransform.m21 = d;
	skewTransform.m22 = e;
	skewTransform.m23 = 0;
	skewTransform.m24 = f;
	skewTransform.m31 = 0;
	skewTransform.m32 = 0;
	skewTransform.m33 = 1;
	skewTransform.m34 = 0;
	skewTransform.m41 = g;
	skewTransform.m42 = h;
	skewTransform.m43 = 0;
	skewTransform.m44 = i;
	
	imgImage.layer.transform = skewTransform;
}

[yunas]

for me it seems not to pass the center x and y instead pass the screen portion/coords (x,y,w,h) you want to crop and then skew.


Ah, i just went through the blog where this code was posted...
Well for you,
http://iphonedevelopment.blogspot.co...part-6_25.html
try this blog... It will teach/guide you on how to blend an image... plus the author has pasted his code as well...
Happy coding

Originally Posted by sindhutiwari

I need to crop a image into irregular shape and deskew .

I have used this

Can some one please tell me the parameters which i need to pass here .. i mean to say what is X and Y here ??

i have passed center.x and center.y of the image and it resulted in a blank screen.

(void)compute_transform_matrix:(float)X:(float)Y:(float)W:(float)H:(float)x1a:(float)y1a:(float)x2a:(float)y2a:(float)x3a:(float)y3a:(float)x4a:(float)y4a
{
	float y21 = y2a - y1a, 
	y32 = y3a - y2a,
	y43 = y4a - y3a,
	y14 = y1a - y4a,
	y31 = y3a - y1a,
	y42 = y4a - y2a;
	
    float a = -H*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42);
    float b = W*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);
    float c = H*X*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42) - H*W*x1a*(x4a*y32 - x3a*y42 + x2a*y43) - W*Y*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);
	
    float d = H*(-x4a*y21*y3a + x2a*y1a*y43 - x1a*y2a*y43 - x3a*y1a*y4a + x3a*y2a*y4a);
    float e = W*(x4a*y2a*y31 - x3a*y1a*y42 - x2a*y31*y4a + x1a*y3a*y42);
    float f = -(W*(x4a*(Y*y2a*y31 + H*y1a*y32) - x3a*(H + Y)*y1a*y42 + H*x2a*y1a*y43 + x2a*Y*(y1a - y3a)*y4a + x1a*Y*y3a*(-y2a + y4a)) - H*X*(x4a*y21*y3a - x2a*y1a*y43 + x3a*(y1a - y2a)*y4a + x1a*y2a*(-y3a + y4a)));
	
    float g = H*(x3a*y21 - x4a*y21 + (-x1a + x2a)*y43);
    float h = W*(-x2a*y31 + x4a*y31 + (x1a - x3a)*y42);
    float i = W*Y*(x2a*y31 - x4a*y31 - x1a*y42 + x3a*y42) + H*(X*(-(x3a*y21) + x4a*y21 + x1a*y43 - x2a*y43) + W*(-(x3a*y2a) + x4a*y2a + x2a*y3a - x4a*y3a - x2a*y4a + x3a*y4a));
	
	CATransform3D skewTransform;
	skewTransform.m11 = a;
	skewTransform.m12 = b;
	skewTransform.m13 = 0;
	skewTransform.m14 = c;
	skewTransform.m21 = d;
	skewTransform.m22 = e;
	skewTransform.m23 = 0;
	skewTransform.m24 = f;
	skewTransform.m31 = 0;
	skewTransform.m32 = 0;
	skewTransform.m33 = 1;
	skewTransform.m34 = 0;
	skewTransform.m41 = g;
	skewTransform.m42 = h;
	skewTransform.m43 = 0;
	skewTransform.m44 = i;
	
	imgImage.layer.transform = skewTransform;
}