我正在使用名为 PerspectiveTransform.js 的脚本通过拖动 Angular 来变换图像的视角。
该脚本按预期工作。但是,我正在尝试转换两个单独图像的视角。
我已经让它适用于两个单独的图像。然而,我想要实现的是,左图像的两个右侧点与右图像的对应点绑定(bind)。
因此,当我拖动左图像的右上角时,右图像的左上点也应该移动。
我尝试为变量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);
})
});
最佳答案
您可以尝试使用自定义属性将点“配对”在一起,当配对点的 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
属性,则在没有进一步安全检查的情况下,可能会出现无限循环情况。
关于javascript - 将可拖动点绑定(bind)在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32004932/