JavaFX Canvas コンポーネントの機能を調べているときに、translate(double,double)
メソッドを使用したときに非常に奇妙な動作に遭遇しました。
メソッドを呼び出した後にパスをストロークまたは塗りつぶすとtranslate
、パスが不自然に描画されます。translate
以下の例では、メソッドで指定した 3 倍のパスが移動されているようです。ただし、テキストをなでると、期待どおりの場所にテキストが描画されるようです。(この動作は、Linux および Windows 64 ビットで観察されました)
私は JavaFX と Canvas を初めて使用するので、これが JavaFX ランタイムのバグなのか、ライブラリを間違った方法で使用しているだけなのかわかりません。誰かが私を正しい方向に向けることができますか?
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class TestApplication extends Application
{
public static void main( String[] args )
{
launch(args);
}
@Override
public void start(Stage stage) throws Exception
{
Canvas canvas = new Canvas(500,500);
paint(canvas.getGraphicsContext2D(), canvas.getWidth());
GridPane root = new GridPane();
root.add(canvas, 0, 0);
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
private void paint(GraphicsContext graphics, double width)
{
//Paint ruler lines on top
for ( int xCoord = 0; xCoord < width; xCoord+=10 ) {
graphics.setStroke(Color.RED);
graphics.beginPath();
graphics.moveTo(xCoord, 0);
graphics.lineTo(xCoord, 10);
graphics.stroke();
}
//Paint rectangles and text
for ( int xCoord = 0; xCoord < width; xCoord+=10 ) {
graphics.translate(10, 10);
graphics.setStroke(Color.BLACK);
graphics.beginPath();
graphics.rect(0, 0, 300, 300);
graphics.stroke();
graphics.strokeText(String.valueOf(xCoord), 0, 0);
}
}
}
上記のアプリケーションは、キャンバスを含むウィンドウを表示する必要があります。キャンバス内には 50 個の長方形があり、各長方形は前の長方形に対して x 方向と y 方向に 10 ピクセルずつ移動します。長方形の上に、絶対変位値を文字列として表示する必要があります。キャンバスの上部に「定規」を描いて、10 ピクセルの幅を確認しました。この例を自分のコンピューターで実行すると、最初の四角形は 30,30 から始まり、2 番目の四角形は 60,60 などになります。ただし、数字は正しい位置に表示されます。以下の画像をご覧ください (申し訳ありませんが、stackoverflow では新規ユーザーがインライン画像を使用できないため、インライン画像を使用できません):
誰も同じ問題を抱えていますか?または、私は何を間違っていますか?どんな助けでも大歓迎です。
注:graphics.beginPath()
長方形のペイントループをコメントアウトすると、さらに奇妙になります...
更新:コメントで指摘されているようにgraphics.closePath()
、パスをなでる前に電話をかけようとしました。残念ながら、これは何も変わらないようです。graphics.strokeRect()
また、コンボの代わりにメソッドを使用するbeginPath,rect[,closePath],stroke
と、出力が正しいことにも注意してください(AKA 期待通り)
UPDATE2: GraphicsContext API は HTML5 Canvas API に基づいているように見えるため、上記のコードを HTML5/Canvas に変換して何が起こるかを確認しました。Firefox ブラウザーで実行すると、変換されたコードの結果は期待どおりに動作します ( JavaFX のような奇妙な動作は表示されません)。
また、GraphicsContext APIでメソッドstrokePolyline
とメソッドを使用しようとしました。strokePolygon
以下のコードを使用すると、パスは予想の 2 倍だけ移動/変換されたように見えます。
double xCoords[] = { 0, 300, 300, 0,0 };
double yCoords[] = { 0, 0, 300, 300,0 };
graphics.strokePolyline(xCoords, yCoords, xCoords.length);
これは実際に JavaFX ランタイムのバグであると感じ始めています。
UPDATE3: JavaFX JIRA システムにバグレポートを送信しました: RT-26119。JavaFX チームからフィードバックを受け取り次第、この質問を回答で更新します。
UPDATE4:この問題は、jdk 1.8.0 アーリー アクセス ビルド (b71 でテスト済み) で解決されているようです。
よろしく