C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[6]: DrawLineで書いた1pxの線の色が薄い


(過去ログ 103 を表示中)

[トピック内 17 記事 (1 - 17 表示)]  << 0 >>

■61266 / inTopicNo.1)  DrawLineで書いた1pxの線の色が薄い
  
□投稿者/ ruoto (1回)-(2011/08/08(Mon) 11:19:32)

分類:[VB.NET/VB2005 以降] 

2011/08/08(Mon) 13:57:45 編集(投稿者)
2011/08/08(Mon) 11:21:05 編集(投稿者)
2011/08/08(Mon) 11:20:57 編集(投稿者)

<pre><pre>VS2005・vb.netでWindowsアプリケーションを開発しています。

PicterBoxの上にDrawLineで1pxの線を描画し、
この線の描画位置をTimerで動かすことで、
ドアが開くイメージのアニメーションを作成しました。


┌─┬─┐ ┌┬─┬┐ ┌───┐
│ │ │ ││ ││ │   │ 
│ │ │→││ ││→│   │ 
│ │ │ ││ ││ │   │ 
└─┴─┘ └┴─┴┘ └───┘
 縦x横の大きさ :45px x 45px 
 枠線はPicterBox、縦線をDrawLineで描画
  

背景が濃紺で線色が黒のときは目立たないのですが、
線色を黄色にしてアニメーション表示させると、線色が描画位置によって薄くなってしまいます。

GraphicsのSmoothingModeプロパティでアンチエイリアスを有効にすると
この現象が発生することを確認したのですが、
アンチエイリアスを無効にするとアニメーション動作が1px間隔でカクカクと表示され、スムーズに動きません。

色が薄くならずに、スムーズに動かす方法がないものでしょうか?

何か情報をいただけたら幸いです。
引用返信 編集キー/
■61277 / inTopicNo.2)  Re[1]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ shu (924回)-(2011/08/08(Mon) 13:29:54)
どんな描画処理を書かれているか分かるように
ソースの抜粋を載せたほうが良いと思います。
引用返信 編集キー/
■61280 / inTopicNo.3)  Re[2]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ ruoto (2回)-(2011/08/08(Mon) 13:53:56)
2011/08/08(Mon) 13:55:12 編集(投稿者)

No61277 (shu さん) に返信
> どんな描画処理を書かれているか分かるように
> ソースの抜粋を載せたほうが良いと思います。

ご指摘ありがとうございます。
線の描画処理と線の描画位置を変更する処理です。
フォームには 画像をimageプロパティで指定したPictureBoxと
Timerコントロールを配置しています。

■線の描画処理

Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
Dim g As Graphics = e.Graphics

g.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic
g.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias

g.DrawImage(img, 0, 0)

g.DrawLine(New Pen(Brushes.Yellow, wkWidth), x1, 0, x1, 45.0F)

End Sub

■線の描画位置をTimerで変えている処理

Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick

x1 += 0.1F
PictureBox1.Refresh()
If x1 > 45.0F Then
Timer1.Stop()
x1 = 0.0F
End If
End Sub
引用返信 編集キー/
■61287 / inTopicNo.4)  Re[3]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ shu (927回)-(2011/08/08(Mon) 16:07:17)
No61280 (ruoto さん) に返信

> g.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic
これが線の描画にも影響してしまっているためではないですか?

引用返信 編集キー/
■61310 / inTopicNo.5)  Re[4]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ ruoto (3回)-(2011/08/08(Mon) 22:58:28)
No61287 (shu さん) に返信
> ■No61280 (ruoto さん) に返信
>
>> g.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic
> これが線の描画にも影響してしまっているためではないですか?
>
書き込みありがとうございます。

g.SmoothingModeをAntiAliasのまま、
g.InterpolationMode を DefaultやLow、NearestNeighborなどのほかのものにしても
同じように表示位置が少数値の場合に線色が薄くなってしまいます。

また、
g.SmoothingModeはAntiAliasとHighQualityの場合に色が薄くなりますが、
他の設定値にした場合は色が薄くなる現象は発生しませんが、
アニメーション動作が1px間隔でカクカクと表示され、スムーズに動いているように見えない状況です。

以上から
g.SmoothingModeよりInterpolationModeの方が強く影響していると思っています。

引用返信 編集キー/
■61311 / inTopicNo.6)  Re[5]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ shu (929回)-(2011/08/08(Mon) 23:05:57)
No61310 (ruoto さん) に返信

> g.SmoothingModeをAntiAliasのまま、
> g.InterpolationMode を DefaultやLow、NearestNeighborなどのほかのものにしても
> 同じように表示位置が少数値の場合に線色が薄くなってしまいます。
小数の場合だけならDrawLineするときに整数化すればいいんじゃないかな?
引用返信 編集キー/
■61313 / inTopicNo.7)  Re[3]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ Azulean (815回)-(2011/08/09(Tue) 00:20:28)
No61280 (ruoto さん) に返信
> Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
> x1 += 0.1F

これってどうなることを期待しているのですか?
画面のピクセルは整数単位が基本です。小数単位で座標を指定した場合、ピクセルとピクセルの間に描くことを指示していますが、結局はピクセル単位にしないといけないので、うまく整合性をとるために周辺の色と合成される(=薄くなる)効果が予想されます。

そもそも、なぜ、0.1 ピクセルという通常表現できない単位で移動させる必要があるのでしょうか。
引用返信 編集キー/
■61326 / inTopicNo.8)  Re[4]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ ruoto (4回)-(2011/08/09(Tue) 12:05:29)
No61313 (Azulean さん) に返信
> ■No61280 (ruoto さん) に返信
>> Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
>> x1 += 0.1F
>
> これってどうなることを期待しているのですか?
> 画面のピクセルは整数単位が基本です。小数単位で座標を指定した場合、ピクセルとピクセルの間に描くことを指示していますが、結局はピクセル単位にしないといけないので、うまく整合性をとるために周辺の色と合成される(=薄くなる)効果が予想されます。
>
> そもそも、なぜ、0.1 ピクセルという通常表現できない単位で移動させる必要があるのでしょうか。

ドアがゆっくりと開くイメージのアニメーションを実現しようとしています。
1px単位で指定すると動かしたときにカクカクとした動きになってしまうので、
これを回避するためにSmoothingModeを使った処理を実装しました。
(早く動かせばスムーズに動くのですが、1px/秒くらいのスピードでスムーズに動かしたいのです。)

これによりスムーズに動く(ように見える)ようになったのですが、
色が表示位置によって変わってしまうようになってしまいました。

原理的に回避できない現象とも思われますが、
私の思い込みや別のアプローチがあるのではないかと思い投稿させていただきました。



引用返信 編集キー/
■61327 / inTopicNo.9)  Re[4]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ PATIO (124回)-(2011/08/09(Tue) 12:06:08)
2011/08/09(Tue) 12:07:07 編集(投稿者)

> アニメーション動作が1px間隔でカクカクと表示され、スムーズに動いているように見えない状況です。

1ピクセル動くのに時間が掛かりすぎているからでは?
Azuleanさんも書かれている通り、本来の画面の解像度からすると小数点以下は表現されないので
どちらかのピクセルに寄る筈です。で、閾値を越えたタイミングで隣のピクセルに移るので
1ピクセル移動するのに時間が掛かっています。
つまり見た目上、パタパタ感が出ているのでは?

アンチエイリアスをかけているとその小数値の部分を無理やり表現しようとして言われているような
現象が起きているのではと言うはAzuleanさんと同意見です。
基本的には1ピクセル以上の解像度は無いわけですからその中で表現するようにするのか、
色が薄くなってしまうのを我慢するのか、
どちらかになるのではないかと思います。

P.S:ニアミスでした。(^^;
引用返信 編集キー/
■61329 / inTopicNo.10)  Re[6]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ ruoto (5回)-(2011/08/09(Tue) 12:10:08)
No61311 (shu さん) に返信
> ■No61310 (ruoto さん) に返信
>
>>g.SmoothingModeをAntiAliasのまま、
>>g.InterpolationMode を DefaultやLow、NearestNeighborなどのほかのものにしても
>>同じように表示位置が少数値の場合に線色が薄くなってしまいます。
> 小数の場合だけならDrawLineするときに整数化すればいいんじゃないかな?

1px/秒くらいのスピード動かしたときに
1px単位で指定すると動かしたときにカクカクとした動きになってしまうので、
表示位置に少数を指定し、かつSmoothingModeにAntiAliasを設定しています。
引用返信 編集キー/
■61330 / inTopicNo.11)  Re[5]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ おのでら (7回)-(2011/08/09(Tue) 12:13:07)
おのでら さんの Web サイト
2011/08/09(Tue) 12:15:12 編集(投稿者)

線の太さを1pxにこだわらなくてもいいのであれば、太さを2pxにするのも手じゃないでしょうか。(1pxごときっかり移動させなければいけないようでもなさそうですし)
引用返信 編集キー/
■61331 / inTopicNo.12)  Re[5]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ shu (930回)-(2011/08/09(Tue) 12:27:25)
No61326 (ruoto さん) に返信

> ドアがゆっくりと開くイメージのアニメーションを実現しようとしています。
> 1px単位で指定すると動かしたときにカクカクとした動きになってしまうので、
> これを回避するためにSmoothingModeを使った処理を実装しました。
> (早く動かせばスムーズに動くのですが、1px/秒くらいのスピードでスムーズに動かしたいのです。)
1px/sのスピードってスムーズでないと思うのですが、
Intervalを100にして0.1pxずつ移動するのと
Intervalを1000にして1pxずつ移動するのとで大差はないと思うのですが、ruotoさんの環境ではそんなに変わるのでしょうか?
引用返信 編集キー/
■61334 / inTopicNo.13)  Re[6]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ YAS (19回)-(2011/08/09(Tue) 14:25:23)
1pxとなりに透明からだんだん濃くなるように線を引き,同時に最初の線が濃い色からだんだん透明になるようにすれば,
線はかくかくと動かずぬるぬると動いているように見えるのではないでしょうか。
2本の線の合計の明るさが常に一定になるような条件が分からないと点滅するように見えてしまうかもしれませんが...

下は説明のためのコードです。透明度の制御は適当です。
Public Class Form1

Private WithEvents Timer1 As New Timer
Private Const MinOpa As Integer = 48
Private Opa1 As Double = MinOpa
Private x As Integer

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Me.BackColor = Color.Black
Me.DoubleBuffered = True
Me.Timer1.Interval = 100
Me.Timer1.Start()
End Sub

Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
Me.Invalidate()
Opa1 += 16
If Opa1 > 255 Then
Opa1 = MinOpa
x = (x + 10) Mod 100
End If
End Sub

Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
Dim g As Graphics = e.Graphics
Dim Opa2 As Integer = CInt(255 + MinOpa - Opa1)
Dim Height As Integer = Me.ClientSize.Height
g.FillRectangle(New SolidBrush(Color.FromArgb(Opa2, Color.Yellow)), x, 0, 10, Height)
g.FillRectangle(New SolidBrush(Color.FromArgb(CInt(Opa1), Color.Yellow)), x + 10, 0, 10, Height)
End Sub

End Class

引用返信 編集キー/
■61350 / inTopicNo.14)  Re[6]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ ruoto (6回)-(2011/08/10(Wed) 01:25:01)
No61331 (shu さん) に返信
> ■No61326 (ruoto さん) に返信
>
> 1px/sのスピードってスムーズでないと思うのですが、
> Intervalを100にして0.1pxずつ移動するのと
> Intervalを1000にして1pxずつ移動するのとで大差はないと思うのですが、ruotoさんの環境ではそんなに変わるのでしょうか?

わずかな差ではありますが、
SmoothingModeを使って0.1pxずつ移動させた方が滑らかに動いているように感じます。



引用返信 編集キー/
■61351 / inTopicNo.15)  Re[6]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ ruoto (7回)-(2011/08/10(Wed) 01:37:11)
No61330 (おのでら さん) に返信
> 2011/08/09(Tue) 12:15:12 編集(投稿者)
>
> 線の太さを1pxにこだわらなくてもいいのであれば、太さを2pxにするのも手じゃないでしょうか。(1pxごときっかり移動させなければいけないようでもなさそうですし)


2pxにすると改善されました。
他の方法と比較しながら検討させていただきたいと思います。
ありがとうございます。
引用返信 編集キー/
■61454 / inTopicNo.16)  Re[7]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ ruoto (8回)-(2011/08/13(Sat) 18:24:17)
No61334 (YAS さん) に返信
> 1pxとなりに透明からだんだん濃くなるように線を引き,同時に最初の線が濃い色からだんだん透明になるようにすれば,
> 線はかくかくと動かずぬるぬると動いているように見えるのではないでしょうか。
> 2本の線の合計の明るさが常に一定になるような条件が分からないと点滅するように見えてしまうかもしれませんが...
>

ご回答ありがとうございます。
お盆休みであまり時間がとれず、
少ししか試せていないのですが、
今の方法よりぬるぬるうごきそうな感じがしました。

勝手ながら休み明けに確認してコメントさせていただきます。

引用返信 編集キー/
■61661 / inTopicNo.17)  Re[7]: DrawLineで書いた1pxの線の色が薄い
□投稿者/ ruoto (9回)-(2011/08/26(Fri) 08:57:44)
No61334 (YAS さん) に返信
> 1pxとなりに透明からだんだん濃くなるように線を引き,同時に最初の線が濃い色からだんだん透明になるようにすれば,
> 線はかくかくと動かずぬるぬると動いているように見えるのではないでしょうか。
> 2本の線の合計の明るさが常に一定になるような条件が分からないと点滅するように見えてしまうかもしれませんが...

遅くなってすいません。

明るさの閾値(MinOpa)をあげると太く見える、下げると点滅するように見えるのですが、
MinOpaを80くらいでイメージの動きになることが確認できました。
ありがとうございます。


解決済み
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -