Всем добры день. Столкнулся с проблемой (из-за нехватки знаний) в нарисовке линии мышкой в SVG. Есть следующий код:
...
var s = Snap(500, 200);
var line1 = s.line(20, 30, 100, 100);
line1.attr ({
stroke: "black"
});
// Определение координат мыши__________________
var mouse = {
getX: function(e) {
return e.offsetX;
},
getY: function(e) {
return e.offsetY;
}
};
//_____________________________________________
s.mousedown (function (e){
line1.attr({x1: mouse.getX(e)});
line1.attr({y1: mouse.getY(e)});
s.mousemove (function(e){
line1.attr('x2', mouse.getX(e));
line1.attr('y2', mouse.getY(e));
})
})
s.mouseup (function(e){
line1.attr({x2: mouse.getX(e)});
line1.attr({y2: mouse.getY(e)});
})
Это максимум на что хватило знаний. В моем примере идет лишь изменение координат линии, и то она не отвязывается от mousemove при отпускании мышки. Охото реализовать следующее: при нажатии мышки на холст - чтоб создавалось начало линии, при движении - другой конец линии был привязан к курсору, то есть динамическая отрисовка, и при отпускании линия фиксировалась на своем месте.
Использовал библиотеку Snap.svg. Дайте, пожалуйста, совет или пример кода для данной отрисовки, необязательно в Snap. Заранее спасибо.
