Kinect JS裁剪矩形

Question

我已经在使用名为j jQuery的{​​{1}}插件，但最近我发现了Crop，它确实为我解决了许多问题。然后我偶然发现了这个例子：

http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

我决定根据KinectJs及以上示例编写自己的裁剪矩形。

KinectJs

它几乎完美无缺。问题是，当您使用圆形锚点进行调整大小并在尝试拖动整个矩形后尝试拖动整个矩形几次尝试（只是给它一些镜头）时，它允许您将其拖出边界！

从我的调试来看，这似乎是图书馆的一个问题但是如果某人。在我的代码中看到问题或看到优化它的方法，请分享您的想法。

我的努力结果可以在这里看到：

http://jsfiddle.net/wanderer/WLpXF/

Answer 1

A）再现错误：

1. 向上拖动顶部锚 （比如它被拖动N像素）
2. 向上拖动整个裁剪器 ;它可以将图像边界留下N个像素

其他锚点和方向的类似行为。

B）解决方案：

将此功能添加到脚本中：

function readjust() {
    var group = this.getParent();

    var topLeft = group.get('.topLeft')[0];
    var topRight = group.get('.topRight')[0];
    var bottomRight = group.get('.bottomRight')[0];
    var bottomLeft = group.get('.bottomLeft')[0];
    var cropper = group.get('.cropper')[0];

    var tlx = cropper.getX(),
        tly = cropper.getY(),
        w = cropper.getWidth(),
        h = cropper.getHeight();

    group.setX(group.getX() + tlx);
    group.setY(group.getY() + tly);

    topLeft.setPosition(0,0);
    topRight.setPosition(w,0);
    bottomLeft.setPosition(0,h);
    bottomRight.setPosition(w,h);
    cropper.setPosition(0,0);
}

addAnchor()中的以下处理程序：

anchor.on('dragend', readjust);

小提琴：http://jsfiddle.net/BMy7b/1/

或者，readjust()中的代码可以包含在update()中，如MarmiK所建议的那样。这将对每个拖动运行更多操作，因此可能更慢（但我不确定;意见？）。小提琴：http://jsfiddle.net/vUPeQ/1/

问题在于裁剪器和锚点相对移动到cropperGroup，但cropperGroup拖动边界函数没有考虑到它。

玩得开心！

Answer 2

一个快速更新：我喜欢这样的东西（看起来漂亮的裁剪矩形），但是当我用最新的KineticJS 5.0.1尝试这个代码时，它会做一些令人讨厌的事情。你可以在这里看到：[http://jsfiddle.net/vUPeQ/2/]：http：//jsfiddle.net/vUPeQ/2/

我的猜测是因为有些api会改变，但我找不到哪一个......

有人可以帮忙吗？

非常感谢!!!