dxlib線同士が重ならないようにしたい

Question

前提・実現したいこと

dxlibでマウスを使って線を引けるようなプログラム（点と点を線で結ぶようなプログラム）を組んでいるのですが黒線を白線で消した後また白線の上から黒線を引こうとすると黒の上に白が重なってしまって黒線の方が見えない状況です。理由としては黒線の処理の下に白線の処理を書いてしまっているからだと思うんですがどうすれば重ならないようになるのかが良くわかりません。プログラム始めたばかりの初心者でコードが汚かったり読み辛かったりするかもしれませんがどうかよろしくお願いいたします

発生している問題・エラーメッセージ

線がかぶってしまって見えない

該当のソースコード

#include "DxLib.h"
#include<math.h>
const char TITLE[] = "";

const int WIN_WIDTH = 600; //ウィンドウ横幅
const int WIN_HEIGHT = 400;//ウィンドウ縦幅

#define BC 20000//黒線の制限
#define EC 20000//消しゴムの制限
int WINAPI WinMain(_In_ HINSTANCE hInstance, _In_opt_ HINSTANCE hPrevInstance, _In_ LPSTR lpCmdLine, _In_ int nCmdShow)
{
	ChangeWindowMode(TRUE);						//ウィンドウモードに設定
	//ウィンドウサイズを手動では変更できず、かつウィンドウサイズに合わせて拡大できないようにする
	SetWindowSizeChangeEnableFlag(FALSE, FALSE);
	SetMainWindowText(TITLE);					// タイトルを変更
	SetGraphMode(WIN_WIDTH, WIN_HEIGHT, 32);	//画面サイズの最大サイズ、カラービット数を設定（モニターの解像度に合わせる）
	SetWindowSizeExtendRate(1.0);				//画面サイズを設定（解像度との比率で設定）
	SetBackgroundColor(255, 255, 255);		// 画面の背景色を設定する

	//Dxライブラリの初期化
	if (DxLib_Init() == -1) { return -1; }

	//（ダブルバッファ）描画先グラフィック領域は裏面を指定
	SetDrawScreen(DX_SCREEN_BACK);

	//画像などのリソースデータの変数宣言と読み込み
	int BlackPenX = 0, BlackPenY = 0, Blackradiuss = 1;//書き始めのところ
	int eraserPenX = 0, eraserPenY = 0, eraserradiuss = 10;//書き始めのところ

	//黒線のx、y
	int BlackLineX[BC];//点と点結ぶ線のｘ
	int BlackLineY[BC];//点と点結ぶ線のｙ
	int radius[BC];
	int flag[BC];

	//消しゴム
	int eraserX[EC];//点と点結ぶ線のｘ
	int eraserY[EC];//点と点結ぶ線のｙ
	int eraserradius[EC];
	int eraserflag[EC];

	int mousex = 0, mousey = 0;//mouse座標の取得
	//int BlackPenX, BlackPenY, Blackradiuss;
	// 
	//黒線の初期化位置をBlackPenX,yに
	for (int i = 0; i < BC; i++) {
		BlackLineX[i] = BlackPenX, BlackLineY[i] = BlackPenY, radius[i] = Blackradiuss, flag[i] = 0;
	}

	for (int i = 0; i < EC; i++) {
		eraserX[i] = eraserPenX, eraserY[i] = eraserPenY, eraserradius[i] = eraserradiuss, eraserflag[i] = 0;
	}

	int clickX, clickY;
	int counttimer = 0;
	int Ecounttimer = 0;
	int hanareflag = 0;
	int type = 0;
	int kaeflag = 0;
	int mousetouch = 0;
	//ゲームループで使う変数の宣言
	char keys[256] = { 0 }; //最新のキーボード情報用
	char oldkeys[256] = { 0 };//1ループ（フレーム）前のキーボード情報




	// ゲームループ
	while (1)
	{
		//最新のキーボード情報だったものは１フレーム前のキーボード情報として保存

		//最新のキーボード情報を取得
		GetHitKeyStateAll(keys);

		//画面クリア
		ClearDrawScreen();
		//---------  ここからプログラムを記述  ----------//

		//更新処理
		//mouseがタッチ去れた時に建てる
		if ((GetMouseInput() & MOUSE_INPUT_LEFT) == 1)
		{
			mousetouch = 1;
		}
		if ((GetMouseInput() & MOUSE_INPUT_LEFT) == 0)
		{
			mousetouch = 0;
		}

		//消しゴムとペンの切り替えフラグ
		if (keys[KEY_INPUT_1] == 1) {
			type = 1;
		}
		if (type == 1) {
			if (keys[KEY_INPUT_2] == 1) {
				kaeflag = 1;
				type = 0;
			}
		}

		//全部消すやつ
		if (keys[KEY_INPUT_0] == 1) {
			counttimer = 0;
			Ecounttimer = 0;
		}

		//黒線の方の処理
		GetMousePoint(&mousex, &mousey);
		GetMouseInput();
		
		//mouseが押されたらフラグを１に
		if ((GetMouseInput() & MOUSE_INPUT_LEFT) == 1){
			GetMousePoint(&clickX, &clickY);
			for (int i = 0; i < BC; i++) {
				flag[i] = 1;
			}
		}

		//カーソル座標をクリック位置に
		for (int i = 0; i < BC; i++) {
			if (flag[i] == 1) {
				BlackPenX = clickX;
				BlackPenY = clickY;		
			}
		}

			if (BlackPenX != 0 && BlackPenY != 0) {
				BlackLineX[counttimer] = BlackPenX;
				BlackLineY[counttimer] = BlackPenY;
				
				//制限時間内であれば残像の描画を１ずつ増やす
				if (counttimer < BC&&type!=1&&mousetouch!=0) { counttimer++; }
				DrawFormatString(80, 5, GetColor(0, 0, 0), "%d", counttimer);
		}
		
		//黒線描画処理　点
		for (int i = 2; i < counttimer; i++) {
			DrawCircle(BlackLineX[i], BlackLineY[i], radius[i], GetColor(0, 0, 0), TRUE);
		
					//線と線の距離を求める
				double length = sqrt(((BlackLineX[i] - BlackLineX[i - 1]) * (BlackLineX[i] - BlackLineX[i - 1])) + ((BlackLineY[i] - BlackLineY[i - 1]) * (BlackLineY[i] - BlackLineY[i - 1])));
				
					if(length < 60) {//ある程度の距離が離れるようだったら線引けないようにする
					DrawLine(BlackLineX[i - 1], BlackLineY[i - 1], BlackLineX[i], BlackLineY[i], GetColor(0, 0, 0));
				}
			}
		//黒線処理おわり//
		
		////////////////
		 
			//消しゴムの方の処理
			if ((GetMouseInput() & MOUSE_INPUT_LEFT) == 1){
				GetMousePoint(&clickX, &clickY);
				for (int i = 0; i < EC; i++) {
					eraserflag[i] = 1;
				}
			}

			//カーソル座標をクリック位置に
			for (int i = 0; i < EC; i++) {
				if (eraserflag[i] == 1) {
					eraserPenX = clickX;
					eraserPenY = clickY;
				}
			}

			if (eraserPenX != 0 && eraserPenY != 0) {
					eraserX[Ecounttimer] = eraserPenX;
					eraserY[Ecounttimer] = eraserPenY;

					if (Ecounttimer < BC&&type==1&&mousetouch==1) { 
						Ecounttimer++; 
					}//制限時間内であれば点の描画を１ずつ増やす
					DrawFormatString(80, 5, GetColor(0, 0, 0), "%d", Ecounttimer);
				}

			//消しゴムのやつ描画　点
			for (int i = 2; i < Ecounttimer; i++) {
				DrawCircle(eraserX[i], eraserY[i], eraserradius[i], GetColor(255, 255, 255), TRUE);

			//線分の点と点の距離が一定数離れたら線を描画しないようにする
					double Elength = sqrt(((eraserX[i] - eraserX[i - 1]) * (eraserX[i] - eraserX[i - 1])) + ((eraserY[i] - eraserY[i - 1]) * (eraserY[i] - eraserY[i - 1])));
					if (Elength < 40) {							
					if (type == 1) {
							DrawLine(eraserX[i - 1], eraserY[i - 1], eraserX[i], eraserY[i], GetColor(255, 255, 255));
						}
					}
				DrawFormatString(0, 12, GetColor(0, 0, 0), "%d,%d", Ecounttimer, counttimer);
			}


			//新みたいなやう
			if (type == 0) {
				DrawLine(BlackPenX, BlackPenY, BlackPenX + Blackradiuss, BlackPenY + Blackradiuss, GetColor(0, 0, 0));
			}
			else {
				DrawLine(eraserPenX, eraserPenY, eraserPenX + eraserradiuss, eraserPenY + eraserradiuss, GetColor(255, 255, 255));
			}
			//説明書きのところ
			DrawFormatString(0, 0, GetColor(0, 0, 0), "全削除:0");
			if (type == 0) {
				DrawFormatString(0, 50, GetColor(0, 0, 0), "消しゴム:1      OFF");
			}
			else {
				DrawFormatString(0, 50, GetColor(0, 0, 0), "消しゴム:1    ON");
			}
			//---------  ここまでにプログラムを記述  ---------//
		ScreenFlip();//（ダブルバッファ）裏面
		// 20ミリ秒待機（疑似60FPS）
		WaitTimer(20);
		// Windows システムからくる情報を処理する
		if (ProcessMessage() == -1)
		{
			break;
		}
		// ＥＳＣキーが押されたらループから抜ける
		if (CheckHitKey(KEY_INPUT_ESCAPE) == 1)
		{
			break;
		}
	}
	//Dxライブラリ終了処理
	DxLib_End();

	return 0;
}

試したこと

フラグを変えたりしてあげればできるかなと思いましたがそうすると線自体が消えてしまいました

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[y_waiwai]

このままではコードが読めないので、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

[papu12]

申し訳ありません、、修正の方しました　ご指摘していただきありがとうございます

Answer 1

（どのような形のものを本当に望まれているのかはわかりませんが）
とりあえず現状の話の延長気味に考えるならば，

黒線を白線で消した後また白線の上から黒線を引こう

という話を表現すればよい，
すなわち，

1. 最初に黒線を描画する
2. 次に，白を描画する
3. その次に，黒線を描画する
4. ...

という，描画処理の順序を表現できる形でデータを保有し，その順序で描画すればよい．

例えば，黒と白を別々のデータとして保有するのではなくて，白も黒も表せるデータとして，

• 始点と終点の座標
• 色
• その他必要な情報（線の太さとか）

といった形のデータを考え，
操作によって新しい線等を描画することが決まるごとに，この形のデータを（配列なりに）蓄えていくならば，
蓄えたデータの先頭側のデータから順に用いて描画を行っていけば，描画順序が操作順と一致する．

---

例えば何かこんなデータ型があって…

//描画すべき１本の線分の情報
struct LineSeg
{
  int x0,y0, x1,y1;  //２端点(x0,y0),(x1,y1)
  Color DrawColor;  //描画色（具体的な型はわからんが）
};

