Thanks

Try this Drag Handle Example Code

https://forum.processing.org/topic/try-this-drag-handle-example-code

for drag handle re-sizing. Note moving and re-sizing both are drag operations, So there needs to be mode change to display the drag handles, while still supporting the move drag. The example above just addresses the drag handles. Adding the move capability should give you what you need.

Note the drag re-size example supports edge and corner move, but does not support shift-corner move,needed to maintain aspect ratio during re-size. It should be easy to add.

 Being new to programming you might want to tackle creating a class for you bank element. This will permit creating a set of attributes you would be manipulating via the mouse actions.

I was reworking my code and I was just thinking that an outline would be useful when I saw your second post. Thanks for the example, it really helps.

1. When the shapes over lap, why does the mouse move the shape behind rather than the one on top? I know this has something to do with the order that things are displayed, but I'm not sure.

2. I want to use this with processing.js, but when I tried it (with the background image) all I got was a grey box, with no shapes inside it and no background image. My image file was in the same folder as html file and the processing.min.js file. Any tips?

Here's the code with the images commented out. 

Now I'm going to figure out how to resize them.  

Thanks again.

1. //PImage clv;
2. int x, y, h, w;
3. boolean captured;
4. ShapeMove[] shapeMove = new ShapeMove[2];
5. 
   
6. void setup()
7. {
8.   size(800, 500);
9.   //clv = loadImage("clv.png");
10.   int i;
11.   i = 0;
12.   shapeMove[0] = new ShapeMove(x, y, 250, 250);
13.   shapeMove[1] = new ShapeMove(x, y, 250, 250);
14. }
15. 
    
16. void draw()
17. {
18.   background(255); 
19. //  fill(255);
20.   shapeMove[0].update();
21.   shapeMove[0].display();
22.   shapeMove[1].update();
23.   shapeMove[1].display();
24. }
25. 
    
26. class ShapeMove
27. {
28.   int x, y, h, w, origx, origy, deltax, deltay, posXdiff, posYdiff;
29.   boolean over;
30.   boolean locked = false;
31.   boolean press;
32.   boolean imCaptured = false;
33.   int xdragdelta, ydragdelta;
34. 
    
35.   ShapeMove(int _x, int _y, int _h, int _w)
36.   {
37.     x = _x;
38.     y = _y;
39.     h = _h;
40.     w = _w;
41.   }
42. 
    
43.   boolean over()
44.   {
45.     if (mouseX >= x && mouseX <=x+w &&
46.       mouseY >= y && mouseY <= y+h)
47.     {
48.       over = true;
49.       return true;
50.     }
51.     else 
52.     {
53.       over = false;
54.       return false;
55.     }
56.   }
57. 
    
58.   void update()
59.   {
60.     if (over() && mousePressed && !imCaptured && !captured)
61.     {
62.       deltax = x - mouseX;
63.       deltay = y - mouseY;
64.       origx = x;
65.       origy = y;
66.       captured = true;
67.       imCaptured = true;
68.     }
69.     if(!mousePressed && imCaptured)
70.     {
71.       captured = false;
72.       imCaptured = false;
73.     }
74.     if (imCaptured)
75.     {
76.       xdragdelta = x - (mouseX + posXdiff);
77.       ydragdelta = y - (mouseY + posYdiff);
78.       x = mouseX + deltax;
79.       y = mouseY + deltay;
80.     }
81.   } 
82. 
    
83.   void display()
84.   {
85.     if (over()) {
86.       fill (0);
87.     }
88.     else { 
89.       fill (80);
90.     }  
91.     rect(x, y, h, w);
92.   }
93. }

As written the mouse can be over multiple shapes so each will have the fill changed. To avoid this you would need a global to maintain the isOver state. Otherwise multiple shapes will be fill(0) when the mouse if over more than one.

Try not setting captured and as you move you will collect multiple shapes in the move process, which is analogous to what is happening with fill.

---------------

Editorial comments:

1. In draw use for loops for the Shapemove[i]. This makes adding more shapes only require setup changes.

2. Have the shapes be different size so you can tell them apart. It makes deducing what is happening easier.

 for (int i = shapeMove.length-1; i >=0; i--) {

      shapeMove[i].update();

      shapeMove[i].display();

}

Use global

 

boolean isOverSomething;

 and class attribute 

boolean overMe = false;

 with class method 

boolean over(){};

and a check in the form

if(isOverSomething) // over something

{

if(overMe) // over me!

{

    if(!over())

    {

overMe = false;

isOverSomething = false;

}

}

    }

}

else // not over anything at the moment

{

if(over()) // over me!

{

overMe = true;

isOverSomething = true;

}

}

   

This changes the stack order of the squares, but the mouse still grabs the one on the bottom. What I need for it to work is something like the following, but that gives me a null pointer error.

  for (int i = 0; i < 2; i++) {

    shapeMove[i].display();

  }

  for (int i = shapeMove.length-1; i >=0; i--) 

  {

    shapeMove[i].update();

  }

It works properly if I write it out like this: 

  shapeMove[1].update();

  shapeMove[0].update();

  shapeMove[0].display();

  shapeMove[1].display();