像耐心/克朗代克纸牌游戏一样拖动节点

2024-04-30

我正在做克朗代克游戏。逻辑一切正常。我只是在使用 javafx 中的 UI 时遇到问题。

我一直在尝试从“桌面堆”周围移动/拖动卡片,但没有达到预期的结果。 我的卡片是一个 ImageView,里面有一个图像。这些卡片位于窗格内:

Pane tableau = new Pane();
for (int i = 0; i < n; i++) {
    Image img = new Image("resources/images/" + (i + 1) + ".png");
    ImageView imgView = new ImageView(img);
    imgView.setY(i * 20);
    //imgView Mouse Events here
    tableau.getChildren().add(imgView);
}

I tried:

imgView.setOnMousePressed((MouseEvent mouseEvent) -> {
    dragDelta.x = imgView.getLayoutX() - mouseEvent.getSceneX();
    dragDelta.y = imgView.getLayoutY() - mouseEvent.getSceneY();
});
imgView.setOnMouseDragged((MouseEvent mouseEvent) -> {
    imgView.setLayoutX(mouseEvent.getSceneX() + dragDelta.x);
    imgView.setLayoutY(mouseEvent.getSceneY() + dragDelta.y);
});

这个解决方案不起作用,因为我设置了位置,所以当释放卡时,卡不会返回到原来的位置,并且因为卡与其他 UI 对象发生碰撞。

另一种尝试:

imgView.setOnDragDetected((MouseEvent event) -> {
    ClipboardContent content = new ClipboardContent();
    content.putImage(img);
    Dragboard db = imgView.startDragAndDrop(TransferMode.ANY);
    db.setDragView(img, 35, 50);
    db.setContent(content);
    event.consume();
});

在这个解决方案中,问题是:卡片是半透明的,就像移动文件一样,光标变得禁止/禁止,但除此之外它工作得很好:没有碰撞,如果我释放鼠标,卡片就会回到原来的位置。 另一个问题是我不知道用这个解决方案是否可以移动超过一张卡?

我的最后一个问题是,如何将一个节点(在本例中为 ImageView)或一组节点从一堆移动到另一堆,就像在纸牌游戏中一样?


要了解原始卡的位置,您应该使用设置翻译X http://docs.oracle.com/javafx/2/api/javafx/scene/Node.html#setTranslateX%28double%29(和 Y)而不是鼠标处理程序中的 setLayoutX 。因此,当用户释放卡片时,只需调用一个 Transition 即可让卡片飞回布局位置。如果用户将卡片释放到有效位置,则将平移坐标设置为 0 并更改布局位置或使用relocate http://docs.oracle.com/javafx/2/api/javafx/scene/Node.html#relocate%28double,%20double%29.

如果你想让卡片半透明,你可以G。改变opacity http://docs.oracle.com/javafx/2/api/javafx/scene/Node.html#setOpacity%28double%29或应用 CSS。

顺便说一句,我不会使用 Clipboardcontent,它似乎不适合您的需求。

您可以使用鼠标处理代码移动多个对象。您只需将平移同时应用到多个对象即可。当您拖动一堆卡片时,您可以确定所选卡片上方的卡片并将过渡应用到所有卡片。


下面是一个简单的示例,向您展示它的外观。

Card.java,您将使用 ImageView。

public class Card extends Rectangle {

    static Random rand = new Random();

    public Card() {


        setWidth(100);
        setHeight(200);

        Color color = createRandomColor();

        setStroke(color);
        setFill( color.deriveColor(1, 1, 1, 0.4));

    }

    public static Color createRandomColor() {

        int max = 200;

        Color color = Color.rgb( (int) (rand.nextDouble() * max), (int) (rand.nextDouble() * max), (int) (rand.nextDouble() * max));

        return color;
    }
}

Game.java,应用程序。

public class Game extends Application {

    static List<Card> cardList = new ArrayList<>();

    @Override
    public void start(Stage primaryStage) {

        MouseGestures mg = new MouseGestures();

        Group root = new Group();

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

            Card card = new Card();
            card.relocate( i * 20, i * 10);

            mg.makeDraggable(card);

            cardList.add( card);
        }

        root.getChildren().addAll( cardList);

