crop with selection rectange (two images)

amnon.owed

Re: crop with selection rectange (two images)

9 months ago

Yes.

You can program it using basic methods available in Processing.

See the reference for: mouseX, mouseY, get(), PImage, mousePressed, mouseReleased, mouseDragged

lakotnik13

Re: crop with selection rectange (two images)

9 months ago

Need a little bit more help please. I still don't know how to do that.

tgptialves

Re: crop with selection rectange (two images)

9 months ago

Here you go:

int xi, yi;
int xf, yf;
boolean selection=false;
PImage test;
public void setup()
{
noFill();
test = loadImage("map2.jpg");
size(test.width, test.height);
image(test, 0, 0);
rectMode(CORNERS);
}
public void draw()
{
image(test, 0, 0);
if(selection)
rect(xi, yi, xf, yf);
}
public void mousePressed()
{
xi=mouseX;
yi=mouseY;
xf=xi;
yf=yi;
selection=true;
}
public void mouseDragged()
{
xf=mouseX;
yf=mouseY;
redraw();
}
public void mouseReleased()
{
Point[] vertices = new Point[2];
vertices[0]= new Point(Math.min(xf, xi), Math.min(yf, yi));
vertices[1]= new Point(Math.max(xf, xi), Math.max(yf, yi));
PImage crop = new PImage(vertices[1].x-vertices[0].x, vertices[1].y-vertices[0].y);
crop.copy(test, vertices[0].x, vertices[0].y, crop.width, crop.height, 0, 0, crop.width, crop.height);
selection=false;
test=crop;
displayWidth=crop.width;
displayHeight=crop.height;
frame.setSize(crop.width, crop.height);
image(crop, 0, 0);
}

lakotnik13

Re: Re: crop with selection rectange (two images)

9 months ago

thank you for your help :) but i still got some errors don't know why.
One more question, when i select a rectangle to crop, how can i resize the selected rectangle to whole size?

tgptialves

Re: crop with selection rectange (two images)

9 months ago

You mean, How do you resize processing window?

lakotnik13

Re: Re: crop with selection rectange (two images)

9 months ago

I meant something like that :

tgptialves

Re: crop with selection rectange (two images)

9 months ago

this:

crop.resize(50, 60);

If you put it after crop.copy, it will resize selected image to the size you desire.

lakotnik13

Re: Re: crop with selection rectange (two images)

9 months ago

i am trying this code in processing(Eclipse) and i dont know why but it doesnt work? can you look at my code and help me what is wrong?

import java.awt.Point;
import processing.core.PApplet;
import processing.core.PImage;

public class boxtest extends PApplet{
    private static final long serialVersionUID = -5721789361466581885L;;

    int xi, yi;
    int xf, yf;
    boolean selection=false;
    PImage test;

    public static void main(String[] args) {
        PApplet.main(new String[] {"boxtest"});
    }
    public void setup()
    {
        noFill();
        test = loadImage("img.jpg");
        size(test.width, test.height);
        image(test, 0, 0);
        rectMode(CORNERS);
    }

    public void draw()
    {
        background(0);
        image(test, 0,0,test.height, test.width);
        if(selection)
            rect(xi, yi, xf, yf);
    }

    public void mousePressed()
    {
        xi=mouseX;
        yi=mouseY;
        xf=xi;
        yf=yi;
        selection=true;
    }

    public void mouseDragged()
    {
        xf=mouseX;
        yf=mouseY;
        redraw();
    }

    public void mouseReleased()
    {
        Point[] vertices = new Point[2];
        vertices[0]= new Point(Math.min(xf, xi), Math.min(yf, yi));
        vertices[1]= new Point(Math.max(xf, xi), Math.max(yf, yi));

        PImage crop = new PImage(vertices[1].x-vertices[0].x, vertices[1].y-vertices[0].y);
        crop.copy(test, vertices[0].x, vertices[0].y, crop.width, crop.height, 0, 0, crop.width, crop.height);
        crop.resize(50, 60);
        selection=false;
        test=crop;
        displayWidth=crop.width;
        displayHeight=crop.height;
        frame.setSize(crop.width, crop.height);
        image(crop, 0, 0);
    }
}

tgptialves

Re: crop with selection rectange (two images)

9 months ago

I was doing it in Netbeans. What is exactly the problem?

lakotnik13

Re: Re: crop with selection rectange (two images)

9 months ago

when i crop this nothing happens just a rectangle is drawn on the selection.
I want to make that the selection is the only thing that remains on the background.
or is resized to cover the rest of the images that are not in crop area

really thanks for your help :)

lakotnik13

Re: crop with selection rectange (two images)

9 months ago

i posted a picture earlier.1. you select to crop 2.click the button 3.the crop selection is the only thing in the "background"

tgptialves

Re: crop with selection rectange (two images)

9 months ago

I think I got it:

image(test, 0,0,test.height, test.width); when it should be this: image(test, 0,0,test.width, test.height);

also you don't need this two line codes (I forgot to take them out in the first place):

displayWidth=crop.width;
displayHeight=crop.height;

and this also is not needed, since I pass crop to variable test:

image(crop, 0, 0);

The code is simple right now, I don't know if it serve your needs, but you must do some of the work too. Simple explanation about how it works:

- You load a image to the background.

- When you click somewhere on the window, he gets the mouse position and starts drawing a rectangle from where you started to where it is know (you must still press the mouse button). When you release the button, it will crop the image in the selected region and resize it to 50X60 pixels and show it on the screen.

lakotnik13

Re: Re: crop with selection rectange (two images)

9 months ago

does it work in Netbeans? can you past the code
for me it stil doesn't work

tgptialves

Re: crop with selection rectange (two images)

9 months ago

The code is simple right now, I don't know if it serve your needs, but you must do some of the work too. Simple explanation about how it works:

- You load a image to the background.

- When you click somewhere on the window, he gets the mouse position and starts drawing a rectangle from where you started to where it is know (you must still press the mouse button). When you release the button, it will crop the image in the selected region and resize it to 50X60 pixels and show it on the screen.

here goes again the code with comments:

int xi, yi; //Stores inital X,Y point of the mouse
int xf, yf; //Stores final X,Y point of the mouse while the left button is still being pressed
boolean selection=false; //Stores true if the user is selecting a region
PImage test; //loads an image
public void setup()
{
noFill();
test = loadImage("map2.jpg");
size(test.width, test.height);
image(test, 0, 0);
rectMode(CORNERS);
}
public void draw()
{
image(test, 0, 0);
if(selection) //If the user is selecting a region, then it draws a rectangle around that region
rect(xi, yi, xf, yf);
}
public void mousePressed()
{
xi=mouseX; //If mouse is pressed then it stores the initial X, Y of it.
yi=mouseY;
xf=xi; //The final X, Y will be the same, since the user has not dragged the mouse yet.
yf=yi;
selection=true; //Tells the program to draw the rectangle around the region
}
public void mouseDragged()
{
xf=mouseX; //Mouse was dragged, then final X, Y of the mouse is stored
yf=mouseY;
}
public void mouseReleased()
{
//Since the user can start in any of the corners we have to know the upper left corner and the lower right corner of the region
Point[] vertices = new Point[2];
vertices[0]= new Point(Math.min(xf, xi), Math.min(yf, yi)); //Calculates the upper left corner
vertices[1]= new Point(Math.max(xf, xi), Math.max(yf, yi)); //calculates the lower right corner
PImage crop = new PImage(vertices[1].x-vertices[0].x, vertices[1].y-vertices[0].y); //Inicialize crop image with the correspondant width and height
crop.copy(test, vertices[0].x, vertices[0].y, crop.width, crop.height, 0, 0, crop.width, crop.height);//crops the original image starting in the upper left corner with the desired width and height
selection=false; //The mouse was released, so there's no region selected
crop.resize(200,300); //Resize the cropped image to 200X300
test=crop; //Background image will now turn to cropped image
frame.setSize(crop.width, crop.height); //resize the processing window
}

lakotnik13

Re: Re: crop with selection rectange (two images)

9 months ago

thanks for help :)

tgptialves

Re: crop with selection rectange (two images)

9 months ago

No problem ;)

if any questions just ask ;)

If you want to click a button then you need to create a button that does exactly the same as the function "mouseReleased".