Question

对于作业，我正在制作一个Boardgame。（在java中）这个Boardgame有一个地图，必须使用多个字段/土地。单位可以放在他们身上，他们可以移动。其他东西也放在他们身上。

对于地图，我使用了一张图片。我在网上寻找解决方案，但是我发现网格游戏（例如国际象棋或西洋跳棋）的唯一地方和这个游戏的地图不能只用正方形划分。我尝试了这个，但是字段形状是不同的，以使其工作。

关于如何解决这个问题，我有一些微弱的想法，但是我不能把它们放到代码示例中，并且不知道它们是否可行，或者如何工作。

我的想法：

制作一些不可见的按钮并将它们绑定到图片中的特定坐标。我对这个解决方案的问题是它还必须能够显示放在其上的东西。如果并非所有领域都是可点击的，那也将非常不方便。
我有一个＆＃39;叠加＆＃39;所有字段和内部轮廓的图像＆＃39;除去。我做了这个叠加，所以我可以在电路板上添加一个微弱的颜色覆盖。是否有可能以任何方式使用它？
首先，我将切掉所有松散的田地并将它们组合在一起形成一幅图像。只是，我不知道我会怎么做。不仅仅是把它放在哪里，而且，我怎样才能确保元素总是在相同的位置相互比较，并且我的电路板在更改屏幕/分辨率大小时不会搞砸？

我在游戏中使用javafx作为图形元素。

如果对我自己没有想到的事情有任何建议，那些也是非常受欢迎的。

Answer 1

如果足以检索单击鼠标的像素的颜色，那么您可以相当容易地做到这一点。如果您知道图像显示在未缩放和未剪切的图像视图中，那么您只需要：

<div style="float: left; width: 200px; height: auto; overflow: scroll">
SIDEBAR
<p><input type="checkbox"/>Item 1</p>
<p><input type="checkbox"/>Item 2</p>
<p><input type="checkbox"/>Item 3</p>
<p><input type="checkbox"/>Item 4</p>
<p><input type="checkbox"/>Item 5</p>
<p><input type="checkbox"/>Item 6</p>
<button style="position: fixed">
GO!
</button>
</div>
<div style="float: left; width: 400px">
CONTENT
</div>

更一般地说，您可能需要将图像视图坐标映射到图像坐标：

imageView.setOnMouseClicked(e -> {
    Color color = imageView.getImage().getPixelReader().getColor((int)e.getX(), (int)e.getY());
    // ...
});

获得颜色后，您可以进行一些简单的分析，看它是否与图像中各种项目的颜色大致相符，例如：检查imageView.setOnMouseClicked(e -> { double viewX = e.getX(); double viewY = e.getY(); double viewW = imageView.getBoundsInLocal().getWidth(); double viewH = imageView.getBoundsInLocal().getHeight(); Rectangle2D viewport = imageView.getViewport(); double imgX = viewport.getMinX() + e.getX() * viewport.getWidth() / viewW; double imgY = viewport.getMinY() + e.getY() * viewport.getHeight() / viewH ; Color color = imageView.getImage().getPixelReader().getColor((int)imgX, (int)imgY); // ... });组件，或检查固定颜色的“距离”是否合适。

典型的实现可能如下：

hue

你可以做处理程序的后面

// choose a color based on what is in your image:
private final Color FIELD_GREEN = Color.rgb(10, 10, 200);

private double distance(Color c1, Color c2) {
    double deltaR = c1.getRed() - c2.getRed();
    double deltaG = c1.getGreen() - c2.getGreen();
    double deltaB = c1.getBlue() - c2.getBlue();
    return Math.sqrt(deltaR * deltaR + deltaG * deltaG + deltaB * deltaB);
}

private boolean colorsApproximatelyEqual(Color c1, Color c2, double tolerance) {
    return distance(c1, c2) < tolerance ;
}

这是否可行取决于图像地图的性质。如果地图中的颜色太复杂（或者对象不容易通过颜色区分），那么您可能需要在场景图中放置其他元素并在每个元素上注册处理程序，如问题所述。

是否可以选择/单击一个图像的多个部分？

1 个答案: