JavaFX Round image using SceneBuilder(with Clip) - java

In the code it is pretty easy:
// Clip
Rectangle rect = new Rectangle(168, 168);
rect.setArcHeight(30);
rect.setArcWidth(30);
rect.setEffect(new Reflection());
imageView.setClip(rect); //where imageView is an ImageView
I am trying to do it using SceneBuilder but i don't know
how..Any help will be appreciated.

If i well understood you are trying to populate a node (like a box or box or a pane or whatever you want)with your object rectangle, i think it's not possible doing it from the Scene Builder, you must do it from the code.
If you want to do it you have add it to a subScene i think!
PerspectiveCamera camera = new PerspectiveCamera();
ImageView imageview = new ImageView();
Rectangle rect = new Rectangle(168, 168);
rect.setArcHeight(30);
rect.setArcWidth(30);
rect.setEffect(new Reflection());
imageview.setClip(rect);
Group g = new Group(imageview);
SubScene subSceneInsertion = new SubScene(g, 919, 600, true, SceneAntialiasing.BALANCED);
subSceneInsertion.setFill(Color.DARKSLATEGREY);//yourcolour
subSceneInsertion.setCamera(camera);
Group groupForSubScene = new Group(subSceneInsertion);
groupForSubScene.autoSizeChildrenProperty().setValue(Boolean.TRUE);
groupForSubScene.setAutoSizeChildren(true);
hBoxForRectangle.getChildren().add(groupForSubScene);

Related

Fit background image in Control SWT

I am trying to set a background image for a ListViewer.
listViewer = new ListViewer(parent);
listViewer.setContentProvider(this);
listViewer.setLabelProvider(this);
listViewer.getList().setLayoutData(new GridData(SWT.FILL,SWT.FILL,true,true));
Image image = new Image(Display.getDefault(), ListPart.class.getResourceAsStream("/icons/blurred.jpg"));
Rectangle imageBounds = image.getBounds();
Rectangle rectangle = listViewer.getList().getBounds();
GC gc = new GC(listViewer.getList());
gc.drawImage(image, imageBounds.x, imageBounds.y,imageBounds.width,imageBounds.height,rectangle.x,rectangle.y,rectangle.width,rectangle.height);
listViewer.getList().setBackgroundImage(image);
I tried to draw the image with GC but it doesn't work. If I leave the image as it is, it doesn't stretch after the List.
Is there an easier way to do this?

Content Doesn't fit the ScrollPane. Can't Scroll until End

