0

I am using Kineticjs. I am trying to have bound (dragBoundFunc) on the drag like the one below (http://jsfiddle.net/m1erickson/n5xMs):

        dragBoundFunc: function (pos) {
            var X = pos.x;
            var Y = pos.y;
            if (X < minX) {
                X = minX;
            }
            if (X > maxX) {
                X = maxX;
            }
            if (Y < minY) {
                Y = minY;
            }
            if (Y > maxY) {
                Y = maxY;
            }
            return ({
                x: X,
                y: Y
            });
        }
    });

and I am trying use this approach for a group which is drag-able and re-sizable like this http://jsbin.com/iyimuy/125/edit but I am not able to make it work.I would love to hear some comments.

Aameer
  • 1,366
  • 1
  • 11
  • 30
  • I have spent most of my day on this but can't seem to make it work.Please reply by improving/editting the jsBin file – Aameer Nov 26 '13 at 11:57

1 Answers1

0

You seem to be overthinking the problem.

For example, here’s how to enforce the right boundary (in pseudo-code).

You have moved darth beyond the right side of yoda if:

darthRight > yodaRight.

Calculate darthRight:

In dragBoundFunc, the pos variable gives you the current top-left x/y of darth. 

darthRight = posX + darthWidth

Calculate yodaRight: 

yodaRight = yodaX + yodaWidth

To correct for darths move outside yoda:

Pull darths left side back inside yoda until its a full darthWidth inside yodaRight.

posX = yodaRight - darthWidth

Done!

Now repeat for the other 3 boundaries...

markE
  • 102,905
  • 11
  • 164
  • 176
  • @makE I know the conditions which need to be enforced but I was not able to make it work correctly as you may have seen I have tried to solve the problem by similar approach (note yodaX=0), only difference is that I tried to increase bound by 10 as I wanted the anhors to be inside the yoda image all the time.Moreover, I am not sure how to implement the condition when both x and y are out of bounds.Could you please do the appropriate changes to the jsbin file.It would of great help to me. – Aameer Nov 27 '13 at 07:34
  • I also forgot to mention the i am not sure how to handle the bound problem which arises when we resize the darthvader image – Aameer Nov 27 '13 at 07:43
  • I was able to improve the code but there are still some problems which i am not able to figure out.. check out this updated code http://jsbin.com/iyimuy/132/edit – Aameer Nov 27 '13 at 07:48
  • http://jsbin.com/iyimuy/133/edit, I am still not able to mange the bound after the re-size.Please help – Aameer Nov 27 '13 at 09:53
  • Good work! I tried your jsbin and it looks like you have it working now. The one thing I would add is that when resizing you should prevent the user from drag-resizing beyond the border of yoda. – markE Nov 27 '13 at 16:55
  • if you resize the image, then the bounds are messed up.Could you please fix that error. – Aameer Nov 28 '13 at 08:23