• Post Reply Bookmark Topic Watch Topic
  • New Topic

how to make rectangle by dragging over the image ?  RSS feed

 
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
 
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Making a dashed rectangle, like for selecting an area, is not trivial -- at least I haven't found simple way to do it.  Here's how I implemented it:
 
Bartender
Posts: 18884
77
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The original way to make a "rubberband" rectangle was by simply drawing the rectangle using XOR operations. To draw the rectangle, you'd draw in XOR mode, to resize the rectangle (drag), you'd XOR again (negating the first XOR), then XOR a new rectangle.

That worked very well on monochrome displays such as the Macintosh, where the rectangle was literally a choice between black bits and white ones and it guaranteed that the rectangle would be visible regardless of the color of the underlying image. Plus since 2 XOR's exactly cancel no extra work was required.

The scheme has also been used on color displays (for example, the Commodore Amiga), where the rubberband rectangle's colors might be a bit odd because you were inverting different colored pixels, but the idea was obvious.

More sophisticated graphics systems might include an overlay facility where you'd draw the rectangles in a separate rendering plane which would be superimposed over the background.

Failing that, on systems where you build up a paint (render) list and a paint (refresh) method, the rubberband rectangle just becomes one of the painted elements and you force a repaint of the affected areas.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
thanks knute you make my day but cant we use stackpane in replace of pane bcz there is three vbox in my application so by using pane the other two windows cut from side and when im using stackpane it start crop from middle.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
and there is problem when im releasing the mouse the selection doesnt stay there.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Exception in thread "JavaFX Application Thread" java.lang.IllegalArgumentException: Children: duplicate children added: parent = Pane@7cac9ed3[styleClass=root]
at javafx.scene.Parent$2.onProposedChange(Parent.java:454)
at com.sun.javafx.collections.VetoableListDecorator.add(VetoableListDecorator.java:206)
at pressmonitor.HV.lambda$start$6(HV.java:150)
at com.sun.javafx.event.CompositeEventHandler.dispatchBubblingEvent(CompositeEventHandler.java:86)
at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:238)
at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:191)
at com.sun.javafx.event.CompositeEventDispatcher.dispatchBubblingEvent(CompositeEventDispatcher.java:59)
at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:58)
at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
at com.sun.javafx.event.EventUtil.fireEventImpl(EventUtil.java:74)
at com.sun.javafx.event.EventUtil.fireEvent(EventUtil.java:54)
at javafx.event.Event.fireEvent(Event.java:198)
at javafx.scene.Scene$MouseHandler.process(Scene.java:3757)
at javafx.scene.Scene$MouseHandler.access$1500(Scene.java:3485)
at javafx.scene.Scene.impl_processMouseEvent(Scene.java:1762)
at javafx.scene.Scene$ScenePeerListener.mouseEvent(Scene.java:2494)
at com.sun.javafx.tk.quantum.GlassViewEventHandler$MouseEventNotification.run(GlassViewEventHandler.java:381)
at com.sun.javafx.tk.quantum.GlassViewEventHandler$MouseEventNotification.run(GlassViewEventHandler.java:295)
at java.security.AccessController.doPrivileged(Native Method)
at com.sun.javafx.tk.quantum.GlassViewEventHandler.lambda$handleMouseEvent$353(GlassViewEventHandler.java:417)
at com.sun.javafx.tk.quantum.QuantumToolkit.runWithoutRenderLock(QuantumToolkit.java:389)
at com.sun.javafx.tk.quantum.GlassViewEventHandler.handleMouseEvent(GlassViewEventHandler.java:416)
at com.sun.glass.ui.View.handleMouseEvent(View.java:555)
at com.sun.glass.ui.View.notifyMouse(View.java:937)
at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at com.sun.glass.ui.win.WinApplication.lambda$null$147(WinApplication.java:177)
at java.lang.Thread.run(Thread.java:748)see this is a error
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
this is what happnd when i applied to my project refrence image is attached.
pane1.png
[Thumbnail for pane1.png]
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
and when i use stackpane the right box content doesnt cut but the mouse drag start from middle.
stackpane.png
[Thumbnail for stackpane.png]
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
and after that what save function should used writable image aur something else.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
im trying to save like this but its not saving
 
Knute Snortum
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Niti Kapoor wrote: im trying to save like this but its not saving


Do you see "F5 pressed" on the console?
 
Knute Snortum
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Niti Kapoor wrote:and there is problem when im releasing the mouse the selection doesnt stay there.


