使用动力学js画布保持比例调整图像大小 [英] Resizing the images while keeping proportion using kinetic js canvas

问题描述

我在我的应用中使用此功能：

I'm using this in my app:

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

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

have use anchors for resizing the image ..

我想要的是调整图像大小并保持其比例。
我不希望它延伸
我能够使用这段代码来实现这一目标。：..

What I want is to resize the image and keep its ratio maintained. I don't want it to stretch I'm able to achieve that using this peace of code.:..

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

但这会搞砸锚..
任何人都试过像这样的东西..

But this is screwing up the anchors .. Anyone ever tried something like this..

推荐答案

我知道这是一个非常古老的帖子，但我需要实现这个确切的事情，并找到了接受答案是非常有缺陷的 - 例如，左边两个拖动手柄移动整个图像并且与图像编辑程序不同。我正在发布我的解决方案，万一有人会像我一样从谷歌搜索中发现这个问题。

I know this is a horribly old post but I needed to implement this exact thing and found the accepted answer is quite flawed - the left two drag handles move the entire image and act very much unlike an image editing program would, for instance. I am posting my solution in case someone stumbles upon this from a Google search like I did.

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

Modified KineticJS example in JSBin: http://jsbin.com/iyimuy/1/edit

这篇关于使用动力学js画布保持比例调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！