К сожалению, jsfiddle сегодня не работает, поэтому я постараюсь изо всех сил описать, что мне нужно.
У меня есть два div, которые имеют фиксированный размер (100 на 100 пикселей). Это jquery-UI-dragggable.
Разметка выглядит так:
<body>
<div class="touch" id="front"><img src="front.png" /></div>
<div class="touch" id="back"><img src="back.png" /></div>
<canvas id="connect"></canvas>
</body>
и CSS выглядит следующим образом:
.touch{
width: 100px;
height: 100px;
background-color: red;
}
#connect{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Теперь я пытаюсь использовать канву, чтобы нарисовать линию, соединяющую эти два элемента, выполнив следующие действия для drag:
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo($('#front').offset().left,$('#front').offset().top);
ctx.lineTo($('#back').offset().left,$('#back').offset().top);
ctx.stroke();
Это работает, когда линия рисуется в соответствии с движениями div s, но она совершенно не в пропорциях, то есть начальная и конечная точки кажутся умноженными на некоторый коэффициент. Тем не менее, когда я рисую элемент жестко закодированными значениями, он работает нормально, а когда я записываю значения offset(), они кажутся правдоподобными. Может кто-нибудь сказать мне, что я здесь делаю не так?