Vector arrow with a 4 point curve.?

[dcr3]

Hi.

I want to draw a vector arrow with a 4 point curve,has anyone
done this. As my search on the forum has given me no results.

[freak]

Here is an example. The trick is to use PathPointAngle() to figure out the angle of the line at the end of the curve. Then just rotate the coordinates before constructing the arrow shape. This way the arrow shape can be constructed without the need for any complex math to get it pointing in the right direction.

Code: Select all

  If OpenWindow(0, 0, 0, 400, 200, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    CanvasGadget(0, 0, 0, 400, 200)

    If StartVectorDrawing(CanvasVectorOutput(0))
   
      ; construct path with a curve (actually works with any path. not just curves)
      MovePathCursor(150, 125)
      AddPathCurve(0, 270, 0, -150, 350, 150)
     
      ; get line angle at the end of the path
      angle.d = PathPointAngle(PathLength())
     
      ; stroke the path
      VectorSourceColor($FF0000FF)
      StrokePath(5)
     
      ; move to end of the previous path
      MovePathCursor(350, 150)                     
     
      SaveVectorState()     
        ; rotate coordinates by the line angle to align the arrow with the curve end
        RotateCoordinates(350, 150, angle)
       
        ; create a path for the arrow shape
        AddPathLine(0, -10, #PB_Path_Relative)
        AddPathLine(20, 10, #PB_Path_Relative)
        AddPathLine(-20, 10, #PB_Path_Relative)
        ClosePath()
      RestoreVectorState() ; undo the rotation
     
      ; fill the arrow
      VectorSourceColor($FF0000FF)
      FillPath()
     
      StopVectorDrawing()
    EndIf
   
    Repeat
      Event = WaitWindowEvent()
    Until Event = #PB_Event_CloseWindow
  EndIf

[Little John]

Very nice. Thank you, freak!

[dcr3]

Sorry for late reply.

Thank you freak . For quick response. Your code comments and your valuable tips.

I once again failed to explain myself.

On the latest updated Windows 10,Paint 3D.

On the 2D tab, if you click on it.

You have these options.
Line, 3-Point Curve,4-Point Curve,5-Point Curve.

Hence the question. Vector arrow with a 4-Point curve.?

I want to do same thing in PB if possible.

I want to move,shape,resize it on the Canvasgadget with the mouse.

[IdeasVacuum]

dcr3 - a picture paints a thousand words

[dcr3]

deasVacuum Wrote:

dcr3 - a picture paints a thousand words

I should hope so.


https://postimg.cc/vDzznMZr

[IdeasVacuum]

.... right, so effectively that's a bezier curve, which the Vector Lib delivers via AddPathCurve. Have you considered adding an arrow head by attaching a Vector Image?

https://www.purebasic.com/documentation ... curve.html
https://www.purebasic.com/documentation ... image.html

Edit: By the way, if you search the forum you should find code to change the shape of a bezier curve in real time. It will either be using the PB 2D drawing Lib or GDI+, but the principle could be applied to a Vector Lib curve.

[davido]

@freak,
A very nice example.
Thank you.

[netmaestro]

@dcr3 Thanks for clarifying what you're looking for. I've been using AddPathCurve like a moron, guessing at numbers and trying them, altering and trying again, lots of trial and error. I eventually get there but it's tedious, time consuming and a lot of work. I can just code what you're describing and then I've got a tool that'll whip up a curve in less than a minute. If you hadn't asked the question goodness only knows how long it'd have taken me to get the idea. Appreciate the tip.

[netmaestro]

Ok I made it: viewtopic.php?f=12&t=75326

[dcr3]

After my second post and a picture.

I am smiling with a good heart, on these two points.

@dcr3 Thanks for clarifying what you're looking for

I am not sure if I did a good job of it.

I've been using AddPathCurve like a moron, guessing at numbers and trying them, altering and trying again, lots of trial and error. I eventually get there but it's tedious, time consuming and a lot of work

It sound's, like you had a lot fun trying things out.

It happens to the best of us. Even Master's have their day.

Edit: By the way, if you search the forum you should find code to change the shape of a bezier curve in real time

IdeasVacuum got the gist of it.

What I was after. Was a real time drawing.
Just like the Microsoft, Paint3D that comes free with Windows 10.

On the link to the picture above. You would see, in yellow 4 key points.

1.Program that I used. Microsoft's Paint 3D.
2.Tab choice.
3.Options choice.
4.Real time drawing of a 4_Point Curve.

In blue, below it, a brief explanation. A 4_Point Curve, but with an arrow on it.

But after some searching in the forum, as suggested by IdeasVacuum. I came across some interesting code from MiLoo and Eddy.
I am sure there's plenty more of it, if I do a careful search.

MiLoo's code:viewtopic.php?f=12&t=72335

Eddy's code:viewtopic.php?f=12&t=65906

There's a lot of good code on the forum, it's just a matter of finding it, and put it to a good use. Just like a Lego Set, lot's of pieces but not everyone builds a nice castle with it.

But I will try and see if I can adapt it to my needs.

As to your link , Vector Curve Designer (RAD Tool), it will definitely, be very useful.

It's very thoughtful and nice of you. Thanks, for sharing it with us.It's coming on nicely.