Announcement

Collapse
No announcement yet.

use mouse draw line in the 2D,how to do?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

    use mouse draw line in the 2D,how to do?

    How can i draw 2d line on umg widget?

    http://v.youku.com/v_show/id_XMjYxMDMyMjkyNA==.html
    Last edited by yskwork; 03-06-2017, 11:54 PM.

    #2
    Once you have 2d coordinates of the points the lines are supposed to connect, you can override onPaint in the widget.

    Comment


      #3
      in teh HUD,how to set
      Click image for larger version

Name:	2D.PNG
Views:	1
Size:	418.4 KB
ID:	1124439

      Comment


        #4
        Here's my take on it, see if it helps:

        I created an array to store the coordinates of where in the widget the mouse clicks: Points

        I've overridden OnMouseButtonDown and add a 2d coordinate to the aforementioned Points array whenever the user clicks with the LeftMouseButton only.

        Click image for larger version

Name:	onMouseDown.PNG
Views:	1
Size:	113.7 KB
ID:	1124444

        And here's the OnPaint:

        DrawLines handles all the lines for the generated points and an additional DrawLine draws a line from the last element of the Points array to the mouse position on the screen.

        Click image for larger version

Name:	onPaint.PNG
Views:	1
Size:	170.7 KB
ID:	1124445

        If you want to detect clicks on the entire canvas, set its Visibility to Visible. Here I've placed a border which is the only Visible element so the clicks outside do not register.

        Click image for larger version

Name:	1e84ff35d2cb91575d1b9b052b87e7c2.gif
Views:	1
Size:	876.0 KB
ID:	1124448

        This is by no means perfect by should get you started, good luck!
        Attached Files

        Comment


          #5
          Very Thank! OnMouseButtonUp,stop draw line,save Already draw line,how to do!

          Comment


            #6
            The easiest way would be to store the Points arrays in another Array.

            You probably do not want to use OnMouseButtonUp here - it will interrupt your drawing every time you click. Perhaps you could add a check for the RightMouseButton in the OnMouseButtonDown. Every time the user pressed RMB, add Points array to another array - the OnPaint can draw the whole thing in a loop.

            Comment


              #7
              Like this´╝îhow to do!
              http://v.youku.com/v_show/id_XMjYxMTkyOTk2MA==.html

              Comment


                #8
                It might be only me but the service you use for hosting those video asks me to install additional software and it's not in English so I can either not watch it or risk installing something dodgy. It works on my phone, though. If you make these examples easier to access, chances are you'll attract more attention.

                The solution with the nested array I posted above should work fine for drawing multiple lines. I saw you post multiple questions, I'll just answer some of them here:
                • To loop through an array of lines containing points:

                  Click image for larger version

Name:	looplines.PNG
Views:	1
Size:	31.4 KB
ID:	1124472



                • To display text, you'll need to create widgets, something very simple will do:

                  Click image for larger version

Name:	widget.PNG
Views:	1
Size:	15.5 KB
ID:	1124473

                  Set the text_label's isVariable to True (upper-right corner of the details panel) so you can access it later and set its text (distance)
                  text_label is centred horizontally and vertically, the rest is on default



                • To add distance labels, create a widget every time the user clicks:

                  Click image for larger version

Name:	addwidgets.png
Views:	1
Size:	233.2 KB
ID:	1124474

                  The widgets that have already been placed are stored in the DistWidgets array
                  The widget that is still being dragged around has its own variable DistWidget, and is added to the DistWidgets array as soon as the point has been placed; a new widget is created for the next line fragment



                • To find coordinates, you'll need a bit of math:

                  Position between two Points is (A+B)/2
                  Distance is length of (A-B)
                  Those two values are sent to the Widget

                  Click image for larger version

Name:	setwidget.png
Views:	1
Size:	383.7 KB
ID:	1124475



                • To make a straight line, constrain either X or Y of the mouse input



                  Click image for larger version

Name:	313578ddad5571564720631d69dc7609.gif
Views:	1
Size:	935.7 KB
ID:	1124477

                Comment


                  #9
                  line Separate,how to do!
                  Click image for larger version

Name:	2212.PNG
Views:	1
Size:	101.6 KB
ID:	1124478

                  Comment


                    #10
                    any idea for line separate?or size for draw line?

                    Comment


                      #11
                      I think that HUD's class allows for tinkering with line's size.

                      How to paint separate line - can't remember this setup well but I'd create an array of points arrays. Add new elements once you've finished with your line.

                      As in, contain a set of points which makes a line within an outer array that contains the lines. Rinse & repeat.

                      Comment

                      Working...
                      X