I'm trying to fit my Content to my scrollPane. However, I cannot scroll until the end of the content. It work if resize the whole pane to my PC screen (1920,1080), however it can't fit for my laptop resolution (1366,768).
This is what happen
///////////////////////////////////////////////////CENTER SIDE OF THE PANE///////////////////////////////////////////////////
//Scroll Pane for insert centerbox in it
ScrollPane scroll = new ScrollPane();
//Grid pane for center box
GridPane centerbox= new GridPane();
centerbox.setHgap(15);
centerbox.setVgap(30);
//Input picture
javafx.scene.image.Image img = new
javafx.scene.image.Image(getClass().getResource("arcade.jpg").toExternalForm());
ImageView imgv1 = new ImageView(img);
imgv1.setFitHeight(150);
imgv1.setFitWidth(150);
imgv1.setVisible(true);
Image img2 = new Image(getClass().getResource("Bowling.jpg").toExternalForm());
ImageView imgv2 = new ImageView(img2);
imgv2.setFitHeight(150);
imgv2.setFitWidth(150);
imgv2.setVisible(true);
Image img3 = new Image(getClass().getResource("cc.jpg").toExternalForm());
ImageView imgv3 = new ImageView(img3);
imgv3.setFitHeight(150);
imgv3.setFitWidth(150);
imgv3.setVisible(true);
Image img4 = new Image(getClass().getResource("circus.jpg").toExternalForm());
ImageView imgv4 = new ImageView(img4);
imgv4.setFitHeight(150);
imgv4.setFitWidth(150);
imgv4.setVisible(true);
Image img5= new Image(getClass().getResource("karaoke.jpg").toExternalForm());
ImageView imgv5 = new ImageView(img5);
imgv5.setFitHeight(150);
imgv5.setFitWidth(150);
imgv5.setVisible(true);
Image img6= new Image(getClass().getResource("kidzania.jpg").toExternalForm());
ImageView imgv6 = new ImageView(img6);
imgv6.setFitHeight(150);
imgv6.setFitWidth(150);
imgv6.setVisible(true);
Image img7= new Image(getClass().getResource("skatepark.jpg").toExternalForm());
ImageView imgv7 = new ImageView(img7);
imgv7.setFitHeight(150);
imgv7.setFitWidth(150);
imgv7.setVisible(true);
//////////////////////////////////////////////COMBINING ALL THE PANE TOGETHER////////////////////////////////////////////////////////
//Place Node on Pane(1)
centerbox.add(imgv1,0,0);
Button buy = new Button("Reserve");
Label l1 = new Label();
l1.setText("'Arcade-ium'\n\n\nAt Arcade-ium, you can enjoy a lot of classic and modern arcade game.\nWe assure you your satisfaction");
l1.setFont(Font.font("Helvetica",FontWeight.BOLD,20));
centerbox.add(buy,2,0);
centerbox.add(l1,1,0);
//Event Handler to change scene to reservepage
buy.setOnAction(e->{
Stage stg = (Stage)buy.getScene().getWindow();
stg.setScene(rp.getScene1());
});
///Repeat until 7 node
//Place Node on Pane(7)
centerbox.add(imgv7,0,6);
Button buy6 = new Button("Reserve");
Label l7 = new Label();
l7.setText("'xTremePark'\n\nxTremePark was built in 2011. We have a lot of facilities here to facilitate our youngster who\nlove to take the risk and go beyond.");
l7.setFont((Font.font("helvetica",FontWeight.BOLD,20)));
centerbox.add(l7,1,6);
centerbox.add(buy6,2,6);
//Event Handler to change scene to reservepage
buy6.setOnAction(e->{
Stage stg = (Stage)buy6.getScene().getWindow();
stg.setScene(rp.getScene7());
});
//Formatting the pane
scroll.setContent(centerbox);
//Im using borderpane for the whole scene. And Im going to insert the scrollpane into the center.
I cannot seem to scroll until the end my content when i run the program. I tried to use .setMinHeight() and .setPrefHeight().
but nothings work. So is there any way for me to set how much the scroller would scroll in my scrollpane?
Image 1

JavaFX create a new image from an existing one

In JavaFX u can create a new Image from a string(path), how would i go about creating a new Image from an existing javafx.scene.image.image?
as following:
Image image2 = new Image("my/res/flower.png", 100, 150, false, false);
But instead of the path an actual image object.
I want to change the size of the image.
There is typically no need to create a new Image instance in order to perform rescaling. The API allows you to view or draw scaled versions of an existing Image instance. For example, given
Image image = new Image("my/res/flower.png");
you can create an ImageView that displays a scaled version with
ImageView imageView = new ImageView(image);
imageView.setFitWidth(100);
imageView.setFitHeight(150);
or you can draw a scaled version to a canvas with
Canvas canvas = ... ;
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.drawImage(image, 0, 0, image.getWidth(), image.getHeight(), 0, 0, 100, 150);
A late response, but since I ran into the same issue (I needed an Image to pass to setDragView() ), here is the solution I have implemented:
Image makeThumbnail(Image original) {
ImageView i = new ImageView(original);
i.setFitHeight(64); i.setFitWidth(64);
return i.snapshot(new SnapshotParameters(), new WritableImage(64, 64));
}

The whole file icon is not visible in javafx tableview