        Scene scene = new Scene( root, 1600, 900);

        primaryStage.setScene( scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        launch(args);
    }

    // TODO: don't use a static method, I only added for the example 
    public static List<Card> getSelectedCards( Card currentCard) {

        List<Card> selectedCards = new ArrayList<>();

        int i = cardList.indexOf(currentCard);
        for( int j=i + 1; j < cardList.size(); j++) {
            selectedCards.add( cardList.get( j));
        }

        return selectedCards;
    }

}

MouseGestures.java,鼠标处理机制。

public class MouseGestures {

    final DragContext dragContext = new DragContext();

    public void makeDraggable(final Node node) {

        node.setOnMousePressed(onMousePressedEventHandler);
        node.setOnMouseDragged(onMouseDraggedEventHandler);
        node.setOnMouseReleased(onMouseReleasedEventHandler);

    }

    EventHandler<MouseEvent> onMousePressedEventHandler = new EventHandler<MouseEvent>() {

        @Override
        public void handle(MouseEvent event) {

            dragContext.x = event.getSceneX();
            dragContext.y = event.getSceneY();

        }
    };

    EventHandler<MouseEvent> onMouseDraggedEventHandler = new EventHandler<MouseEvent>() {

        @Override
        public void handle(MouseEvent event) {

            Node node = (Node) event.getSource();

            double offsetX = event.getSceneX() - dragContext.x;
            double offsetY = event.getSceneY() - dragContext.y;

            node.setTranslateX(offsetX);
            node.setTranslateY(offsetY);

            // same for the other cards
            List<Card> list = Game.getSelectedCards( (Card) node);
            for( Card card: list) {
                card.setTranslateX(offsetX);
                card.setTranslateY(offsetY);
            }


        }
    };

    EventHandler<MouseEvent> onMouseReleasedEventHandler = new EventHandler<MouseEvent>() {

        @Override
        public void handle(MouseEvent event) {

            Node node = (Node) event.getSource();

            moveToSource(node);

            // same for the other cards
            List<Card> list = Game.getSelectedCards( (Card) node);
            for( Card card: list) {
                moveToSource(card);
            }

            // if you find out that the cards are on a valid position, you need to fix it, ie invoke relocate and set the translation to 0
            // fixPosition( node);

        }
    };

    private void moveToSource( Node node) {
        double sourceX = node.getLayoutX() + node.getTranslateX();
        double sourceY = node.getLayoutY() + node.getTranslateY();

        double targetX = node.getLayoutX();
        double targetY = node.getLayoutY();

        Path path = new Path();
        path.getElements().add(new MoveToAbs( node, sourceX, sourceY));
        path.getElements().add(new LineToAbs( node, targetX, targetY));

        PathTransition pathTransition = new PathTransition();
        pathTransition.setDuration(Duration.millis(1000));
        pathTransition.setNode(node);
        pathTransition.setPath(path);
        pathTransition.setCycleCount(1);
        pathTransition.setAutoReverse(true);

        pathTransition.play();
    }

    /**
     * Relocate card to current position and set translate to 0.
     * @param node
     */
    private void fixPosition( Node node) {

        double x = node.getTranslateX();
        double y = node.getTranslateY();

        node.relocate(node.getLayoutX() + x, node.getLayoutY() + y);

        node.setTranslateX(0);
        node.setTranslateY(0);

    }

    class DragContext {

        double x;
        double y;

    }

    // pathtransition works with the center of the node => we need to consider that
    public static class MoveToAbs extends MoveTo {

        public MoveToAbs( Node node, double x, double y) {
            super( x - node.getLayoutX() + node.getLayoutBounds().getWidth() / 2, y - node.getLayoutY() + node.getLayoutBounds().getHeight() / 2);

        }

    }

    // pathtransition works with the center of the node => we need to consider that
    public static class LineToAbs extends LineTo {

        public LineToAbs( Node node, double x, double y) {
            super( x - node.getLayoutX() + node.getLayoutBounds().getWidth() / 2, y - node.getLayoutY() + node.getLayoutBounds().getHeight() / 2);
        }

    }

}

当您选择一张或多张卡牌时,它们会恢复到原来的位置。

这是我从顶部拖动第三张卡的屏幕截图。

