Creating a line object for canvas draggable object

General
1

Hi,

I have a project where I can select different items that are images that then become draggable objects on the canvas. All is good with that. Now what I want to do is add the option to draw a line, maybe like line object in the IDE, then have the line become an image for a draggable object.

Ideally I would like to select the draw line option and then be able to draw it vertically or horizontally or diagonally at the length need. Then have it become a draggable object. It won’t need to be edited, that is be able to adjust the length once set.

I’m not sure on how to go about doing this.

Hope this makes sense.

Thanks.

2

Assuming you have a tool palette where the user would click a button to begin their line drawing:

  1. Store the coordinates of the location of MouseDown as the start (dragStart as Xojo.Point, for example) and set a flag to denote the current operation (self.isDragging = True)
  2. Store the coordinates of the location of the cursor and refresh in MouseDrag (dragCurrent as Xojo.Point, for example)
  3. Draw a line from the first set of coordinates to the second set of coordinates in the Paint event
if isDragging then
  g.DrawLine(dragStart.X, dragStart.Y, dragCurrent.X, dragCurrent.Y)
end if
  1. On MouseUp, create your new virtual Line object representing the sets of coordinates
if isDragging and currentTool = Tools.Line then
  myNewObject = new CanvasLineObject(dragStart, dragCurrent)
  allCanvasObjects.Add(myNewObject)
end if

This is all pseudocode to give you an idea of how to implement it. You won’t be able to just copy/paste.

3 Likes
3

yeah this gives me a starting point.

Thanks!

4

Ok so I have it drawing the line, creating the line picture and then adding to my canvas objects. Right now I have the picture width and height are set to the canvas width and height. Which is ok, but that make it rather large. How do I crop the picture to the line or create the picture so it fits with the line dimensions ?

Been meaning to get back t this but some things came up and got side tracked.

Thanks.

5

If you want to cache an image of the line for drawing later, you’d simply create a picture using the (X,Y) coordinate pairs. You’d then store the relative (X,Y) position of the line on the stage and draw the cached picture at those coordinates when needed.

6

Thanks for the reply. I’m not wanting to caching it for later, I’m wanting the borders of the image to be closer to the line drawn.

Here is what it looks like after I draw the line(red line) with the mouse and its turned into a pic and canvas object -

Screenshot_1
Screenshot_13200×1822 122 KB

The black lines are around the image, I’m use that to indicate when object is selected.

Now what I want it to do is in the next pic ,(note its been edited in a graphics app ) the green outline is what I want the actual image/object size to be, not the black lines.

Screenshot_2
Screenshot_23200×1822 207 KB

Hope this makes sense.

Thanks.

7

Your Paint code should look something like this:

g.DrawingColor = &cff0000
g.DrawLine( lineStartX, lineStartY, lineEndX, lineEndY )

g.DrawingColor = &c000000
g.DrawRectangle( lineStartX, lineStartY, lineEndX - lineStartX, lineEndY - lineStartY )

You have your origin and end (X,Y) coordinates, then it’s just subtraction to get Width/Height.

image

8

you would create a picture and then use the pic.Graphics.DrawPicture method to paint the part you will crop into this new picture,

https://documentation.xojo.com/api/graphics/picture.html#api-graphics-picture-creating-a-picture

9

Ok at long last I got it working! Just need to run a few more test to be sure, but seems to be working as I want it to.

Thanks for the hep! :sunglasses:

1 Like