Can I draw a line using jQuery?

Question

I have a web app where I would like the user to draw a line in the following way: When he clicks on Point1 and he moves the mouse, draw the line from Point1 to the current mouse position and, when clicks to Point2 draw the final line from Point1 to Point2.

How can I do it using jQuery and/or one of its plugins?

Answer 1

I've tried a number of different approaches this weekend and the solution that worked best for me is from Adam Sanderson: http://monkeyandcrow.com/blog/drawing_lines_with_css3/

His demo is here: http://monkeyandcrow.com/samples/css_lines/

The core of it is very simple, which is always good.

div.line{
  transform-origin: 0 100%;
  height: 3px; /* Line width of 3 */
  background: #000; /* Black fill */
}


function createLine(x1,y1, x2,y2){
  var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
  var angle  = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
  var transform = 'rotate('+angle+'deg)';

    var line = $('<div>')
      .appendTo('#page')
      .addClass('line')
      .css({
        'position': 'absolute',
        'transform': transform
      })
      .width(length)
      .offset({left: x1, top: y1});

  return line;
}

Answer 2

Been using a modified version of this for a while now. Works well.

http://www.ofdream.com/code/css/xline2.php

So on first click, drop and object there as a placeholder div, maybe a little circle, then either keep redrawing a line as they move their mouse, or draw it when they click the second time, using the original placeholder as a guide.

I recently made another helper function for this, because my tool involves moving lines around:

function setLinePos(x1, y1, x2, y2, id) {
    if (x2 < x1) {
        var temp = x1;
        x1 = x2;
        x2 = temp;
        temp = y1;
        y1 = y2;
        y2 = temp;
    }
    var line = $('#line' + id);
    var length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
    line.css('width', length + "px");
    var angle = Math.atan((y2 - y1) / (x2 - x1));
    line.css('top', y1 + 0.5 * length * Math.sin(angle) + "px");
    line.css('left', x1 - 0.5 * length * (1 - Math.cos(angle)) + "px");
    line.css('-moz-transform', "rotate(" + angle + "rad)");
    line.css('-webkit-transform', "rotate(" + angle + "rad)");
    line.css('-o-transform', "rotate(" + angle + "rad)");

 }

That is the jquery version, and in this iteration I have no IE requirement so I ignore it. I could be adapted from the original function pretty easily.

Answer 3

Challenge accepted.

I tried to do it with CSS transforms and a bunch of Math in Javascript - after half an hour I have this:

http://jsfiddle.net/VnDrb/2/

Make 2 clicks into the gray square and a line should be drawn. There is still a small bug that draws the line wrong when the angle is > 45 degree. Maybe someone else knows how to fix that. Maybe instead of using Math.asin (arcsinus), use a other trigonometrical function, but I'm really not good at it. I thought I'd post it even there is a small bug, I think it's a good start for you.

Answer 4

You can not do it with jQuery and classic HTML.

1. You can do it using SVG (+svgweb for IE8- http://code.google.com/p/svgweb/ ) SVG can be dynamically created. jQuery + svgweb are working perfectly, you just need to know how to create SVG nodes and you need only jquerify this nodes. After jquerifiing in most cases used only one method attr()

2. You can do it using Raphael http://raphaeljs.com/ (based on SVG and VML)

3. You can do it using Canvas ( http://flashcanvas.net/ for IE8- )

---

For SVG programming will be this way:

1. Moment of creating first point: you create empty line var Line (also this points coordinates will be x1 and y1)

2. Then you bind on mousemove repaint of x2, y2 properties of Line

3. On mousedown after mousemove you freeze last line position.

---

UPDATE

You can do it with CSS/JS, but main problem is in calculations for IE8-, that has only Matrix filter for transformations.