Question

这与编程相关，但有些非编程问题。我正在基于Web的应用程序中执行图像缩放，我需要相对于固定位置保持我的图像，即使它按其顶部左上角锚定。希望图形使这成为可能。 alt text

这个想法是C是一个固定的位置，我想维持作为我的缩放起源，而不是B，这是当前的css行为。 C可能在也可能不在实际图像中。因此，作为图像比例，B需要相对于C移动。例如：如果图像缩放50％，那么B将移动1/2到C的距离。如果图像增长到其大小的200％，那么B将距离C移动两倍的距离。

最终寻找x＆amp;的公式对于B，给出C的位置和图像的缩放因子。不确定图像的大小是否需要成为其中的一部分，但如果需要我可以使用它。

感谢您的帮助！

我知道的事情：

我知道的宽度和高度图像矩形。
我知道B与A的偏移。
我知道C与A的偏移。
我知道图像百分比的比例因子。

Answer 1

实际上，您希望将C视为原点，然后只需按比例缩放“B”。通过将其视为从C到B的向量，并按相关数量进行缩放，您可以相当轻松地完成此操作。

newBx = Cx - (Cx - Bx) * scale;
newBy = Cy - (Cy - By) * scale;

例如，如果比例为0.5（50％），则变为：

newBx = 100 - (100 - 50) * 0.5 
      = 100 - 25
      = 75                 // 1/2 the distance to C
newBy = 100 - (100 - 25) * 0.5
      = 100 - 37.5
      = 62.5               // 1/2 the distance to C

比例为2（200％）：

newBx = 100 - (100 - 50) * 2 
      = 100 - 100
      = 0                  // 2x the distance to C
newBy = 100 - (100 - 25) * 2
      = 100 - 150
      = -50                // 2x the distance to C

Answer 2

首先，您需要计算从B到C的距离，然后您只需将其更改为比例，这就是新B相对于C的位置：

newB = C - (C - B) * scale

如你想要的坐标，它与x和y的功能相同：

newBx = Cx - (Cx - Bx) * scale
newBy = Cy - (Cy - By) * scale

（使用的比例值不是百分比，而是尺寸乘数。尺寸增加50％会得到1.5的比例。）

Answer 3

因此，在将图像缩放C之后，您希望当前位于(C_x, C_y)的图像中的点s保持在同一位置吗？

C的新职位，比如C_new = (s*C_x,s*C_y)。

您想要移动图片以便C_new = C。

这意味着您必须将B = (B_x,B_y)改为(s*C_x-C_x,s*C_y-C_y)，或者将图片的新来源改为B_new：

B_new = (B_x + s*C_x-C_x,  B_y + s*C_y-C_y)

现在，您可以在B_new显示缩放图片，并且C应保持固定。

Answer 4

如果我理解这个问题：

X(b) = X(c) - Width*(1/3)    
Y(b) = Y(c) - Height*(3/4)

这个公式看起来很简单，但你的样本图像在超过Y = 0（我认为是你的北极限）之前不能大于133x200（比例= 133％）。

如果你想阻止它移动超过Y = 0或X = 0，并且一旦达到任一限制就进一步推向南方和东方，一种方法可能是：

IIF(Height > 133, Y(b) = 0, Y(b) = Y(c) - Height*(3/4))
IIF(Width > 450, X(b) = 0, X(b) = X(c) - Width*(1/3))

我认为比例应该转换为高度和宽度，而不是在这些公式中使用比例作为变量，因为您的原始图像可以是任何大小（假设它们并非总是每个样本100x150）

戴夫

Answer 5

这是一个经过测试的C＃代码段：

void Main()
{
    Application.Run(new form1());
}

public class form1 : Form
{
    static Point C = new Point(100,100);
    static Point origLocB = new Point(50,25);
    static Size origSizeB = new Size(150,100);

    Panel Rec = new Panel() 
    {
        Left = origLocB.X, 
        Top = origLocB.Y, 
        Width = origSizeB.Width, 
        Height = origSizeB.Height,
        BorderStyle = BorderStyle.FixedSingle,
    };

    NumericUpDown nud = new NumericUpDown()
    {
        Value = 1M,
        Increment = .01M,
        DecimalPlaces = 2,
        Dock = DockStyle.Bottom,
    };

    public form1()
    {
        nud.ValueChanged += NumericUpDown_ValueChanged;
        Controls.Add(nud);
        Controls.Add(Rec);
    }

    public void NumericUpDown_ValueChanged(object sender, EventArgs e)
    {
        Rec.Location = new Point(((int)((origLocB.X - C.X) * nud.Value + C.X)),
                                ((int)((origLocB.Y - C.Y) * nud.Value + C.Y)));
        Rec.Size = new Size((int)(origSizeB.Width*nud.Value),
                            (int)(origSizeB.Height*nud.Value));
    }
}

它真的只是回应@Reed的答案

图像缩放几何

5 个答案: