Question

我有一些代码可以在Facebook画布中使用JCrop，并将其剥离到最低限度以调试问题。代码在JS Fiddle here中，但我也将它放在下面。你会看到拖动裁剪选择框在那个小提琴中是平滑的。但是，当我在Facebook画布中放置相同的精确代码时，拖动选择时图像会抖动很小的一点。这几乎就像有东西被某种东西自动调整了。仅供参考 - 我甚至没有在我的画布代码中加载Facebook JS SDK。画布中的代码完全，因为它在小提琴和下面：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css" media="screen">
        /* jquery.Jcrop.min.css v0.9.10 (build:20120429) */
        .jcrop-holder{direction:ltr;text-align:left;}
        .jcrop-vline,.jcrop-hline{background:#FFF url('https://raw.github.com/tapmodo/Jcrop/master/css/Jcrop.gif') top left repeat;font-size:0;position:absolute;}
         .jcrop-vline{height:100%;width:1px!important;}
        .jcrop-hline{height:1px!important;width:100%;}
        .jcrop-vline.right{right:0;}
        .jcrop-hline.bottom{bottom:0;}
        .jcrop-handle{background-color:#333;border:1px #eee solid;font-size:1px;}
        .jcrop-tracker{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;height:100%;width:100%;}
        .jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
        .jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
        .jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
        .jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
        .jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
        .jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
        .jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
        .jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}
        .jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;}
        .jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;}
        .jcrop-dragbar.ord-n{margin-top:-4px;}
        .jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;}
        .jcrop-dragbar.ord-e{margin-right:-4px;right:0;}
        .jcrop-dragbar.ord-w{margin-left:-4px;}
        .jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline{background:#FFF;filter:Alpha(opacity=70)!important;opacity:.70!important;}
        .jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-color:#FFF;border-radius:3px;}
        .jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline{background:#000;filter:Alpha(opacity=70)!important;opacity:.7!important;}
        .jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#FFF;border-color:#000;border-radius:3px;}
        .jcrop-holder img,img.jcrop-preview{max-width:none;} 
    </style>
    <script type="text/javascript" charset="utf-8" src="https://raw.github.com/tapmodo/Jcrop/master/js/jquery.Jcrop.min.js"></script>

    <script type="text/javascript" charset="utf-8">
        function doit(){
            var imgWidth = 640;
            var imgHeight = 640;
            var cropWidth = 150;
            var cropHeight = 150;
            var cropX = (imgWidth-cropWidth)/2;
            var cropY = (imgHeight-cropHeight)/2;

            var opt = {};
            opt.allowSelect = false;
             var jCropApi = $.Jcrop('#crop_this', opt);
            jCropApi.animateTo([cropX,cropY,cropX+cropWidth,cropY+cropHeight]);
        }

        window.onload = doit;
    </script>
</head>
<body> 
    <img id="crop_this" src="http://sphotos-a.xx.fbcdn.net/hphotos-prn1/522265_10101329774882328_647210628_n.jpg" />        
</body>
</html>

更新虽然我没有100％验证这一点，但我怀疑它与自动宽度边距有关，以实现水平居中。该插件imgareaselect已解决此问题。

拖动选择时，JCrop在Facebook画布上抖动图像

0 个答案: