如何在JavaFX 2.2中绘制清晰，不透明的细线？ [英] How to draw a crisp, opaque hairline in JavaFX 2.2?

问题描述

在JavaFX 2.2中绘制清晰，不透明的发线的最佳方法是什么？

What is the best way to draw a crisp, opaque hairline in JavaFX 2.2?

文档说，带有 strokeWidth 0.0d 它将是一个发际线，但它根本不可见。值> 0.0d和< 1.0d 显示非常好的行，但也不显示不透明的行为。当一条线切割另一条线时，相交点比线的其余部分更亮（我希望这种行为来自具有一定透明度的线）。最后， 1.0d 绘制一条宽度为几个像素的白线。

The documentation says, that with a strokeWidth of 0.0d it'll be a hairline, but it's just not visible at all. Values > 0.0d and <1.0d show lines that are pretty fine, but also don't show an opaque behaviour. When one line cuts another, the intersecting points are lighter than the rest of the line (i'd expect this behaviour from a line with some transparency). Finally, 1.0d draws a white line with several pixels width.

这是我的测试代码：

LineBuilder.create().startX(i*gridSize).startY(0).endX(i*gridSize).endY(height).smooth(false).stroke(Color.WHITE).strokeWidth(0.5d).fill(Color.WHITE).build();           

推荐答案

您可以使用 Region 子类，例如窗格， snapToPixel 设置为true。

You can use a Region subclass, such as a Pane for your Parent, with snapToPixel set to true.

此外，请参阅节点文档在协调系统上。

Additionally, refer to the Node documentation on the co-ordinate system.

在设备像素级别，整数坐标映射到角落
和像素之间的裂缝并且像素的中心出现在
整数像素位置之间的中点。因为所有坐标
值都是用浮点数指定的，所以坐标可以
精确指向这些角（当浮点值具有
精确整数值时）或者像素上的任何位置。例如，
坐标（0.5,0.5）将指向舞台上左上角
像素的中心。类似地，在（0,0）处的尺寸为
为10乘10的矩形将从舞台上左上角
像素的左上角跨越到第10像素的右下角。
10th scanline。
矩形内最后一个像素的像素中心位于坐标（9.5,9.5）。

At the device pixel level, integer coordinates map onto the corners and cracks between the pixels and the centers of the pixels appear at the midpoints between integer pixel locations. Because all coordinate values are specified with floating point numbers, coordinates can precisely point to these corners (when the floating point values have exact integer values) or to any location on the pixel. For example, a coordinate of (0.5, 0.5) would point to the center of the upper left pixel on the Stage. Similarly, a rectangle at (0, 0) with dimensions of 10 by 10 would span from the upper left corner of the upper left pixel on the Stage to the lower right corner of the 10th pixel on the 10th scanline. The pixel center of the last pixel inside that rectangle would be at the coordinates (9.5, 9.5).

另见形状文档：

大多数节点往往只应用整数转换，
通常也使用整数坐标定义。对于
这种常见情况，直线边缘的形状填充往往是
清脆，因为它们排列在
整数设备坐标之间的像素之间的裂缝，因此倾向于自然覆盖整个
像素。另一方面，抚摸那些相同的形状通常会导致
到模糊轮廓，因为默认的描边属性指定
，默认笔划宽度是1.0坐标，经常映射到
正好1个设备像素并且中风应跨越形状的
边界，在边界的两侧下降一半。由于
，许多常见形状的边界往往直接落在整数
坐标上，而这些整数坐标通常精确映射到
整数设备位置，边界往往导致50％覆盖
在
形状边框两侧的像素行和列上，而不是在一个或另一个上覆盖100％。因此，填充可能
通常是清晰的，但笔画通常是模糊的。

Most nodes tend to have only integer translations applied to them and quite often they are defined using integer coordinates as well. For this common case, fills of shapes with straight line edges tend to be crisp since they line up with the cracks between pixels that fall on integer device coordinates and thus tend to naturally cover entire pixels. On the other hand, stroking those same shapes can often lead to fuzzy outlines because the default stroking attributes specify both that the default stroke width is 1.0 coordinates which often maps to exactly 1 device pixel and also that the stroke should straddle the border of the shape, falling half on either side of the border. Since the borders in many common shapes tend to fall directly on integer coordinates and those integer coordinates often map precisely to integer device locations, the borders tend to result in 50% coverage over the pixel rows and columns on either side of the border of the shape rather than 100% coverage on one or the other. Thus, fills may typically be crisp, but strokes are often fuzzy.

避免这些模糊轮廓的两个常见解决方案是使用更宽的
笔画，完全覆盖更多像素 - 通常行程宽度为
的2.0将达到如果没有有效的比例变换 -
或者指定StrokeType.INSIDE或StrokeType.OUTSIDE
笔画样式 - 这会将默认的单个单击笔划偏向
其中一个完整形状的
边框内部或外部的像素行或列。

Two common solutions to avoid these fuzzy outlines are to use wider strokes that cover more pixels completely - typically a stroke width of 2.0 will achieve this if there are no scale transforms in effect - or to specify either the StrokeType.INSIDE or StrokeType.OUTSIDE stroke styles - which will bias the default single unit stroke onto one of the full pixel rows or columns just inside or outside the border of the shape.

因此，如果您将节点保留在没有snapToPixel的组或区域，您可以按照Shape文档中的上述说明进行操作。

So, if you leave your Nodes in a Group or Region which does not snapToPixel, you can follow the above instructions from the Shape documentation.

以下是一些示例代码：

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.shape.LineBuilder;
import javafx.scene.shape.StrokeType;
import javafx.scene.text.Text;
import javafx.stage.Stage;

/** http://stackoverflow.com/questions/11886230/how-to-draw-a-crisp-opaque-hairline-in-javafx-2-2 */
public class LineWidths extends Application {
  public static void main(String[] args) { launch(args); }

  @Override public void start(Stage stage) {
    Line fuzzyline = LineBuilder.create()
        .startX(5).startY(50)
        .endX(90).endY(50)
        .stroke(Color.BLACK).strokeWidth(1)
      .build();
    Line hairline = LineBuilder.create()
        .startX(4.5).startY(99.5)
        .endX(89.5).endY(99.5)
        .stroke(Color.BLACK).strokeWidth(1)
      .build();
    Line fatline = LineBuilder.create()
        .startX(5).startY(150)
        .endX(90).endY(150)
        .stroke(Color.BLACK).strokeWidth(1).strokeType(StrokeType.OUTSIDE)
      .build();
    Pane snappedPane = new Pane();
    Line insideline = LineBuilder.create()
        .startX(5).startY(25)
        .endX(90).endY(25)
        .stroke(Color.BLACK).strokeWidth(1)
      .build();
    snappedPane.setSnapToPixel(true);
    snappedPane.getChildren().add(insideline);
    snappedPane.setPrefSize(100, 50);
    snappedPane.relocate(-0.5, 174.5);

    stage.setScene(
      new Scene(
        new Group(
          fuzzyline, hairline, fatline, snappedPane,
          new Text(10, 40, "fuzzyline"),  
          new Text(10, 90, "hairline"),  
          new Text(10, 140, "fatline"),  
          new Text(10, 190, "snappedPane")
        ), 100, 250
      )
    );
    stage.show();
  }
}

这篇关于如何在JavaFX 2.2中绘制清晰，不透明的细线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！