将可拖动点绑定在一起

Question

我正在使用名为 PerspectiveTransform.js 的脚本通过拖动边角来变换图像的视角。

此脚本按预期工作。但是，我正在尝试转换两个单独图像的视角。

我已将其用于两个单独的图像。然而，我想要实现的是 左图像 的两个右点与 右图像 的相应点绑定。

所以当我拖动左图的右上角时，右图的左上角也应该移动。

我尝试为变量 pts 声明不同的值，但这最终导致我同时移动所有点。

欢迎就如何处理此问题提出任何建议。

Jsfiddle

我已经设法在 mousedown 函数中使用 if 语句读出正确的点。

pts.mousedown(function(e) {       

        if( $(this).parent('#containerv2').length &&  $(this).is('.bl') ||     $(this).parent('#containerv2').length && $(this).is('.tl') ){
            //Action
        }
...

接下来，当我发现右图的左下角已激活时，我尝试创建另一个目标。发生这种情况时，我会创建另一个目标并执行 onMousemove 的重复函数。

但是这不起作用，我不明白为什么。

 function onMouseMove(e) {
        targetPoint.x = e.pageX - container.offset().left;
        targetPoint.y = e.pageY - container.offset().top;
        target.css({
            left : targetPoint.x,
            top : targetPoint.y
        });

        // check the polygon error, if it's 0, which means there is no error
        if(transform.checkError()==0){
            transform.update();
            img.show();
        }else{
            img.hide();
        }
    }

    function onMouseMove2(e) {
        targetPoint2.x = e.pageX - container.offset().left;
        targetPoint2.y = e.pageY - container.offset().top;
        targetExtra.css({
            left : targetPoint2.x,
            top : targetPoint2.y
        });

        // check the polygon error, if it's 0, which means there is no error
        if(transform.checkError()==0){
            transform.update();
            img.show();
        }else{
            img.hide();
        }
    }

    pts.mousedown(function(e) { 

        if( $(this).parent('#containerv2').length &&  $(this).is('.bl') ){
            //Action
            targetExtra = $('#containerv1 .br');
            targetPoint2 = targetExtra.hasClass("tl") ? transform.topLeft : targetExtra.hasClass("tr") ? transform.topRight : targetExtra.hasClass("bl") ? transform.bottomLeft : transform.bottomRight;
            onMouseMove2.apply(this, Array.prototype.slice.call(arguments));
            $(window).mousemove(onMouseMove2);
            $(window).mouseup(function() {
                $(window).unbind('mousemove', onMouseMove2);
            })
        }

        target = $(this);
            targetPoint = target.hasClass("tl") ? transform.topLeft : target.hasClass("tr") ? transform.topRight : target.hasClass("bl") ? transform.bottomLeft : transform.bottomRight;
            onMouseMove.apply(this, Array.prototype.slice.call(arguments));
            $(window).mousemove(onMouseMove);
            $(window).mouseup(function() {
                $(window).unbind('mousemove', onMouseMove);
            })
    });

Updated Fiddle that fails

Answer 1

您可以尝试使用自定义属性将 "pair" 个点放在一起，在配对点的 mousedown 事件触发时为一个点触发 mousedown 事件。

这里有一个快速的 fiddle 来说明这个概念：http://jsfiddle.net/spesk8q7/

如您所见，我在运行 perspecDrag 函数之前将这些点与 data-pointpair 属性配对：

$("#containerv2 .pt.tl").attr("data-pointpair", "#containerv1 .pt.tr");
$("#containerv2 .pt.bl").attr("data-pointpair", "#containerv1 .pt.br");

然后我在 mousedown 事件处理程序中触发配对点的 mousedown 事件：

if($(this).attr("data-pointpair"))
{
    $($(this).attr("data-pointpair")).mousedown();                
}

不过要小心。如果您决定在已配对的点上设置 data-pointpair 属性，则可能会出现无限循环情况，而无需进一步的安全检查。

将可拖动点绑定在一起

Binding draggable points together

javascript

jquery

css

perspective