I am creating a drawing application and it's going pretty well - besides the fact there's a little glitch allowing you to draw over the toolbar. It only happens when the size of the lines are thick, and the thing I want is to make all the lines drawn over the toolbar go under the toolbar (the toolbar is just a regular rectangle shape). For example Is there a piece of code to make it appear over everything? And I won't use drawRect because that would hide all the movieclips on top of it.
I want is to make all the lines drawn over the toolbar go under the toolbar
It's question about managing display list. First of all read about Display list
Place display object with your toolbar over display object where user draws.
addChild(myCanvasToDraw);
addChild(myToolbar);
Related
How do we link two canvases (one showing 2d drawing and other 3d) on a webpage using JavaScript and P5.js so that if one shape is modified then it also affects the other canvas shapes?
Yeah, thank you. How they can be linked/interactive? If we change drawing in first screen, other screen also show that change.
It sounds like you're looking for instance mode.
You can read more about instance mode here, but basically it allows you to have multiple sketches running on the same page.
Get something very simple working, such as showing a circle on one canvas and a rectangle on another canvas. Then build up from there.
I would like to have the JGraphX editor to be able to select a shape only if the user click on a visible part of the shape instead of the full bounding box of a shape. For instance, if you insert a Triangle in a graph, I want to be able to select it only by clicking inside the triangle.
This would also be usefull after a rotation because the "bounding box" can be totally different than the visible shape once rotated.
Both things are working really well in draw.io, so I just would like to know where to look at in the Javascript to be able to do it in the Java Swing version.
Thank you.
I have an html5 page where I need to develop a small test. There's 2 columns with several buttons and whenever you click on one and drag the mouse, a line follows the mouse movement until it's released, snapping to the next button or getting erased.
I'm using divs for the buttons, since this is to be later delivered to a design crew and they need to be able to change images, texts and placements with css.
My problem is with canvas. I can't place it over the divs, so they don't cover the lines. I've tried svg too, but it has the same problem.
A coworker found the answer. Apparently I needed to use position AND z-index on the css for the canvas to be placed on the layer properly. Go figure
I created a circle using canvas and divided it into lines. I want the coordinate of a particular area: if I click a particular area, that alone should be clickable.
Take an example of a word wheel game where a circle is divided into many areas with different coordinates and some letters placed inside the divided areas. If I want to click the particular area with the letter 'A', the 'A' should be clicked and should be displayed in a text box.
How do I accomplish this?
The elements that form a canvas are not remembered and, thus, are not interactive - as soon as you commit them to the canvas, they are subsumed into the collective. They're not individual elements like DOM elements.
The workaround is to remember the positions of things yourself, listen for clicks to the canvas element, then work out via your own logic what the click landed on.
This is non-trivial. Libraries like Kinetic make it easy. Working with an API such as this will save you a lot of time - like using jQuery for the DOM over vanilla JS.
I decided last week that I wanted to play around with the Canvas. I am making a simple webapp (at my daughter's request), where there are ponies, and you can add them to your own picture and move them around.
I already have it so when a button is pressed, a picture of a pony comes up on the canvas.
My question now is, what is the best way to move multiple images when they are already on the canvas?
It would be great if I could drag them each, but I can only find tutorials using KineticJS, and I cannot get that to display how I want.
So, are there any other dragging images on Canvas tutorials out there?
Otherwise It would be okay to use keyboard buttons, but I cannot figure out how to do that with multiple images. When I use keyboard buttons, it moves all images at once.
Any ideas?
You have to keep track of where you draw each one, clear the entire canvas, and redraw each and every one of them (presumably moving some of them in the process).
None of this is built in to Canvas. I have a tutorial on making the Canvas interactive that covers keeping track of, placing, and moving (selecting) shapes on a Canvas. There's a live demo on that page and source code at the bottom of the article.