Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding sizing handles to drawn object in canvas

I have a full screen canvas I am drawing to, and I've set it up to allow the user to drag and drop objects that are within the canvas.

I also want to enable them to select an object, and then 'resize handlers' show up (the little circles in the corners) to allow them to click/drag and resize them.

I can code this manually by drawing circles in each corner and detect a click, etc.... but was wondering if anyone has any better way to do this? Maybe there's a library out there that already handles this?

Any help is appreciated!

like image 563
Steve Avatar asked Apr 04 '11 05:04

Steve


People also ask

How can you tell if something is drawn on canvas?

1) set drawn=false, then set to true if ! 0 is encountered 2) detach the data from the image : var imgData = d.

Which built in html5 object is used to draw on the canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Which method can be used to draw lines rectangles circles and various shapes on a canvas?

You can create rectangle and square shapes using the rect() method. This method requires four parameters x, y position of the rectangle and its width and height. The basic syntax of the rect() method can be given with: context.


1 Answers

There isn't any simpler way than doing it yourself or getting a library to do it for you.

I wrote a tutorial here on the use of sizing handles. That should get you started if you plan to make your own.

like image 54
Simon Sarris Avatar answered Oct 12 '22 09:10

Simon Sarris