//線を描画する
void DrawLine( const LineSeg *pLG )
{
  DrawLine( pLG->x0,pLG->y0, pLG->x1,pLG->y1, pLG->DrawColor );
}

こんな形で複数の線分の情報を保持しているとしたら…

//データ．
//（先頭から nLineSegs 個が現在有効なデータ）
LineSeg LineSegs[100];
int nLineSegs = 0;

こうやって，配列 LineSegs[] の先頭側から順に用いて描画する．
先に描画された線分は，後から描画される線分によって一部を上書きされ得る（よね，っていうだけの話）

for( i=0; i<nLineSegs; ++i )
{
  DrawLine( LineSegs+i );
}

Comments

[papu12]

確認遅れてしまいすみません。自分の知識足らずで申し訳ないのですが蓄えたデータの先頭から順にというところがまだよく分かりません　イメージとしては線の終点からまた線を引くようなものと考えてしまっているのですが、、下は今の自分の考え方のコードです
for (int i = 2; i < BC; i++) {
DrawCircle(BlackLineX[i], BlackLineY[i], radius[i], GetColor(0, 0, 0), TRUE);

//線と線の距離を求める
double length = sqrt(((BlackLineX[i] - BlackLineX[i - 1]) * (BlackLineX[i] - BlackLineX[i - 1])) + ((BlackLineY[i] - BlackLineY[i - 1]) * (BlackLineY[i] - BlackLineY[i - 1])));

//if(length < 60) {//ある程度の距離が離れるようだったら線引けないようにする
//if(type==0){
DrawLine(BlackLineX[i - 1], BlackLineY[i - 1], BlackLineX[i], BlackLineY[i],cr[i]);
//}
if (type == 1) {
for (int j = i; j < counttimer; j++) {//線の終点から引かれる線
cr[i] = GetColor(255, 255, 255);//色を白に
DrawLine(BlackLineX[i-1], BlackLineY[i-1], BlackLineX[i], BlackLineY[i], cr[i]);
}

}
}

