Question

我很难准确地了解这个功能的作用以及为什么会这样做。该函数来自JCrop，它是一个非常标准的jQuery裁剪插件。此功能负责计算如何在您打算裁剪的图像旁边显示一个小预览图像。您可以对图像进行选择，预览显示..好吧..预览。

这是函数，来自JCrop的示例页面：

set "MyVar=echo ÉÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍ»%nl%º ...................."
%MyVar%

值得注意的是，JCrop实例有一个宽高比设置为1的选项，typedef std::vector<int> Ivec; template <int N> void test1(Ivec& v){ assert(v.size() >= N); for (int i=0;i<N;i++){v[i]++;} test1<N-1>(v); } template <> void test1<0>(Ivec& v){} void test2(Ivec& v,int N){ assert(v.size() >= N); for (int i=0;i<N;i++){v[i]++;} if (N == 1) {return;} test2(v,N-1); } div的宽度为100px，高度为100px。

如果您希望查看代码甚至可以试用，请输入以下链接。

http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail

我不了解很多数字.. rx * 500？为什么？ ry * 370？为什么？从头到尾贯穿这个逻辑将非常感激。

Answer 1

这些参数500和370是正在裁剪的图片的精确高度。演示中的那个宽度为500px，高度为370px。

在预览（右侧）上也显示了整个画面。当您更改选择时，它将更新图像的参数。您正在计算选择框的大小

 width: Math.round(rx * 500) + 'px',
        height: Math.round(ry * 370) + 'px',

为了设置预览的高度。还使用这两个来计算你从左侧和顶部的距离：

 marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'

它实际上是计算所选区域大小以及它与左侧和顶部之间的距离，因此它可以将正确的参数发送到预览区域。

AspectRatio实际上是显示宽度/高度之间的比例 - 因此，如果你裁剪100x100图片，它将是100/100 = 1，但是如果你裁剪250x100图片，它将是250/100 = 2.5。

JCrop showPreview功能说明

1 个答案: