CODEWITHSUNDEEP
htmlcanvasdrag
Shieffan
Shieffan

Reputation: 11

How can I select and drag a line in canvas?

I'm now working on a painting app. It uses a html canvas. Users can draw shapes on the canvas.

Now a problem comes to me. I want to select the line that I drew on the canvas. When it is selected, I can drag it or delete it. How can I implement it ? Any good ideas?

Upvotes: 1

Views: 2943

Answers (2)

rpabon
rpabon

Reputation: 1201

There is a library called kinetic.js, with it you can keep track of the shapes you draw on the canvas with the select feature.

Here is the link: https://github.com/ericdrowell/KineticJS

Upvotes: 0

jing3142
jing3142

Reputation: 1871

It might be worth your while to have a look at https://github.com/canvimation/canvimation.github.com this contains the source code for a drawing application using canvas.

You should note that this application is being re-coded but there is not yet a working version using the new code on line. The new source code is in the stage1 branch. Hopefully this new code is easier to understand than the old code and the code referred to below comes from the stage1 branch.

Basically a shape object is created for each shape drawn which includes all data about eh shape, including path data and data giving the rectangular boundary around the shape. When the "boundarydrop" div is clicked then function checkBoundary is called and data about the shift key and cursor position are passed. Then for each shape the first check is to see if the cursor is within the boundary of the shape and if so then a more refined check is carried out. For a closed shape the check is if the cursor in inside the shape and for an open shape if the cursor is close to the path.

There are further complications depending whether the shift key is held down or not and which group the shape belongs to. However the basics are there.

Functions to check out

in index.html

shiftdown
getPosition

in scripts/drawboundary.js

checkBoundary

isIn

isOn

in scripts/shape.js

shape

A working online version of the application is at http://canvimation.github.com/ but this uses the older code in the master branch and there are some bugs but it will give you some idea of what the application does.

Hope this is of some help

Upvotes: 1

Related Questions