DOBON.NETプログラミング道掲示板
(現在 過去ログ2 を表示中)

[ 最新記事及び返信フォームをトピックトップへ ]

■33720 / inTopicNo.1)  画像の中心で回転させたい
  
□投稿者/ たこ 一般人(1回)-(2017/10/23(Mon) 18:27:40)
  • アイコン環境/言語:[Windows10 64bit、VB.NET、.NET Framework 4.5.2] 
    分類:[.NET] 

    2017/10/23(Mon) 22:44:27 編集(投稿者)

    いつも参考にさせて頂いており、お世話になっています。

    グラフィック系の質問なのですが、矢印アイコンなどの正方形の画像を、
    画像の中心で任意の方向に回転させたいのですが、ヒントでもご教授頂ければと思い、
    投稿させて頂きました。

    参考にしたページは

    画像を指定した角度回転して表示する
    https://dobon.net/vb/dotnet/graphics/skewing.html#rotate

    ワールド変換により画像を平行移動、拡大、縮小、回転して表示する
    https://dobon.net/vb/dotnet/graphics/transform.html#section1

    なのですが、どうしても画像の左上で回転してしまいます。
    rotateImage1のメソッドを何とかすれば良い気もしていますが…
    (サンプルそのままですみません…汗)


    -------------------------------------------------------------------------------
    Public Class Form1
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    PictureBox1.ImageLocation = "s1.png"
    TrackBar1_Scroll(Nothing, Nothing)
    End Sub

    Private Sub TrackBar1_Scroll(sender As Object, e As EventArgs) Handles TrackBar1.Scroll
    TextBox1.Text = TrackBar1.Value
    End Sub

    Private Sub TextBox1_TextChanged(sender As Object, e As EventArgs) Handles TextBox1.TextChanged
    If TextBox1.Text <> "" Then
    If (0 <= TextBox1.Text AndAlso TextBox1.Text <= 359) Then
    TrackBar1.Value = TextBox1.Text
    ElseIf TextBox1.Text > 359 Then
    TextBox1.Text = 359
    TrackBar1.Value = TextBox1.Text
    Else
    TextBox1.Text = 0
    TrackBar1.Value = TextBox1.Text
    End If
    End If
    rotateImage1()
    rotateImage2()
    End Sub

    Private Sub rotateImage1()
    Dim g As Graphics
    Dim Img As Image = Image.FromFile("s1.png")
    Dim backImg As New Bitmap("Blank.jpg")

    '描画先とするImageオブジェクトを作成する
    Dim bmp As New Bitmap(Img.Width, Img.Height)
    'ImageオブジェクトのGraphicsオブジェクトを作成する
    g = Graphics.FromImage(bmp)

    'ラジアン単位に変換
    Dim d As Double = Single.Parse(TextBox1.Text / (180 / Math.PI))
    '新しい座標位置を計算する
    Dim x As Single = Img.Width / 2.0F
    Dim y As Single = Img.Height / 2.0F
    Dim x1 As Single = x + Img.Width / 3.0F * CType(Math.Cos(d), Single)
    Dim y1 As Single = y + Img.Width / 3.0F * CType(Math.Sin(d), Single)
    Dim x2 As Single = x - Img.Height / 3.0F * CType(Math.Sin(d), Single)
    Dim y2 As Single = y + Img.Height / 3.0F * CType(Math.Cos(d), Single)
    'PointF配列を作成
    Dim destinationPoints() As PointF = {New PointF(Img.Width - x, Img.Height - y), New PointF(x1, y1), New PointF(x2, y2)}
    'Dim destinationPoints() As PointF = {New PointF(x, y), New PointF(x1, y1), New PointF(x2, y2)}

    '画像を表示
    g.DrawImage(Img, destinationPoints)


    'リソースを解放する
    Img.Dispose()
    g.Dispose()

    bmp.MakeTransparent()

    '背景の画像と合成する
    '背景となる画像を読み込む
    '背景の画像に描画する
    g = Graphics.FromImage(backImg)
    g.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height)
    g.Dispose()
    bmp.Dispose()

    PictureBox2.Image = backImg
    End Sub

    Private Sub rotateImage2()
    Dim g As Graphics
    Dim Img As Image = Image.FromFile("s1.png")
    Dim backImg As New Bitmap("Blank.jpg")

    '描画先とするImageオブジェクトを作成する
    Dim bmp As New Bitmap(Img.Width, Img.Height)
    'ImageオブジェクトのGraphicsオブジェクトを作成する
    g = Graphics.FromImage(bmp)

    'ワールド変換行列を単位行列にリセット
    g.ResetTransform()
    'ワールド変換行列を45度回転し、追加する
    g.RotateTransform(TextBox1.Text)
    '画像を描画
    g.DrawImage(Img, New Rectangle(0, 0, Img.Width, Img.Height))

    'リソースを解放する
    Img.Dispose()
    g.Dispose()

    bmp.MakeTransparent()

    '背景の画像と合成する
    '背景となる画像を読み込む
    '背景の画像に描画する
    g = Graphics.FromImage(backImg)
    g.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height)
    g.Dispose()
    bmp.Dispose()

    PictureBox3.Image = backImg
    End Sub
    End Class
    -------------------------------------------------------------------------------

