我需要使用javaFX2执行以下操作:
1-)加载图像并使用imageView显示。[好的]
2-)右键单击并选择“添加节点”选项,屏幕上将出现一个黑色圆圈,您可以将圆圈拖动到图像的任何位置。[好的]
3-)使用鼠标的滚轮放大或缩小图像视图,在图像上提供“缩放感觉”。[确定]
3.1-)但是,每次缩放图像时,我都希望我的圆圈遵循缩放比例,这意味着它们不能保持在屏幕的相同位置。[不知道]
我的问题是第3.1项,因为我不知道如何在图像中移动我的圆圈,使它们在我放大或缩小后看起来像是在图像的位置。我尝试使用setCentX()和setCentY()方法,以及过渡方法,但我找不到方法来做到这一点。
加载图像的代码:
@FXML
ImageView bluePrintView;
@FXML
private void loadBtnAction(ActionEvent event) {
FileChooser fileChooser = new FileChooser();
//Show open file dialog
File file = fileChooser.showOpenDialog(null);
/*Load Image*/
System.out.println(file.getPath());
Image img = new Image("file:" + file.getPath());
bluePrintView.setImage(img);
bluePrintView.setFitHeight(scrollPaneImage.getHeight());
bluePrintView.setFitWidth(scrollPaneImage.getWidth());
bluePrintView.setSmooth(true);
bluePrintView.setScaleX(1);
bluePrintView.setScaleY(1);
event.consume();
}
缩放ImageView的代码:
@FXML
private void zoomAction(ScrollEvent event) {
if (event.getDeltaY() < 0) {
if (bluePrintView.getScaleX() > 0.8 && bluePrintView.getScaleY() > 0.8) {
bluePrintView.setScaleX(bluePrintView.getScaleX() - 0.1);
bluePrintView.setScaleY(bluePrintView.getScaleY() - 0.1);
System.out.println("ImageView(X,Y): "+bluePrintView.getFitHeight()+" "+bluePrintView.getFitWidth());
System.out.println("Image(X,Y): "+bluePrintView.getImage().getHeight()+" "+bluePrintView.getImage().getWidth());
if (!nodeList.isEmpty()) {
for (int i = 0; i < nodeList.size(); i++) {
nodeList.get(i).zoomOutNode(bluePrintView.getFitHeight(),bluePrintView.getFitWidth());
}
}
}
} else {
bluePrintView.setScaleX(bluePrintView.getScaleX() + 0.1);
bluePrintView.setScaleY(bluePrintView.getScaleY() + 0.1);
System.out.println("ImageView(X,Y): "+bluePrintView.getFitHeight()+" "+bluePrintView.getFitWidth());
System.out.println("Image(X,Y): "+bluePrintView.getImage().getHeight()+" "+bluePrintView.getImage().getWidth());
if (!nodeList.isEmpty()) {
for (int i = 0; i < nodeList.size(); i++) {
nodeList.get(i).zoomInNode(bluePrintView.getFitHeight(),bluePrintView.getFitWidth());
}
}
}
event.consume();
}
创建圆圈并执行一些操作的代码:
public class NodeShape {
final Circle node = new Circle();
double axisX = 0, axisY = 0;
public Circle createNode(Group rootGroup, double axisX, double axisY, double radius, String color) {
node.setCenterX(axisX);
node.setCenterY(axisY);
node.setRadius(radius);
node.fillProperty().setValue(Paint.valueOf(color));
System.out.println(node.getTranslateX() + " " + node.getTranslateY());
System.out.println("getCenter: " + node.getCenterX() + " " + node.getCenterY());
rootGroup.getChildren().add(node);
node.setOnMouseDragged(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent t) {
node.setCenterX(t.getX());
node.setCenterY(t.getY());
NodeShape.this.axisX = t.getX();
NodeShape.this.axisY = t.getY();
System.out.println("Circle getTranslate: " + node.getTranslateX() + " " + node.getTranslateY());
System.out.println("Circle getCenter: " + node.getCenterX() + " " + node.getCenterY());
t.consume();
}
});
node.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent t) {
if (t.getButton().equals(MouseButton.PRIMARY)) {
if (t.getClickCount() == 2) {
node.setVisible(false);
node.setDisable(true);
}else if(t.getClickCount() == 1){
System.out.println("Circle Position: "+node.getCenterX()+" "+node.getCenterY());
}
}
t.consume();
}
});
node.setOnScroll(new EventHandler<ScrollEvent>() {
@Override
public void handle(ScrollEvent t) {
if (t.getDeltaY() < 0) {
if (node.getScaleX() > 0.8 && node.getScaleY() > 0.8) {
node.setScaleX(node.getScaleX() - 0.1);
node.setScaleY(node.getScaleY() - 0.1);
}
} else {
node.setScaleX(node.getScaleX() + 0.1);
node.setScaleY(node.getScaleY() + 0.1);
}
t.consume();
}
});
return node;
}
public void zoomInNode(double imgHeight, double imgWidth) {
node.setCenterX(0.1);
//node.setTranslateY(imgHeight/1100 + 10);
//node.setCenterX(node.getCenterX() + Math.abs(axisX - node.getRadius()));
//node.setCenterY(node.getCenterY() + Math.abs(axisY - node.getRadius()));
System.out.println("Circle getCenter: " + node.getCenterX() + " " + node.getCenterY());
System.out.println("Circle getCenter: " + node.getTranslateX()+ " " + node.getTranslateY());
}
public void zoomOutNode(double imgHeight, double imgWidth) {
node.setCenterX(-0.1);
// node.setTranslateY(imgHeight/200 - 10);
//node.setCenterX(node.getCenterX() - Math.abs(axisX - node.getRadius()));
//node.setCenterY(node.getCenterY() - Math.abs(axisY - node.getRadius()));
System.out.println("Circle getCenter: " + node.getCenterX() + " " + node.getCenterY());
System.out.println("Circle getCenter: " + node.getTranslateX()+ " " + node.getTranslateY());
}
public void zoomResetNode() {
node.setCenterX(axisX);
node.setCenterY(axisY);
}}
我的FXML文件代码:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" fx:id="rootPane" pickOnBounds="true" prefHeight="420.0" prefWidth="817.0" snapToPixel="true" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="blueprints.NewSonarViewController">
<children>
<Group id="Group" layoutX="0.0" layoutY="0.0">
<children>
<ScrollPane fx:id="scrollPaneImage" layoutX="0.0" layoutY="0.0" prefHeight="420.0" prefWidth="817.0">
<content>
<Group id="Group" fx:id="rootGroup">
<children>
<ImageView fx:id="bluePrintView" cache="false" fitHeight="419.0" fitWidth="816.0" layoutX="0.0" layoutY="0.0" onMouseClicked="#zoomResetAction" onScroll="#zoomAction" pickOnBounds="true" preserveRatio="false" rotate="0.0" visible="true" />
</children>
</Group>
</content>
<contextMenu>
<ContextMenu>
<items>
<MenuItem mnemonicParsing="false" onAction="#loadBtnAction" text="Load Image" />
<MenuItem mnemonicParsing="false" onAction="#addSynk" text="Add Synk" />
<MenuItem mnemonicParsing="false" onAction="#addNode" text="AddNode" />
</items>
</ContextMenu>
</contextMenu>
</ScrollPane>
</children>
</Group>
</children>
</AnchorPane>
如果我理解你的问题是正确的,这个变通办法应该可以解决你的问题:
想象一下,你有一个宽度和高度为100*200的图像。
图像上的圆圈位于(10,10)位置。
重新调整图像后,图像的新宽度和高度变为150*300。
要计算圆的新位置,只需这样做:
newCircleX = (currentCircleX * currentImageWidth) / oldImageWidth;
newCircleY = (currentCircleY * currentImageHeight) / oldImageHeight;
希望这有帮助。
我的想法是,您将< code>ImageView和< code>Circle添加到您的< code>rootGroup中,然后在< code>rootGroup上应用缩放。请看我下面的例子。
视图:
<AnchorPane id="AnchorPane" fx:id="rootPane" pickOnBounds="true" prefHeight="420.0" prefWidth="817.0" snapToPixel="true" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="javafx.scale.Controller">
<children>
<Group id="Group" layoutX="0.0" layoutY="0.0" onScroll="#scrolling">
<children>
<ScrollPane fx:id="scrollPaneImage" layoutX="0.0" layoutY="0.0" prefHeight="420.0" prefWidth="817.0">
<content>
<Group id="Group" fx:id="rootGroup">
</Group>
</content>
</ScrollPane>
</children>
</Group>
</children>
</AnchorPane>
控制器:
public class Controller {
@FXML
private Group rootGroup;
private Group zoomGroup;
private double scale = 1;
public void initialize() {
zoomGroup = new Group();
Image image = new Image(getClass().getResourceAsStream("image.jpg"));
ImageView imageView = new ImageView(image);
imageView.setX(50);
imageView.setY(50);
Circle circle = new Circle();
circle.setRadius(20);
circle.setCenterX(100);
circle.setCenterY(200);
circle.setFill(Paint.valueOf("RED"));
zoomGroup.getChildren().add(imageView);
zoomGroup.getChildren().add(circle);
rootGroup.getChildren().add(zoomGroup);
}
public void scrolling(ScrollEvent scrollEvent) {
if (scrollEvent.getDeltaY() > 0) {
scale += 0.1;
} else if (scrollEvent.getDeltaY() < 0) {
scale -= 0.1;
}
zoomGroup.setScaleX(scale);
zoomGroup.setScaleY(scale);
}
}
我正在创建一个自定义的ImageView,它将我的图像裁剪成一个六边形形状,并添加一个边框。我想知道我的方法是正确的还是我的做法是错误的。有一堆自定义库已经这样做了,但没有一个开箱即用的形状,我正在寻找。话虽如此,这更多的是一个关于最佳实践的问题。 您可以在这个要点中看到完整的类,但主要问题是这是否是最好的方法。我觉得不对,部分原因是一些神奇的数字,这意味着它可能会在某些设备上搞砸。 下面是代码的
主要内容:本节引言:,1.src属性和background属性的区别:,2.adjustViewBounds设置缩放是否保存原图长宽比,3.scaleType设置缩放类型,4.最简单的绘制圆形的ImageView,本节小结:本节引言: 本节介绍的UI基础控件是:ImageView(图像视图),见名知意,就是用来显示图像的一个View或者说控件! 官方API:ImageView;本节讲解的内容如下: ImageView的src属性和blackground的区别; adjustViewBounds设
我正在使用Appium驱动程序进行Android自动化测试通过appium检查员,我可以识别视图元素(如TextView,WebView等),但不幸的是,它不识别ImageView元素。想法?
我试图建立自定义的水平滚动视图画廊,而不是使用android b/c中的画廊小工具,它在api 16中已被否决。我可以在滚动视图中添加图像,但当用户在水平滚动视图中单击相应的缩略图时,我如何更改较大的图像视图。这是代码
基本上,我有一个方法可以将Image从数据库加载到ImageView中,还有第二个方法可以更改图像,我成功地运行了这两个方法,没有出现异常,但是在change eImage()方法中的setImage之后,我需要更新什么以及如何(场景、阶段)是可能的。我知道在javafx中没有像swings中的repaint()这样的方法,那么我该如何处理呢?
嗯,我有以下模式:< br > > < li> 扩展JFrame的Java类,它实例化包含返回空白屏幕的my graph的另一个类。 第二个是一个普通类,其中包含方法main,调用包含我的图形的相同类,该类返回一个普通图形。 现在,为什么JFrame类返回空白图? 我的图形类代码。 大多数人会说,你为什么要在这里创建一个JPANEL?我没有找到如何设置它的默认大小,但即使从里面删除jpanel,它