【課題9-11】円弧その2(加点)

プロジェクトタイプ	C#コンソールアプリ※
プロジェクト名	`Prac_9_11`
ソリューション名	`PET9`
ターゲットフレームワーク	.NET 6.0 (長期的なサポート)
最上位レベルのステートメントを使用しない	使用しない(チェックオン)

※ 「コンソールアプリ(.NET Framework)」ではないので注意せよ！

【課題9-10】のプログラムでは開始角と終了角をを$0$以上$2\pi$未満の範囲に制限していたため， 円弧の開口部は必ず画像右側に制限されていた．言い換えれば，円弧がかならずＣの字になってしまい，開口部を左側に持っていくことができなかった．

そこで，【課題9-10】を改造して，この制限をとりはらい 開始角＜終了角である限り正しく円弧を描画できるように変更せよ ．

注意

この設問を解くには先に以下の課題を完了する必要がある．
- 【課題9-10】
この課題は加点課題である．
必ずC#で画像を扱う方法の説明を読んでから取り組むこと．

C#で画像を扱う方法

表示するにはここをクリック

C#で画像を扱う方法はいくつかあるが，ここではSkiaSharpというライブラリを使用する方法を紹介する．

このライブラリをプロジェクトにインストールして以下のように書くと，実行ファイルと同じ場所に output.pngという赤一色の画像ファイルが作られる(このプログラムを実行するには後述するプロジェクトの設定が必要である)．

画像を生成するプログラム

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
using SkiaSharp; // 追記

namespace Prac_9_11
{
    internal class Program
    {
        static void Main(string[] args)
        {
            // 画像を作る(512 x 512 ピクセル)
            SKBitmap img = new SKBitmap(512, 512);

            for (int y = 0; y < img.Height; ++y) 
            {
                for (int x = 0; x < img.Width; ++x) 
                {
                    // 描画色を赤(RGB=〈255,0,0〉)にする
                    SKColor color = new SKColor(255, 0, 0);

                    // 画像の座標(x, y)の位置のピクセルを↑の色で塗る
                    img.SetPixel(x, y, color);
                }//for
            }//for

            // 生成した画像を output.png という名前でファイルに保存する．
            using (Stream file = File.Open("output.png", FileMode.Create))
            {
                img.Encode(file, SKEncodedImageFormat.Png, 0);
            }//using        

        }// end of Main()
    }// end of class Program
}// end of namespace

SkiaSharpを使用するためには以下の手順を行えばよい．

【手順】SkiaSharpのセットアップ手順
1. C#の「コンソールアプリ」タイプのプロジェクトを用意する(_)
2. ソリューションエクスプローラー上で設定を行うプロジェクトを右クリックして，「NuGetパッケージの管理」をクリックする(_)．
3. 「参照」をクリックして検索欄に「SkiaSharp」と入力する．「SkiaSharp」が検索されるので¹，画面右側の「インストール」ボタンをクリックする(_)．
  - この際いくつか確認が表示されるので「OK」など肯定的な選択を行う(_，_)．
4. ボタンが「アンインストール」に変わったらインストール完了である(_)．

以上のセットアップを行い_のプログラムを書き込んで実行すると画像が生成されファイルに保存される．保存された画像ファイルを確認するには以下の手順を行う．

【手順】出力画像の確認方法
1. Main()メソッドにプログラムを書きこんで実行する(_)．
  - コンソールには何も表示されない(正常な動作)．この画面は閉じてもよい(_)．
2. ソリューションエクスプローラー上で実行したプロジェクトを右クリックして，「エクスプローラーでフォルダーを開く」をクリックする(_)．
3. エクスプローラーの画面が開くので「bin」→「Debug」→「net6.0」とナビゲートする(_(4)～_)．
4. プログラム内の img.Save(...) メソッドに渡した文字列同じファイル名の画像ファイルが作られている(_)．
  - この画像ファイルを開くと，サンプルの通り書いていれば赤く塗りつぶされた画像が表示されるはずである(_)．

詳しい操作方法が分からない場合は，_の動画を参考にするとよい²，³．

SkiaSharpライブラリをプロジェクトに追加するための設定

表示するにはここをクリック : 閉じる

_をベースとして，_のような円弧を描いた画像を生成するプログラムを作成せよ．画像サイズは_の通り縦横512×512ピクセルで固定とする．

この円の以下の特徴は自在に変更できるようにすること．

円の中心位置
内半径
外半径
前景色(円の内側の色)
背景色(円の外側の色)
開始角(単位: ラジアン)
- 値の範囲 ：開始角＜終了角
終了角(単位: ラジアン)
- 値の範囲 ：開始角＜終了角

このために_のようにMain()メソッドの冒頭に以下のような定数を用意すること．

あらかじめ用意する定数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
internal class Program
{
    private static readonly int CenterX = 255; // 円の中心位置の x 座標
    private static readonly int CenterY = 255; // 円の中心位置の y 座標
    private static readonly int InnerRadius = 100;  // 内半径
    private static readonly int OuterRadius = 200;  // 外半径
    private static readonly SKColor ForeColor = new SKColor(251, 201, 62); // 前景色(塗りつぶし色)
    private static readonly SKColor BackColor = new SKColor(176, 67, 105); // 背景色
        
    // 実行例1(図4(1))
    // ※ 提出時はこちらのパラメータで提出すること．
    private static readonly double StartAngle = -0.5 * Math.PI; // 開始角(ラジアン)
    private static readonly double EndAngle = 1.25 * Math.PI; // 終了角(ラジアン)

    // 実行例2(図4(2))
    // (使用する場合は↑をコメントアウトしたうえで，アンコメントすること．)
    // private static readonly double StartAngle = 0.9 * Math.PI;
    // private static readonly double EndAngle = 2.5 * Math.PI;

    static void Main(string[] args)
    {
        // 画像を作る(512 x 512 ピクセル)
        SKBitmap img = new SKBitmap(512, 512);

        for (int y = 0; y < img.Height; ++y)
        {
    // ... 以下省略 ...

ヒント

表示するにはここをクリック

まず開始角や終了角が$0$以上$2\pi$未満ではない場合に，これらの角度と等しい$0$以上$2\pi$未満の範囲の角度を算出しておく必要がある．
- 例えば$-0.5\pi$は$1.5\pi$と同位相である．また$2.5\pi$は$0.5\pi$と同位相である．
- この角度は以下の様にすれば算出できる．
  - その角度が$0$未満である場合：その角度が$0$以上になるまで，$2\pi$を足していく．
  - その角度が$2\pi$超である場合：その角度が$2\pi$未満になるまで，$2\pi$を引いていく．
- 注意: 開始角や終了角をこの方法で算出した角度で上書きしてしまうと，以降の処理が正しく行えないので注意せよ ．
このうえで，_に示すように，円弧を「 開始角→$2\pi$の円弧 」と「 $0$→終了角の円弧 」の二つの円弧に分けて考えてみよう．

表示するにはここをクリック : 閉じる

検索結果に表示されるアイコンはバージョンなどによって異なるので注意せよ．必ずしも_と全く同じ表示となるわけではないので名前をよく見て適切なライブラリを選択すること． ↩︎
Apple社の都合により，iPhone，iPadなどのデバイスでは動画の再生はできません(Apple社はスマートフォン/タブレット製品で，意図的？にVPxやAV1コーデックのサポートを遅らせているため．参考1，参考2)． ↩︎
Microsoft Edge で動画を閲覧するためには，AV1 Extensionをインストールする必要があります． ↩︎

Last updated on 2023-12-11
Published on 2023-12-11