javascript - 使用 kinetic js canvas 在保持比例的同时调整图像大小

Question

我在我的应用中使用这个:

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

使用 anchor 来调整图像大小..

我想要的是调整图像大小并保持其比例不变。我不想让它拉伸(stretch)我能够使用这种代码和平来实现这一目标。:..

  if(width) {
        image.setSize(width);
      }

但这是搞砸了 anchor ..任何人都试过这样的事情..

Answer 1

我知道这是一篇非常古老的帖子，但我需要实现这个确切的东西，并发现接受的答案非常有缺陷 - 左边的两个拖动 handle 移动整个图像，并且与图像编辑程序的行为非常不同，例如.我会发布我的解决方案，以防有人像我一样通过 Google 搜索偶然发现这个问题。

// 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;
}

// Calculate new dimensions. Height is simply the dy of the handles.
// Width is increased/decreased by a factor of how much the height changed.
newHeight = bottomLeft.getY() - topLeft.getY();
newWidth = image.getWidth() * newHeight / image.getHeight();

// Move the image to adjust for the new dimensions.
// The position calculation changes depending on where it is anchored.
// ie. When dragging on the right, it is anchored to the top left,
//     when dragging on the left, it is anchored to the top right.
if(activeHandleName === "topRight" || activeHandleName === "bottomRight") {
    image.setPosition(topLeft.getX(), topLeft.getY());
} else if(activeHandleName === "topLeft" || activeHandleName === "bottomLeft") {
    image.setPosition(topRight.getX() - newWidth, topRight.getY());
}

imageX = image.getX();
imageY = image.getY();

// Update handle positions to reflect new image dimensions
topLeft.setPosition(imageX, imageY);
topRight.setPosition(imageX + newWidth, imageY);
bottomRight.setPosition(imageX + newWidth, imageY + newHeight);
bottomLeft.setPosition(imageX, imageY + newHeight);

// Set the image's size to the newly calculated dimensions
if(newWidth && newHeight) {
     image.setSize(newWidth, newHeight);
}

JSBin 中修改后的 KineticJS 示例:http://jsbin.com/iyimuy/1/edit