Question

我想通过AnchorPane事件在MouseDragged内进行绘制。但是，当我拖着画作溢出它给定的容器外。什么可以导致这样的事情？如何指定MouseDragged事件的边界？

显示问题的图片：

用于GUI的FXML文件：

<GridPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="painterapp.FXMLDocumentController">
  <columnConstraints>
    <ColumnConstraints hgrow="SOMETIMES" maxWidth="173.0" minWidth="4.0" prefWidth="173.0" />
    <ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308" minWidth="10.0" />
  </columnConstraints>
  <rowConstraints>
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
  </rowConstraints>
   <children>
      <VBox spacing="8.0">
         <padding>
            <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" />
         </padding>
         <children>
            <TitledPane animated="false" text="Choose Color">
               <content>
                  <VBox alignment="CENTER" spacing="3.0">
                     <padding>
                        <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
                     </padding>
                     <children>
                        <Slider fx:id="redSlider" max="255.0" />
                        <Slider fx:id="greenSlider" max="255.0" />
                        <Slider fx:id="blueSlider" max="255.0" />
                        <Slider fx:id="alphaSlider" max="1.0" />
                        <Rectangle fx:id="colorRectangle" arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="108.0" stroke="BLACK" strokeType="INSIDE" width="105.0" />
                     </children>
                  </VBox>
               </content>
            </TitledPane>
            <TitledPane animated="false" text="Choose Size">
               <content>
                  <VBox spacing="3.0">
                     <padding>
                        <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
                     </padding>
                     <children>
                        <RadioButton fx:id="smallRadioButton" mnemonicParsing="false" selected="true" text="Small">
                           <toggleGroup>
                              <ToggleGroup fx:id="sizeToggleGroup" />
                           </toggleGroup>
                        </RadioButton>
                        <RadioButton fx:id="mediumRadioButton" mnemonicParsing="false" text="Medium" toggleGroup="$sizeToggleGroup" />
                        <RadioButton fx:id="largeRadioButton" mnemonicParsing="false" text="Large" toggleGroup="$sizeToggleGroup" />
                     </children>
                  </VBox>
               </content>
            </TitledPane>
            <Button fx:id="UndoButton" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#undoButtonPressed" text="Undo" />
            <Button fx:id="clearButton" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#clearButtonPressed" text="clear" />
         </children>
      </VBox>
      <AnchorPane fx:id="drawingPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" onMouseDragged="#drawingPaneMouseDragged" prefHeight="390.0" prefWidth="387.0" style="-fx-background-color: grey;" GridPane.columnIndex="1">
         <GridPane.margin>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
         </GridPane.margin>
      </AnchorPane>
   </children>
</GridPane>

MouseDrag事件处理代码如下：

@FXML
private void drawingPaneMouseDragged(MouseEvent e){
    //pick values from Sliders and set the color
    brushColor = Color.rgb((int) redSlider.getValue(), (int) greenSlider.getValue(),
            (int) blueSlider.getValue(), alphaSlider.getValue());
    //pick value of radioButton specified for size
    radius = (PenSize) sizeToggleGroup.getSelectedToggle().getUserData();
    //create a circle
    Circle newCircle = new Circle(e.getX(), e.getY(),radius.getRadius(),brushColor);
    //add circle to the pane
    drawingPane.getChildren().add(newCircle);
}

Answer 1

您需要在“drawingPaneMouseDragged”方法中添加条件，以便仅将绘图限制在框中！（抱歉我的英语不好）。

编辑：这里有一个例子，它在你的案例中拖动一个窗格，父窗口是你绘制的框，窗格是你的绘图：

private double xOffset = 0;
private double yOffset = 0;

       MyCube.setOnMouseDragged((MouseEvent event) -> {


        MyCube.setLayoutX(event.getSceneX()+xOffset);
        MyCube.setLayoutY(event.getSceneY()+yOffset); 



        if (MyCube.getLayoutX()<0){

            MyCube.setLayoutX(0);
            MyCube.setLayoutY(MyCube.getLayoutY());


        }

        if (MyCube.getLayoutY()<0){

            MyCube.setLayoutX(MyCube.getLayoutX());
            MyCube.setLayoutY(0);    

        }

        if (MyCube.getLayoutX()+MyCube.getWidth()> Parent.getWidth()){

            MyCube.setLayoutX(Parent.getWidth()-MyCube.getWidth());
            MyCube.setLayoutY(MyCube.getLayoutY());

        }

        if (MyCube.getLayoutY()+MyCube.getHeight()> Parent.getHeight()){

            MyCube.setLayoutX(MyCube.getLayoutX());
            MyCube.setLayoutY(Parent.getHeight()-MyCube.getHeight());

        }

    });



    MyCube.setOnMousePressed((MouseEvent event) -> {

        xOffset = MyCube.getLayoutX() - event.getSceneX();
        yOffset = MyCube.getLayoutY() - event.getSceneY();

    });

Answer 2

最简单的方法是使用限制＆＃34;绘图区域的剪辑＆＃34;将-std=c++11 AnchorPane属性设置为Circle，以防止圈子增加managed的大小false {1}}。此外，如果AnchorPane的一部分在Circle的边界内可见，您可以轻松使用AnchorPane和Circle的边界进行检查：< / p>

AnchorPane

<AnchorPane fx:id="drawingPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" onMouseDragged="#drawingPaneMouseDragged" prefHeight="390.0" prefWidth="387.0" style="-fx-background-color: grey;" GridPane.columnIndex="1">
    <GridPane.margin>
        <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
    </GridPane.margin>
    <clip>
        <!-- clip with size bound to the AnchorPane's size -->
        <Rectangle width="${drawingPane.width}" height="${drawingPane.height}"/>
    </clip>
</AnchorPane>

BTW：既然你从不使用任何锚点，就不必使用

Circle newCircle = new Circle(e.getX(), e.getY(),radius.getRadius(),brushColor);

// add circle only, if part of it will be visible
if (drawingPane.getBoundsInLocal().intersects(newCircle.getBoundsInParent())) {
    //add circle to the pane
    newCircle.setManaged(false);
    drawingPane.getChildren().add(newCircle);
}

。您只需使用AnchorPane即可。另外，如果使用大量的圆圈，最好使用Canvas来绘制图像。

MouseDragged事件从容器

2 个答案: