Pictureboxを重ねる

Question

ＶＢでテトリスを作ろうと思っているんですが・・。

最初に作ったPictureboxを後に作ったPictureboxに重ねると、最初に作ったPictureboxが隠れてしまって見えません。。

 

凸のような形の空白部分は透明にしてあります。

Pictureboxの背景色はTransparentにしてあります。

 

どうやったら凸のような形の空白部分がPicturebox同士でも透けるようにできるでしょうか？？

Answer 1

pictureboxのparentプロパティを設定してあげてください。

 

Answer 2

ハジ さん、こんにちは

ダッチです。

 

Color.Transparent は親コントロールを表示すると思った方がいいと思います。
PictureBox の親コントロールはフォームになっているのではないでしょうか？
その場合は PictureBox 同士が重なった時に透明になっている部分には、フォームが表示されているはずです。

 

ではどうするかというと PictureBox 自体の形を変えてやります。

PictureBox の Region プロパティを 凸 の形にすれば期待通りの表示が出来ると思います。

PictureBox を三角形にするサンプル

Dim p As New System.Drawing.Drawing2D.GraphicsPath
p.StartFigure()
p.AddLines(New Point() {New Point(0, 0), New Point(100, 0), New Point(0, 100)})
p.CloseFigure()     
Me.PictureBox1.Region = New Region(p)

 

 

そのほかの方法としては、一つひとつのピース（？）を PictureBox で表現するのではなく、直接描画してしまったほうがいいと思います。これが一番のお勧めです。PictureBox の数が多くなってくるとリソースを多く消費し、描画が重くなってくるかもしれません。

Answer 3

TeamBJさん、ダッチさん返答ありがとうございます。

 

Regionプロパティなんですけど・・。

座標の設定の仕方がよく分からないんですけど。。

調べてみたんですけど、詳しい説明が載ってる所がなく。。

Regionの使い方を教えてください！！

お願いします。

Answer 4

ハジ さんからの引用

Regionの使い方を教えてください

Region の使い方というよりは GraphicsPath を使用して Region を作成するのが簡単ですので GraphicsPath の使い方になります。

 

一応 GraphicsPath を使用して三角形を作成するサンプルを記載しましたが、わかりませんでしたか？

 

AddLines メソッドでは指定した座標をたどるように線をまとめて引いていきます。
CloseFigure メソッドを呼ぶと最初の座標から最後の座標に線を引きます。
これで図形が出来るイメージがわきますか？

 

いろいろと AddLines メソッドに座標を渡してみてどう変化するのかを確認できれば、イメージがわきやすいかと思います。

例えば、次の四点の座標を結ぶ図形はどうなるかイメージがわきますか？
(0, 0) - (10, 0) - (10, 10) - (0, 10)
これは一辺が 10 ピクセルの四角形ができます。

 

それと特に AddLines メソッドにこだわる必要はありません。

AddLine メソッドを使用すれば一本一本線を引いていきます。
AddArc メソッドを使用すれば丸みを帯びた図形も作成することができます。

 

テトリスであれば丸みを帯びる必要はないと思いますので、AddLines メソッドや AddLine メソッドだけで十分だと思いますよ。

 

手元に方眼紙などがあれば実際に線を引いてみて角の座標がどうなっているかを確認しやすいと思います。

 

実際にこういう図形が作りたくてこういうコードを書きましたが形が変になってしまいます、というのがあればそれを提示してもらえれば指摘できると思います。

Answer 5

では、

 

 p.AddLines(New Point() {New Point(10, 0), New Point(20, 0), New Point(20, 30), New Point(0, 30), New Point(0, 20), New Point(10, 20), New Point(10, 0)})

というコードにすれば、＿＿｜みたいな形のパーツができるということですか？？

Answer 6

回転した感じになってますが、出来ています。

 

イメージしやすいようにこんなのを作ってみました。

 

 

＿＿｜この形を作るには、左上の座標 (0, 10) を始点として右方向に線を引いていくとこのようになります。

Code Snippet

p.AddLines(New Point() {New Point(0, 10), New Point(20, 10), New Point(20, 0), New Point(30, 0), New Point(30, 20), New Point(0, 20), New Point(0, 10)})

 

 

最後の New Point(0, 10) は無くてもかまいません。

 

Answer 7

とても分かりやすい説明に感謝です！！

 

一つ気になったんですけど、この x と y は、Formのサイズで数えるんですか？？

それともPictureboxのサイズで数えるんですか？？

Answer 8

話をぶっちぎってすみませんが、

私の方法は以下のようになります。念のため。

Code Snippet

Me.PictureBox1.Image = Image.FromFile("C:\test.jpg")

        Dim bmp As New Bitmap(200, 200, Imaging.PixelFormat.Format32bppArgb)
        Dim g As Graphics = Graphics.FromImage(bmp)
        g.FillEllipse(Brushes.Red, New Rectangle(0, 0, 200, 200))
        g.Dispose()

        Me.PictureBox2.Parent = Me.PictureBox1
        Me.PictureBox2.Left = 0
        Me.PictureBox2.Top = 0
        Me.PictureBox2.Image = bmp
        Me.PictureBox2.BackColor = Color.Transparent

 

 

Answer 9

ハジ さんからの引用

一つ気になったんですけど、この x と y は、Formのサイズで数えるんですか？？ それともPictureboxのサイズで数えるんですか？？

PictureBox のサイズになります。

図では 10 や 20 という値になっていますが、ハジさんが最適だと思う大きさにすればいいですよ。

 

それと GraphicsPath を Region にしていますが、GraphicsPath を描画することもできますので、落ち着いてきたら描画する方法も試してみてください。いろいろやれることが増えてくるとプログラミングが楽しくなってきます。

Answer 10

返信ありがとうございます。

 

TeamBJさんのやり方も試してみたいと思います。

分からなくなったらまた聞きたいと思うのでその時はよろしくお願いします。

 

ダッチさんも丁寧に教えてくださってありがとうございます。

これでテトリスも少し進みそうです。

 

どうもありがとうございました。