CODEWITHSUNDEEP
kineticjs
kofifus
kofifus

Reputation: 19295

KineticJS - drawing shapes with Drag & Drop

I've seen solutions to drawing shapes with Drag & Drop (lines, rects etc) achieved with catching drag&drop events on the layer or stage but I want to know if it's possible to do this with DD events of the new shape itself.

Since I deal with many shapes it will make the code much more clear and OO if the shapes themselves handled their DD events in this case.

So when the stage/layer receive a dragstart, a new shape (ie line) will be created at that point and then all further drawing will be handled NOT by the stage/layer dragmove/dragend but by the NEW shape's dragmove/dragend.

I tried to do this with fire('dragstart'), but it just runs the code for the shape's dragstart event .. it does not actually put the shape into drag mode, that is, it will not fire any dragmove events on the shape when dragging (is this a bug?)

any help ? Thanks!

Upvotes: 0

Views: 410

Answers (1)

markE
markE

Reputation: 105025

Not possible... any shape's mouse events only respond when the mouse is over that shape.

Since the next segment of a line does not exist yet, you can't drag/move/click a mouse on the non-existent next segment.

Alternatively, you can easily and efficiently create a brand-new polyline like this:

  • Yes...listen for mouse events on the stage.
  • In mousedown, create a new Kinetic.Line with 1 point = the mousedown position.
  • In mousemove, add all mousemove positions to the lines points array (build a polyline on-the-fly)
  • In mouseup, the line is complete.

Upvotes: 1

Related Questions