当您检查卡是否位于有效目的地时,您应该调用 fixPosition 方法。它只是重新定位卡,即。 e.使用平移值计算位置,重新定位节点并将其平移设置为 0。

棘手的部分是 PathTransition。它从节点的中心开始工作,而不是从 x/y 坐标开始。Here's https://stackoverflow.com/questions/27659474/create-a-path-transition-with-absolute-coordinates-for-a-stackpane-object/27729231#27729231如果您想了解更多信息,我已回复了有关该问题的帖子。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

像耐心/克朗代克纸牌游戏一样拖动节点 的相关文章

  • 将 MouseListener 添加到面板

    我正在尝试将鼠标操作添加到我的面板中 这就是程序应该做的事情 编写一个程序 允许用户通过按三下鼠标来指定一个三角形 第一次按下鼠标后 画一个小点 第二次按下鼠标后 绘制一条连接前两个点的线 第三次按下鼠标后 绘制整个三角形 第四次按下鼠标会
  • 使类只能从特定类实例化

    假设我有 3 节课class1 class2 and class3 我怎样才能拥有它class1只能通过实例化class2 class1 object new class1 但不是 class3 或任何其他类 我认为它应该与修饰符一起使用
  • 如何作为应用程序发布到页面?

    所以 我有一个应用程序 Facebook 应用程序实体 并且我有一个页面 我想使用应用程序通过java代码 通过restfb或任何其他建议 发布到页面 看起来我错过了页面授予应用程序发布权限的阶段 不知道该怎么做 谢谢你们 乌里 您只能 作
  • Java 卡布局。多张卡中的一个组件

    一个组件 例如JLabel 在多张卡中使用CardLayout 目前看来该组件仅出现在它添加到的最后一张卡上 如果有办法做到这一点 我应该吗 这是不好的做法吗 或者有其他选择吗 你是对的 它只出现在 添加到的最后一张卡 中 但这与CardL
  • 迭代函数可以调用自身吗?

    当观看下面的 MIT 6 001 课程视频时 讲师在 28 00 将此算法标记为迭代 但是 在 30 27 他说这个算法和实际的 递归 算法都是递归的 该函数正在使用基本情况调用自身 那么这次迭代情况如何 private int itera
  • 在grails控制器中识别ajax请求或浏览器请求

    我正在开发一个使用大量ajax的grails应用程序 如果请求是ajax调用 那么它应该给出响应 这部分正在工作 但是如果我在浏览器中输入URL 它应该带我到主页 索引页面而不是请求的页面 下面是ajax调用的示例gsp代码
  • 如何在 JPA 和 Hibernate 中将数据库生成的列值定义为只读字段?

    使用 MariaDB 10 2 可以定义日期时间的默认值 例如创建和最后修改 我应该如何将此列作为只读字段访问 因为这个值应该只在数据库的控制之下 并且不应该从代码中修改 但我想在代码中读取这个属性 这很简单 只需设置insertable
  • 生成 equals 和 hashcode 时忽略属性

    假设我有一个类 Customer public class Customer private String firstName private String lastName private String doNotAddMeToEqual
  • 用于层次结构树角色的 Spring Security / Java EE 解决方案

    我知道 Spring Security 非常适合标准角色和基于权限的授权 我不确定的是这种情况 系统中管理着 10 000 名员工 员工被组织成组织结构图 跨部门的谁向谁报告的树 其中一些员工是用户 这些用户仅被允许访问其职责范围内的员工
  • 拆分/标记化/扫描字符串并注意引号

    Java中是否有默认 简单的方法来分割字符串 但要注意引号或其他符号 例如 给定以下文本 There s a man that live next door in my neighborhood and he gets me down Ob
  • 在 java 中运行外部应用程序但不要等待它完成

    我正在用java编写一个应用程序 允许我运行其他应用程序 为此 我使用了 Process 类对象 但当我这样做时 应用程序会等待进程结束 然后再退出 有没有办法在 Java 中运行外部应用程序 但不等待它完成 public static v
  • 如何从字符串中解析一个大整数? [复制]

    这个问题在这里已经有答案了 我有一个这样的方法 Integer parseInt myInt 不是这个整数变得很长 我得到以下异常 java lang NumberFormatException For input string 40001
  • 如何从intellij项目视图中隐藏不必要的文件?

    给定一个示例 gradle 项目 其项目结构如下所示 正如你所看到的 有很多东西你实际上不需要在想法中看到 但你需要它们存在 我知道下面被忽略的文件 文件夹类型Editor File Types但这些正在影响库和项目 idea 会在各处忽略
  • 当底层连接是有状态时如何使用 Apache HttpClient?

    我在谷歌上搜索了很多关于如何使用 HttpClient 进行多线程处理的信息 他们中的大多数人建议使用 ThreadSafeClientConnManager 但我的应用程序必须登录某个主机 登录表单页面 以便 HttpClient 获得底
  • 删除 JFX 中选项卡后面的灰色背景

    So is there any way to remove the gray area behind the tab s 我尝试过用 CSS 来做到这一点 但没有找到方法 要设置 tabpane 标题的背景颜色 请在 CSS 文件中写入 t
  • 如何使用Gson仅从Json反序列化某些特定字段?

    我有以下 JSON 字符串 channel bvmt initValues data value instrumentIds TN0007250012 TN0007500010 instruments mnemonic ADWYA marc
  • Android UnityPlayerActivity 操作栏

    我正在构建一个 Android 应用程序 其中包含 Unity 3d 交互体验 我已将 Unity 项目导入 Android Studio 但启动时该 Activity 是全屏的 并且不显示 Android 操作栏 我怎样才能做到这一点 整
  • Axis2 错误:要输出的文本中的空白字符 (0x4) 无效

    我创建了一个 Java 客户端 使用 Axis2 1 7 6 作为代码生成器与 SOAP Web 服务进行交互 问题在于客户端的某些输入抛出异常并显示以下消息 org apache axis2 AxisFault Invalid white
  • 如何使用自定义 JDK 构建 Jenkins 项目?

    我有一个常规的 Jenkins 实例 运行一些多分支管道 该实例在 JDK 11 上运行 因为 Jenkins 并不真正支持更高版本 没关系 但不好的是 我的所有管道似乎也都受到 Java 11 的限制 Jenkins 仅使用它自己也使用的
  • Java/MongoDB 按日期查询

    我将一个值作为 java util Date 存储在我的集合中 但是当我查询以获取两个特定日期之间的值时 我最终得到的值超出了范围 这是我的代码 插入 BasicDBObject object new BasicDBObject objec

