Kinetic JS - problems trying to resize images

问题:

I have just started using Kinetic JS.

If you look at this link: Example

Some of the code is here:

function update(group, activeHandle) {
    var topLeft = group.get(".topLeft")[0],
        topRight = group.get(".topRight")[0],
        bottomRight = group.get(".bottomRight")[0],
        bottomLeft = group.get(".bottomLeft")[0],
        image = group.get(".image")[0],
        activeHandleName = activeHandle.getName(),
        newWidth,
        newHeight,
        imageX,
        imageY;

    // Update the positions of handles during drag.
    // This needs to happen so the dimension calculation can use the
    // handle positions to determine the new width/height.
    switch (activeHandleName) {
        case "topLeft":
            topRight.setY(activeHandle.getY());
            bottomLeft.setX(activeHandle.getX());
            break;
        case "topRight":
            topLeft.setY(activeHandle.getY());
            bottomRight.setX(activeHandle.getX());
            break;
        case "bottomRight":
            bottomLeft.setY(activeHandle.getY());
            topRight.setX(activeHandle.getX());
            break;
        case "bottomLeft":
            bottomRight.setY(activeHandle.getY());
            topLeft.setX(activeHandle.getX());
            break;
    }

The rest of the code is in the jsdFiddle link. I have probably missed something blatently obvious!

You will see 2 images surrounded by anchors. The images must NOT cross the black rectangle (ie boundary) when they are resized or dragged. Dragging works - as long as the image has not been previously resized.

Resized images still cross the boundary. Resized images then dragged and dropped tend to sometimes create their own invisible boundary (if the person resizing the image does NOT use the bottom right anchor to resize).

Can anybody see what I have done wrong?

Many Thanks for any help!

回答1:

The issue you are having is that when you are resizing your images by pulling the anchor, you are setting the position of the image like this:

if(activeHandleName === "topRight" || activeHandleName === "bottomRight") {
    image.setPosition(topLeft.getX(), topLeft.getY());
} else if(activeHandleName === "topLeft" || activeHandleName === "bottomLeft") {
    image.setPosition(topRight.getX() - newWidth, topRight.getY());
}

The image position is being updated (relative to the group), but the group is the one that has a dragBoundFunc set. This explains your "invisible boundary" theory. The image is being repositioned AND resized within the group, but the group position stays static. When you drag the group, the boundaries don't match up with the new image size.

Is there a reason for you to be updating the position like this? I commented those lines above and it fixed the resize then drag issue: you can now resize images and the drag boundaries stay intact. At the very least, if you need to setPosition, then you should probably use group.setPosition instead, and force image.setPosition(0,0); so that you are only handling one position (the image sticks to the group position at 0,0 which is the top left corner).

Another issue I noticed you were having was that the images can't have a negative width or height value. You can fix this by doing:

image.setSize(Math.abs(newWidth), Math.abs(newHeight));

Additionally, since you can't have negative values for your images, you have to restrict your anchors from moving past each other negatively too. You can do this by doing some simple coordinate detection logic:

if(topRight.getX() < topLeft.getX()+10) {
    topRight.setX(topLeft.getX()+10);
}
if(bottomRight.getX() < topLeft.getX()+10) {
    bottomRight.setX(topLeft.getX()+10);
}
if(bottomRight.getY() < topLeft.getY()+10) {
    bottomRight.setY(topLeft.getY()+10);
}
if(bottomLeft.getY() < topLeft.getY()+10) {
    bottomLeft.setY(topLeft.getY()+10);
}

For your last problem: resizing the image shouldn't past the boundaries, I think you can simply add a similar dragBoundFunc to your anchors. Or, you can do something similar to how I handled the anchors coordinate logic just above this paragraph. I think the dragBoundFunc method will be cleaner.

Here's an updated fiddle, although I didn't implement the dragBoundFunc for your anchors, hopefully you can figure that out!

http://jsfiddle.net/projeqht/aBkYb/

回答2:

The “pos” in your dragBoundFunc is the top-left of the group, not the image.

Since you’re not resizing the group when you resize the image, that “pos” will always refer to the original size and relative position of the group--not the image.

That's throwing off your drawBoundFunc calculations.