draw arrow and keep it editable.
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
draw arrow and keep it editable.
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.
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?
-
- VIP Livecode Opensource Backer
- Posts: 977
- Joined: Sat Apr 08, 2006 7:47 am
- Location: Aalst, Belgium
- Contact:
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.
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.
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
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
www.quartam.com
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.
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"