DOBON.NETプログラミング道掲示板

■34513 / 1階層)  DrawBezierの使い方について
□投稿者/ 魔界の仮面弁士 大御所(1289回)-(2020/08/01(Sat) 04:08:58)
  • アイコン
    No34510に返信(つばささんの記事)
    > と、記述した時の描画が、添付画像になります。
    
    座標指定と画像の内容が一致していないように見えます。
    もしかして、左上原点の左手系座標ではなく、右手系座標に変換しているのでしょうか。
    
    g.TranslateTransform(0, PictureBox1.Height - 1)
    g.ScaleTransform(1, -1)
    
    
    
    > 始点終点、制御点が2点の時は問題ないのですが
    > 制御点が1点の時の3点ベジェ曲線の時にこうなります。
    
    赤い方は、Graphics.DrawBezier メソッドで描かれた 3 次ベジエ曲線で
    黒い方は、始点・オフカーブ点・終点からなる 2 次のベジエ曲線に見えます。
    
    
    
    > Dim Bezier_2 As New Point(96, 784)
    > Dim Bezier_3 As New Point(96, 784)
    
    同じ座標を指定したところで、2 次にはならないですね。
    
    
    ベジエの軌跡を確認するためのサンプルを作ってみました。
    
    
    Imports System.Drawing.Drawing2D
    
    Public Class Form1
    
        Private Async Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
            Button1.Enabled = False
            Drawing = True
            Using bc = BufferedGraphicsManager.Current
                Dim bg = bc.Allocate(PictureBox1.CreateGraphics(), PictureBox1.ClientRectangle)
                bg.Graphics.SmoothingMode = SmoothingMode.HighQuality
                bg.Graphics.InterpolationMode = InterpolationMode.HighQualityBicubic
    
                Dim points() = {New PointF(12.0F, 155.0F), New PointF(42.0F, 28.0F), New PointF(190.0F, 81.0F)}
    
                Dim bezierPoints2(100) As PointF
                Dim bezierPoints3(100) As PointF
                For t = 0 To 100
                    bg.Graphics.Clear(Color.White)
    
                    '指定のノットを灰色線で描く
                    bg.Graphics.DrawLines(Pens.Silver, points)
                    For Each p In points
                        bg.Graphics.DrawEllipse(Pens.Silver, GetSquare(p, 6.0F))
                    Next
    
                    '★ Graphics.DrawBezier は、赤い破線で描いておく
                    Using bezierPen As New Pen(Color.Red, 2.0F) With {.DashStyle = DashStyle.Dash}
                        '制御点が一つ足りないので、points(1) を 2 回指定している
                        bg.Graphics.DrawBezier(bezierPen, points(0), points(1), points(1), points(2))
                    End Using
    
    
                    '移動点のパーセンテージを表示する
                    bg.Graphics.DrawString($"t = {t / 100:0.00}", Font, Brushes.Black, PointF.Empty)
    
    
                    '★ 2次の軌跡を水色で描く
                    Dim m2_0 = GetMovePoint(points(0), points(1), t)
                    Dim m2_1 = GetMovePoint(points(1), points(2), t)
                    bg.Graphics.FillEllipse(Brushes.DarkSlateGray, GetSquare(m2_0, 6.0F))
                    bg.Graphics.FillEllipse(Brushes.DarkSlateGray, GetSquare(m2_1, 6.0F))
    
                    bezierPoints2(t) = GetMovePoint(m2_0, m2_1, t)
                    Using bezierBrush As New SolidBrush(Color.FromArgb(100, Color.Cyan))
                        For Each b In bezierPoints2.Take(t + 1)
                            bg.Graphics.FillEllipse(bezierBrush, GetSquare(b, 6.0F))
                        Next
                        bg.Graphics.DrawLine(Pens.Blue, m2_0, m2_1)
                        bg.Graphics.DrawEllipse(Pens.Blue, GetSquare(bezierPoints2(t), 6.0F))
                    End Using
    
    
                    '★ 3次の軌跡を黄色で描く
                    Dim p2_0 = GetMovePoint(points(0), points(1), t)
                    Dim p2_1 = GetMovePoint(points(1), points(1), t)    '同じ座標なので計算するまでもないけれど一応
                    Dim p2_2 = GetMovePoint(points(1), points(2), t)
    
                    Dim m3_0 = GetMovePoint(p2_0, p2_1, t)
                    Dim m3_1 = GetMovePoint(p2_1, p2_2, t)
                    bg.Graphics.FillEllipse(Brushes.Green, GetSquare(m3_0, 6.0F))
                    bg.Graphics.FillEllipse(Brushes.Green, GetSquare(m3_1, 6.0F))
                    bg.Graphics.DrawLine(Pens.Green, m3_0, m3_1)
    
                    bezierPoints3(t) = GetMovePoint(m3_0, m3_1, t)
                    Using bezierBrush As New SolidBrush(Color.FromArgb(100, Color.Yellow))
                        For Each b In bezierPoints3.Take(t + 1)
                            bg.Graphics.FillEllipse(bezierBrush, GetSquare(b, 6.0F))
                        Next
                    End Using
                    bg.Graphics.DrawEllipse(Pens.Green, GetSquare(bezierPoints3(t), 6.0F))
    
                    If ClosingRequired Then
                        Drawing = False
                        Close()
                        Return
                    End If
    
                    bg.Render()
                    Await Task.Delay(60)
                Next
    
            End Using
            Button1.Enabled = True
            Drawing = False
        End Sub
    
        Private Function GetMovePoint(p0 As PointF, p1 As PointF, percent As Byte) As PointF
            Return New PointF((p1.X - p0.X) * percent / 100.0F + p0.X, (p1.Y - p0.Y) * percent / 100.0F + p0.Y)
        End Function
    
        Private Function GetSquare(center As PointF, length As Single) As RectangleF
            Dim topLeft = center - New SizeF(length / 2.0F, length / 2.0F)
            Return New RectangleF(topLeft, New SizeF(length, length))
        End Function
    
        Private Drawing As Boolean = False
        Private ClosingRequired As Boolean = False
        Private Sub Form1_FormClosing(sender As Object, e As FormClosingEventArgs) Handles MyBase.FormClosing
            If Drawing Then
                ClosingRequired = True
                e.Cancel = True
            End If
        End Sub
    End Class