I have a JavaFX tableview in which I'm listing files and their properties, including the ICON of the file. My problem is that a part of the icon is missing.
I don't know how to describe it completely so I included an image below.
My tableview is to the right and windows explorer is to the left.
Here is the code:
#Override
public void updateItem(ImageIcon imageIcon, boolean empty){
if (imageIcon != null){
// I have tried adding minimum width and height too
HBox box= new HBox();
// JavaFX scene imageview
ImageView imageView = new ImageView();
// Have tried with and without setFitHeight
imageView.setFitHeight(16);
imageView.setFitWidth(16);
// This line prints: 16 16
System.out.println(imageIcon.getIconWidth() + " " + imageIcon.getIconHeight());
// Create BufferedImage of the imageicon
BufferedImage bi = new BufferedImage(
imageIcon.getIconWidth(),
imageIcon.getIconHeight(),
BufferedImage.TYPE_INT_ARGB);
Graphics g = bi.createGraphics();
imageIcon.paintIcon(null, g, 0, 0);
g.dispose();
// BufferedImage to fxImage
Image fxImage = SwingFXUtils.toFXImage(bi, null);
imageView.setImage(fxImage);
box.getChildren().addAll(imageView);
setGraphic(box);
}
}
Thanks.
UPDATE
I have google around some more and i copied an example directly and pasted into a new project, and the same thing happened with the icons. In the example, the user was probably using windows 7 by judging the look of the icons, so maybe this is just the way it looks in windows 8. It was the code in the answer at the bottom with a picture: www.stackoverflow.com/questions/28034432/

how to merge Android canvas?

I was wondering, how do I merge/join Android canvases. In the code below I have cnv_left which contains a left part of a button. cnv_center contains the center part. And cnv_text contains text.
What I need is to merge them all in cnv_joined , so that
cnv_left would go first.
then cnv_center.
cnv_text would be in center of cnv_center.
and a flipped cnv_left would be the last.
Here's my code so far:
public void drawButt()
{
float buttonScale = 1.0f; /// general button scale ratio
float buttonScaleCnt = 6.0f; /// button's center part stretch ratio
LinearLayout LinLay = (LinearLayout)findViewById(R.id.linearLayout1);
ImageView iv1 = new ImageView(this);
Bitmap bit_left = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas cnv_left = new Canvas(bit_left);
cnv_left.scale(buttonScale,buttonScale);
SVG svg_left = SVGParser.getSVGFromResource(getResources(), R.raw.btleft);
Picture picture_left = svg_left.getPicture();
picture_left.draw(cnv_left);
Bitmap bit_center = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas cnv_center = new Canvas(bit_center);
cnv_center.scale(buttonScaleCnt, buttonScale);
SVG svg_center = SVGParser.getSVGFromResource(getResources(), R.raw.btcnt);
Picture picture_cnt = svg_center.getPicture();
picture_cnt.draw(cnv_center);
Bitmap bit_text = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas cnv_text = new Canvas(bit_text);
cnv_text.scale(buttonScale, buttonScale);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setColor(Color.WHITE); paint.setTextSize(20);
cnv_text.drawText("R", 2, 30, paint);
Bitmap bit_joined = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
Canvas cnv_joined = new Canvas(bit_joined);
/// somehow need to somehow join the above canvases into this cnv_joined...
iv1.setImageBitmap(bit_joined);
iv1.setPadding(5, 5, 5, 5);
LinLay.addView(iv1);
}
Any ideas? Oh, and one more thing, when I create empty bitmaps for my canvas ( Bitmap.createBitmap(100, 100... ), does it matter what size I give them? If yes, where should I get the correct sizes for them?
Thanks!
Size of Bitmaps matter. If you do Picture.draw to canvas smaller than Picture, image will be cropped to size of bitmap.
Call SVG.getBounds to get bounds and put them in Bitmap constructor.
To join Bitmaps together you have to draw bit_left, bit_center and bit_text on cnv_joined using drawBitmap.
Better way will be to draw SVGs and text directly on cnv_joined.

Categories