随机推荐

  • 路由器解析器不渲染组件

    我有这个路由器解析器来从 Google Firestore 检索数据 我正在尝试使用解析器来提前获取数据 当我将调试器放置在解析函数中时 它会显示从服务器检索的数据 但它永远不会从resolve 方法返回 谁能帮我一下 路由模块 const
  • 使用 javascript 复制到所有浏览器的剪贴板

    我试图让 复制到剪贴板 适用于所有浏览器 但运气不好 我正在使用 javascript 但我不想使用零剪贴板 http zeroclipboard org to do 请让我们知道我的代码有什么问题 感谢您的帮助 下面是代码 目前我的代码仅
  • jQuery 创建多维数组

    我花了很长时间试图弄清楚如何在 jQuery 中创建多维数组 我在循环之外实例化数组 在循环内部我想添加数组元素 i 0 loop start
  • 在 C 中释放 NULL 指针是一个好习惯吗? [复制]

    这个问题在这里已经有答案了 可能的重复 ptr 为 NULL 的 free ptr 是否会损坏内存 https stackoverflow com questions 1938735 does freeptr where ptr is nu
  • Libsourcey 缺少 -fPIC 编译错误

    我正在尝试运行 LibSourcey 以使用 Webrtc 流服务器 问题是我似乎无法让它发挥作用 我努力在我的 Ubuntu 16 04 上 cmake 该项目 cmake 文件中的正则表达式 但现在它已修复 我实际上遇到的问题是编译时的
  • 基本身份验证:是否可以像 getRemoteUser() 一样设置RemoteUser

    您好 我正在使用基本身份验证方法来保护我的 Web 应用程序中的某些页面 其中有指定的 url 模式如下
  • 起订量中的匹配设置问题

    我过去一周左右一直在使用 Moq 直到今天才遇到任何问题 我在获取时遇到问题VerifyAll 以正确匹配我的模拟的设置 我目前正在为我的应用程序的 API 编写单元测试 该应用程序的结构如下 API lt gt Service lt gt
  • android 中的 onSensorChanged 在模拟器中不断触发

    我正在使用 ACCELEROMETER 传感器 并已通过相同的方式注册了一个侦听器 mSensorManager SensorManager getSystemService Context SENSOR SERVICE mAccelera
  • gradle - 从 url 下载并解压文件

    从 url 下载和解压文件的正确 gradle 方法是什么 http 如果可能的话 我想防止每次运行任务时重新下载 在ant get可以通过以下方式实现skipexisting true 我当前的解决方案是 task foo ant get
  • Xcode 4.x - 使其指向有问题的崩溃行

    每次 Xcode 崩溃时 它都会指向 main m 上的这一行 int retVal UIApplicationMain argc argv nil AppController 我知道 Xcode 4 调试与 3 x 相比很糟糕 但是我如何
  • 带有 CompletableFuture 的 MDC 记录器

    我正在使用 MDC Logger 除了一种情况外 它对我来说非常适合 无论我们在代码中的何处使用 CompletableFuture 对于创建的线程 MDC 数据都不会传递到下一个线程 因此日志会失败 例如 在代码中我使用下面的代码片段来创
  • 使用适用于 IE7 和 IE8 的 jQuery 在 Facebox 中加载 FLV

    不用说 这在 Chrome Firefox 和 Safari 中完美运行 IE 任何版本 都是问题所在 客观的 我正在尝试加载 JWplayer 它会在 Facebox 弹出窗口中加载来自 S3 的 FLV jQuery document
  • 创建一个能够从容器注册表中提取的 Docker 就绪计算引擎

    我们使用 terraform 设置 GCE 实例 然后使用 ansible playbooks 来配置它们并将我们的服务转移到机器上 我正在我们的组织中运行一个项目 该项目需要从另一个项目中提取 Docker 映像 这些图像托管在另一个项目
  • 使用 Mercurial,我如何查看哪些更改尚未推送?

    我习惯了 git 你可以在其中运行 gitk 并得到如下内容 在这里您可以看到有一些更改需要推送到远程分支 或者 我可以使用git log decorate输出将是 b8c2926 refs heads next Update instru
  • FlexUnit ANT 任务挂起

    我正在使用 ANT 任务在构建服务器上运行 FlexUnit 当我从 Flash Builder 4 运行 Flex 单元测试时 它工作正常 但是当从 ANT 运行时 它会打开默认播放器 在我的例子中是 FireFox 成功运行 FU 但永
  • iPhone文本框显示光标

    我正在为 iPhone 开发一个计算器 设计类似于这样 问题是我无法在文本字段中显示光标 因为输入是通过图像等按钮进行管理的 此外 textField comeFirstResponder 不起作用 因为它显示默认键盘 所以我尝试 text
  • 如何让第一个字母像报纸风格一样推入段落

    我创建了一些 CSS 来处理段落中的第一个字母 看起来也更大 如何使第一个字母向下并向左推 这样它就不会高于该行本身 并在需要时将其他行缩进到右侧 见附图 text article color 000 text article first
  • 错误:“连接被拒绝:连接。验证连接属性

    与主机 localhost 端口 1433 的 TCP IP 连接失败 错误 连接被拒绝 连接 验证连接属性 确保 SQL Server 实例正在主机上运行并接受端口上的 TCP IP 连接 确保到该端口的 TCP 连接未被防火墙阻止 我已
  • 在 PATH 中找不到程序“make”

    我在 Eclipse 中遇到 程序 make 未在 PATH 中找到 错误 我检查了路径变量 C cygwin bin JAVA HOME bin ANT HOME bin ANDROID SDK tools ANDROID SDK pla
  • 像耐心/克朗代克纸牌游戏一样拖动节点

    我正在做克朗代克游戏 逻辑一切正常 我只是在使用 javafx 中的 UI 时遇到问题 我一直在尝试从 桌面堆 周围移动 拖动卡片 但没有达到预期的结果 我的卡片是一个 ImageView 里面有一个图像 这些卡片位于窗格内 Pane ta