225×229
イメージ
DrawBezier.gif
/18KB
違反を報告
削除キー/

前の記事(元になった記事) 次の記事(この記事の返信)
←DrawBezierの使い方について /つばさ 2020-07-31.jpg/17KB →Re[2]: DrawBezierの使い方について /つばさ
 
上記関連ツリー

Nomalアイコン DrawBezierの使い方について / つばさ (20/07/31(Fri) 17:38) #34510 2020-07-31.jpg/17KB
Nomalアイコン DrawBezierの使い方について / 魔界の仮面弁士 (20/08/01(Sat) 04:08) #34513 DrawBezier.gif/18KB ←Now
  └Nomalアイコン Re[2]: DrawBezierの使い方について / つばさ (20/08/01(Sat) 09:42) #34514 解決み!
    └Nomalアイコン Re[3]: DrawBezierの使い方について / 魔界の仮面弁士 (20/08/02(Sun) 16:55) #34515
      └Nomalアイコン Re[4]: DrawBezierの使い方について / つばさ (20/08/03(Mon) 08:14) #34516 2020-07-30.png/7KB
        └Nomalアイコン Re[5]: DrawBezierの使い方について / 魔界の仮面弁士 (20/08/03(Mon) 15:00) #34518
          └Nomalアイコン Re[6]: DrawBezierの使い方について / つばさ (20/08/04(Tue) 07:49) #34519 解決み!
            └Nomalアイコン Re[7]: DrawBezierの使い方について / つばさ (20/08/04(Tue) 08:10) #34520 解決み! 2020-08-04.jpg/16KB

All 上記ツリーを一括表示 / 上記ツリーをトピック表示
 
上記の記事へ返信

Mode/  Pass/


- Child Tree -