[fana]

> ある程度の距離が…

みたいな詳細仕様についてはわかりませんが，話の内容を追記はしておきました．

[papu12]

ご丁寧にコードまでありがとうございます、参考になります　そして追記で申し訳ないのですが色の切り替えはどうやってするのが正解なんでしょうか？今はフラグでフラグが１の時は白線、０の時は黒線という感じで切り替えているんですが切り替えがうまく行かず、白線の上から黒線を引くことは出来たのですが黒線から白線に切り替えようとすると今まで引いていた黒線がすべて白線になってしまいます　この場合どうすればいいのでしょうか？

[fana]

問題点が何なのかわからない．

提示した簡素なコードで言えば，
各線を描画すべき色がデータとして存在しているのだから，それに従って各線を描画するだけの話．
その色のデータ値自体をどう決めるのか？　という話なら，それはもうアプリケーションの仕様（これからマウスか何かで入力しようとする線が白か黒かを決めるための操作方法というか）次第では．

[papu12]

すみません後から見返してみると訳が分からないことを聞いてました、、もう一度貼ってくれたコードを参考に作ってみたら無事実装の方ができました　本当にありがとうございます

Answer 2

残念ながら、現在のコードは、データ構造がベクタなのに、上書きで消去するというラスタでのみ有効な機能を実装するという、設計ミスの為、簡単な変更では修正できません。

まずは、ラスタとベクタに関して、学んでください。
ラスタとベクタ

追記
ベクタのまま修正する場合の修正方法です。

現状のデータは、黒線をペン、白線を消しゴムとして扱い、全ての黒線を描画した後、全ての白線を描画しています。
これを、黒線も白線もペンとして扱い、配列も分けずにまとめます。(ただし、別途、色を保持する配列も必要)
描画も、黒線、白線、黒線と書かれたのならば、そのまま、黒線、白線、黒線の順番に描画します。

この修正で、画面上は正しい絵になりますが、本来意図していた消去という概念からは遠ざかります。

その為、描画済みの線を選択できるようにし、選択した線を削除できるようにするのが、一般的な実装になります。

Comments

[papu12]

全然知りませんでした。ラスタとベクタですか、、勉強してきます　教えてくださりありがとうございました

[papu12]

ご親切に修正方法までありがとうございます。追加の質問で申し訳ないんですが、色を保持する配列についてなんですがどう使えばいいんでしょうか?今は色のオン、オフのフラグを立てて上げてオフの時はgetcolor(0.0.0)オンの時はgetcolor(255.255.255)といった感じに色を変えています。ですがこの方法だと白線の上から黒線を引くことは可能になったのですが黒線から白線に切り替えるとき、今まであった黒線が全部白線になってしまいます。どうするのが正解なんでしょうか？

[YT0014]

現在のコードを最大限生かすのなら、色番号などの配列をX座標などと同じだけ用意することになります。
一般的な実装としては、XYの座標、半径、色などをまとめた構造体を用意し、その構造体の配列で管理します。

[papu12]

なるほど構造体の配列使うんですね　おかげさまで上書きの方ができました　ありがとうございました　これからラスタとベクタについて勉強しようと思います