draw arrow and keep it editable.

Visuals, audio, animation. Blended, not stirred. If LiveCode is part of your rich media production toolbox, this is the forum for you.

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
keyless
Posts: 211
Joined: Wed Dec 12, 2007 11:21 pm

draw arrow and keep it editable.

Post by keyless » Wed Nov 05, 2008 6:49 pm

For a presentation screen, I want to make it so user can place an arrow pointing to any of the objects on the card. This is easy in the IDE with the line tool, but how do I make it so the user can do it in the application? and also keep it editable so the user could change where it is pointing later in the presentation.

keyless
Posts: 211
Joined: Wed Dec 12, 2007 11:21 pm

Post by keyless » Thu Nov 06, 2008 8:36 pm

Ok I think I am on the right path. I see that I need to choose the image tool to start the drawing proccess for the line. I can't tell from the info under "choose" in the documentation, how to properly set the style of the image to a line. Can I do this in the button before the user draws, or do I have to set it after the image is drawn? Is there a way to limit where on the card the arrow can be drawn?

Janschenkel
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 977
Joined: Sat Apr 08, 2006 7:47 am
Location: Aalst, Belgium
Contact:

Post by Janschenkel » Thu Nov 06, 2008 9:03 pm

If you want to make the line editable in the future, you should set the properties of the 'templateGraphic' so that it creates a line, and use the 'graphic' tool rather than the 'image' tool.

Code: Select all

on mouseUp
  reset the templateGraphic
  set the style of the templateGraphic to "line"
  set the endArrow of the templateGraphic to true
  choose graphic tool
end mouseUp
When you click the button, you'll be able to draw a line as vector graphic; switch to the 'pointer' tool to allow the user to edit it (hint: set the 'cantSelect' property of all non-user-editable controls to true to prevent the user from messing up the UI.

However, this approach will not give you any way to constrain where the user can draw lines or how they drag and extend it straight into the rest of your user interface.
For that, you're going to have to write your own triad of mouseDown/mouseMove/mouseUp handlers and track mouse movements yourself, resizing and moving controls from script.

Developing a full-blown drawing application in Revolution is quite daunting - writing the layout builder for Quartam Reports was quite daunting (it took an order of magnitude longer than the library) and there's still a lot of room for improvement.
But it can be done, and I know others have made editable user interfaces with lines before - so look at it as a challenge :-)

Jan Schenkel.
Quartam Reports & PDF Library for LiveCode
www.quartam.com

keyless
Posts: 211
Joined: Wed Dec 12, 2007 11:21 pm

Post by keyless » Fri Nov 07, 2008 12:36 am

Thanks Jan,


I modified your code to be On MouseEnter for the image I want them to be able to draw the arrow on. This and added A On MouseLeave that chooses browser tool, allows me to constrain where the user can start the line from. I'll have to figure out how to keep them from drawing the line outside the image and/or dragging the graphic outside the image with pointer tool.


Update: I found this code in searching the list. Hoping I can use a modification of this to get the constraint I need.
Here is another rather short script example that lets you drag around a
rectangle within the bounds of an image.

"local Bstop,Tstop,LStop,RStop,cY,cX,movedobject

on mouseDown
put (the mouseH - item 1 of the loc of me) into cX
put (the mouseV - item 2 of the loc of me) into cY
put (the left of image 2)+(the width of me/2)+cX +1 into Lstop
put (the right of image 2)-(the width of me/2)+cX -2 into Rstop
put (the bottom of image 2)-(the height of me/2)+cY -2 into Bstop
put (the top of image 2)+(the height of me/2)+cY into Tstop
put true into movedobject
end mouseDown

on mouseMove x,y
if the mouseloc is within the rect of image 2 then
if not movedobject then exit mouseMove
put min(Bstop,max(Tstop,y)) into yLoc
put min(Rstop,max(Lstop,x)) into xLoc
set loc of me to xLoc-cx,yLoc-cY
end if
end mouseMove

on mouseUp
put false into movedobject
end mouseUp

on mouseRelease
mouseUp
end mouseRelease"

Post Reply

Return to “Multimedia”