244×199
イメージ
1508750860.png
/2KB
引用返信 削除キー/
■33722 / inTopicNo.2)  Re[1]: 画像の中心で回転させたい
□投稿者/ Azulean 大御所(486回)-(2017/10/23(Mon) 23:19:43)
  • アイコンNo33720に返信(たこさんの記事)
    > なのですが、どうしても画像の左上で回転してしまいます。

    それぞれの回転の中心が「座標の原点(0, 0)」という仕様だからです。
    原理的には以下を組み合わせることになります。

    1.画像の中心が座標の原点に重なるように平行移動する
    2.画像を回転する
    3.1と逆方向に平行移動する

    ところで、「VB.NET 回転 中心」で検索するとそれっぽいサイトが出てきますので、検索のキーワードを工夫してみるのも道でしょうか?
引用返信 削除キー/
■33723 / inTopicNo.3)  Re[2]: 画像の中心で回転させたい
□投稿者/ たこ 一般人(4回)-(2017/10/23(Mon) 23:32:01)
  • アイコンNo33722に返信(Azuleanさんの記事)
    > ■No33720に返信(たこさんの記事)
    ご回答ありがとうございます。
    ちょっとやってみてまたご報告致します。

    「VB.NET 回転 中心」は思いつきませんでした。

    「VB2015、画像、中心で回転」で検索していました。
    有益な情報ありがとうございます。
引用返信 削除キー/
■33724 / inTopicNo.4)  Re[3]: 画像の中心で回転させたい
□投稿者/ たこ 一般人(5回)-(2017/10/23(Mon) 23:54:50)
  • アイコンNo33723に返信(たこさんの記事)
    > ■No33722に返信(Azuleanさんの記事)
    >>■No33720に返信(たこさんの記事)

    解決致しました。ありがとうございました。

    ------------------------------------------------------------------------------- Private Sub rotateImage2()
    Dim g As Graphics
    Dim Img As Image = Image.FromFile("s1.png")
    Dim backImg As New Bitmap("Blank.jpg")

    '描画先とするImageオブジェクトを作成する
    Dim bmp As New Bitmap(Img.Width, Img.Height)
    'ImageオブジェクトのGraphicsオブジェクトを作成する
    g = Graphics.FromImage(bmp)

    'ワールド変換行列を単位行列にリセット
    g.ResetTransform()

    '▼ 1.画像の中心が座標の原点に重なるように平行移動する
    g.TranslateTransform(-Img.Width / 2.0F, -Img.Height / 2.0F)

    '▼ 2.画像を回転する
    g.RotateTransform(TextBox1.Text, System.Drawing.Drawing2D.MatrixOrder.Append)

    '▼ 3.1と逆方向に平行移動する
    g.TranslateTransform(Img.Width / 2.0F, Img.Height / 2.0F, System.Drawing.Drawing2D.MatrixOrder.Append)

    '画像を描画
    g.DrawImage(Img, New Rectangle(0, 0, Img.Width, Img.Height))

    'リソースを解放する
    Img.Dispose()
    g.Dispose()

    bmp.MakeTransparent()

    '背景の画像と合成する
    '背景となる画像を読み込む
    '背景の画像に描画する
    g = Graphics.FromImage(backImg)
    g.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height)
    g.Dispose()
    bmp.Dispose()

    PictureBox3.Image = backImg
    End Sub
    -------------------------------------------------------------------------------
    ワールド変換により画像を平行移動、拡大、縮小、回転して表示する
    https://dobon.net/vb/dotnet/graphics/transform.html#section1

    の下の方のMatrixOrderの理解が良く出来ていなかったのが敗因でした…

    「VB.NET 回転 中心」で検索し、NonSoftさんのページも参考にしましたので、
    併せてご報告致します。
    -------------------------------------------------------------------------------

    Bitmapを中心点と角度を指定して回転するサンプル(VB.NET) 620825
    http://nonsoft.la.coocan.jp/SoftSample/VB.NET/SampleRotateBitmap.html
    -------------------------------------------------------------------------------

    ありがとうございました。
解決み!
引用返信 削除キー/



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

このトピックに書きこむ

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

Mode/  Pass/


- Child Tree -