3

XNAを使用してプログラムで線を描画する問題については、ここで説明しています。ただし、MSペイントなどの描画アプリの場合と同じように、ユーザーがキャンバスに描画できるようにしたいと思います。

もちろん、これには、マウスポインタの位置でxおよび/またはy座標を変更するたびに、キャンバス上にクレヨン色で線の別の「ドット」がリアルタイムで描画されるようにする必要があります。

マウス移動イベントでは、線を1つずつ描画するために、どのXNA APIの考慮事項が関係しますか?文字通り、もちろん、私はそのように線を引くのではなく、むしろ一連の「点」を描きます。各「ドット」は、1ピクセルより大きくなる可能性があり、おそらく大きくなるはずです。フェルトペンで描くことを考えてみてください。

4

1 に答える 1

7

あなたが提供した記事は、プリミティブで線を描く方法を提案しています。ベクトルグラフィックス、言い換えれば。Paintのようなアプリケーションは、ほとんどがピクセルベースです(Photoshopのようなより高度なソフトウェアにはベクトルとラスタライズ機能がありますが)。

ビットマップエディタ

「ペイントのような」ものにしたいので、私は間違いなくピクセルベースのアプローチを採用します。

  1. 色の値のグリッドを作成します。( System.Drawing.Bitmapクラスを拡張するか、独自のクラスを実装します。)
  2. (ゲーム)ループを開始します:
    • 入力を処理し、それに応じてグリッドの色の値を更新します。
    • ビットマップをTexture2Dに変換します。
    • スプライトバッチまたはカスタムレンダラーを使用して、テクスチャを画面に描画します。
  3. 必要に応じて、ビットマップを保存します。

ビットマップに描画する

ここで使用している画像クラスの大まかなドラフトを回答の下部に追加しました。しかし、コードはとにかく非常に自明である必要があります。

前述のように、画像をTexture2Dに変換して画面に描画する方法も実装する必要があります。


まず、新しい10x10画像を作成し、すべてのピクセルを白に設定します。

var image = new Grid<Color>(10, 10);
image.Initilaize(() => Color.White);

白10*10ピクセルグリッド

次に、ブラシを設定します。ブラシは、本質的には画像全体に適用される機能にすぎません。この場合、関数は指定された円内のすべてのピクセルを濃い赤色に設定する必要があります。

// Create a circular brush
float brushRadius = 2.5f;
int brushX = 4;
int brushY = 4;
Color brushColor = new Color(0.5f, 0, 0, 1); // dark red

ブラシ領域と中心を定義する円と十字のある白の10*10カラーグリッド

次に、ブラシを適用します。円の内側のピクセルを識別する方法については、私のこのSO回答を参照してください。ブラシオフセットにマウス入力を使用して、ユーザーが実際にビットマップに描画できるようにすることができます。

double radiusSquared = brushRadius * brushRadius;

image.Modify((x, y, oldColor) =>
{
    // Use the circle equation
    int deltaX = x - brushX;
    int deltaY = y - brushY;
    double distanceSquared = Math.Pow(deltaX, 2) + Math.Pow(deltaY, 2); 

    // Current pixel lies inside the circle
    if (distanceSquared <= radiusSquared)
    {
        return brushColor;
    }

    return oldColor;
});

円内のすべてのピクセルが濃い赤に設定された白の10*10カラーグリッド

ブラシの色と古いピクセルの間を補間することもできます。たとえば、ブレンド量をブラシの中心と現在のピクセルの間の距離に依存させることで、「ソフト」ブラシを実装できます。

柔らかな濃い赤のドットが付いた白の10*10カラーグリッド

線を引く

フリーハンドの線を描くには、(マウスの動きに応じて)毎回異なるオフセットでブラシを繰り返し適用します。

円形のブラシを繰り返し塗って線を引く


カスタム画像クラス

私は明らかにいくつかの必要なプロパティ、メソッド、およびデータ検証をスキップしましたが、あなたは考えを理解します:

public class Image
{
    public Color[,] Pixels { get; private set; }

    public Image(int width, int height)
    {
        Pixels= new Color[width, height];
    }

    public void Initialize(Func<Color> createColor)
    {
         for (int x = 0; x < Width; x++)
         {
             for (int y = 0; y < Height; y++)
             {
                  Pixels[x, y] = createColor();
             }
         }
    }

    public void Modify(Func<int, int, Color, Color> modifyColor)
    {
         for (int x = 0; x < Width; x++)
         {
             for (int y = 0; y < Height; y++)
             {
                  Color current = Pixels[x, y];
                  Pixels[x, y] = modifyColor(x, y, current);
             }
         }
    }
}
于 2013-01-30T00:47:01.760 に答える