I have been trying my hand at making a simple word processor that just has the features I commonly use. Then I thought, well, what if I added the capability of adding graphics? And then I thought, well, why couldn’t those be vector graphics?
I assume that would be possible in Xojo. I think I’ve seen a couple drawing programs that are made with Xojo. But, where would I even start with such a thing? Unless I’m missing something, the documentation only seems to cover drawing from the coding side, that is, drawing elements that will appear in the application and not implementing end-user drawing capabilities. On top of that, allowing end-users to create and edit vector graphics.
Where would I begin to learn how to do that? I’ve not had any luck in searching for that kind of information.
Thanks!
I am currently using Xojo 2018 R3 if that makes a difference.
Theres a lot you can do using the built in drawing classes if you are making desktop apps. I have some fairly awesome apps that do. If you’re anticipating making web apps then theres a significant effort around SVG drawing that you’ll want to start looking at. Search “SVG draw” in this forum and you’ll find a trove of goodness.
Thanks. It would be for a desktop app. Mac first. Possibly Linux and Windows later. It’s mainly for my own use but, if by some miracle it turns out to be a decent program, that could change.
I suppose what I’m having difficulty wrapping my head around is reading the user action into the program.
If I am understanding correctly, to allow users to draw, I would need to create tools. Let’s start simple: a circle. So, I would have a circle tool. They would click on that to choose to use said tool.
Once they’ve selected their tool, then the program would need to watch for a mouse click event on the canvas. As the user clicks and drags, I need to be able to read that action and draw a circle that varies based on the user’s mouse movement. Then, when they release the mouse button, that determines the final circle size.
So far, so good, I think. Then there’s the matter of creating some kind of handles on the circle so they can change the size. Maybe add points to distort the circle. And move the circle. And that’s one of the spots where I wish the Xojo documentation/tutorials had some examples.
That is probably too much to hope for. But I would imagine there are open source projects out there implementing drawing and graphics programs whose source you could study. Of course a lot of that would be in C or C++ and would assume certain libraries. But even if you don’t know much about C-family languages, you could figure out the libs they use to do the drawing and then study the docs for those and the examples to get a sense of how these kinds of things are done. Potentially you could even call those libs from Xojo, although I’m fuzzy on what Xojo is capable of calling into exactly on each OS. And you’d have to consider if those libs would be usable across potentially Windows and Linux in case you ever go there. Regardless – that’s how I’d approach educating myself.
I think thats a good approach. You could create some multi-state tools where they foster the way you want to draw circles; a 2 state circle where the first click defines the center point and then the second defines the radius or diameter, a 3 state where three clicks define 3 points on the circle. Or maybe even two or more line segments that define tangencies and an entry box for the diameter. I guess it depends if you want CAD like behavior or Illustartor type drawing of graphics.
I also found a video on YouTube that was helpful in terms of showing how to track mouse activity.
The goal here would be more along the lines of Illustrator behavior than CAD behavior.
I’m more familiar with working with databases, so drawing is a whole different animal. For example, I have a mental grasp now on how to have the user draw a circle. But once the circle is done, from the coding end, how do I “find” it? How can the user move it? How can the user grab the edge to enlarge or distort it? And so on. Vector drawing has been around since the 80s. You’d just think there’d be more programming tutorials covering it by now.
I’ll look through the resources that have bene suggested and see what I can figure out.
After the user draws an object, you need to save it to some internal data structure. And ultimately to a database or file structure, to it can be reloaded later.
As part of the data you’re saving, save the bounding box coordinates so you can easily take a mouse click and quickly determine which object it is in or at least near, and then do the more rigorous math to determine if it was a hit. But you don’t have to do heavy math on every single object.