That's on purpose.  If you don't want that, remove this line:
 
Knute Snortum
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Niti Kapoor wrote:and when i use stackpane the right box content doesnt cut but the mouse drag start from middle.


Yeah, I don't think my solution works well with StackPane.  That's because StackPane centers every node you add to it.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
yes f5 prints in console.  and then how should my design would be create right with pane? and i had remove the selection already thanks.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
and     img.setOnKeyPressed(new EventHandler<KeyEvent>() {
public void handle(final KeyEvent keyEvent) {
   if (keyEvent.getCode() == KeyCode.F5) {
    System.out.println("F5 pressed");
    //Stop letting it do anything else
    WritableImage croppedImage = selection.snapshot(null, null);
File file = new File("C:/temp/snapshot.jpg");
       try {
           ImageIO.write(SwingFXUtils.fromFXImage(croppedImage, null), "jpg", file);
       } catch (IOException ex) {
         
       }
            System.out.println("snapshot saved: " + file.getAbsolutePath());
   }
} if im saving like this its saving the the white color area not the selected image on back of the selection.
});
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
designing problem is solve by setting preffered size thanks please help in saving part. like this blank image is saving attached image for refrence what exact output im getting.
snapshot.jpg
[Thumbnail for snapshot.jpg]
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
there is one problem with your example as i want to cut many portion in  one image the starting portion which is selected firt get remove.
 
Knute Snortum
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Niti Kapoor wrote:designing problem is solve by setting preffered size thanks please help in saving part. like this blank image is saving attached image for refrence what exact output im getting.


Here is my OnKeyPressed event handler.  It seems to save the cropped image just fine.
 
Knute Snortum
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Niti Kapoor wrote:there is one problem with your example as i want to cut many portion in  one image the starting portion which is selected firt get remove.


This is proving difficult; I don't know why.  Why don't you keep working on your code as I look into this more.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
THANKS BUT I HAD SOLVED SAVING PROBLEM
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
THANKS BUT I HAD SOLVED SAVING PROBLEM
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
BUT the selection is made to single part in image i want to select many parts at same time.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
like in this refrence image we can select multiple area at same time  and paint it to white.
image-selection.png
[Thumbnail for image-selection.png]
 
Knute Snortum
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Select many parts of the image and then what?  Save them all in one image?  Separate images?

What have you tried?  What was the problem?
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
no when i select first part and then when i move to select another part first part remove i want to save all parts at same time. hope you
understand by seeing image.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
THIS IS WHAT I NEED TO APPLY HOW CAN I APPLY IN MY CODE.?
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
AND PLUS I NEED TO FIND COORDINATES IN THIS EXAMPLE AND THEN APPLY IN MY PROJECT.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
im getting error like this local variable refrenced lamba expression should be final or effectively final.
error log
 
Knute Snortum
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Niti Kapoor wrote:AND PLUS I NEED TO FIND COORDINATES IN THIS EXAMPLE AND THEN APPLY IN MY PROJECT.


Please don't use ALL CAPS.  This is a professional forum.
 
Knute Snortum
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Caused by: java.lang.RuntimeException: Uncompilable source code - illegal start of expression
    at pressmonitor.JavaFxSelectPlay.start(JavaFxSelectPlay.java:51)


It looks like you have uncompilable code at line 51 of JavaFxSelectPlay.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
there is no error but the thing is working in scene why not in webview
 
Knute Snortum
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Why it's "not working" when you click-drag-release on a non-image in webview: you are never adding the Group with the rectangles to the Scene.

Why it's "not working" when you click-drag-release on a image in webview: it looks like the this function is already been implemented to drag the image and paste it somewhere.  You may have to take a snapshot of the webview and work from that.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
ya your right but when i add to root like this  root.getChildren().add(group_for_rectangles); its working but not properly.
 
Knute Snortum
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Niti Kapoor wrote:...its working but not properly.


I have no idea what this means. 
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
this means its not dragging properly for select.
 
Knute Snortum
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm having trouble visualizing how this multiple select rectangles would be saved as an image, as an image is only a rectangle and not a polygon.
 
Niti Kapoor
Ranch Hand
Posts: 357
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
it will save through database by knowing the coordiantes of selected area.
 
Knute Snortum
Sheriff
Posts: 4428
127
Chrome Eclipse IDE Java Postgres Database VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So maybe the user can draw any number of rectangles until you press F5 or something?  How does the user signal thay that want to store this group of rectangles?
 
Consider Paul's rocket mass heater.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!