How to simply draw a line in famo.us?

Question

If tried a couple of things to simply draw a line with famo.us means (not on the canvas).

Is there any possibilty to do that ?

Answer 1

Drawing a line in the DOM without canvas is not really drawing a line as much as creating an illusion of having drawn a line. This example shows how to make a surface look like a line.

Famo.us will allow you to create a surface with a height or width of 1 with the alternative being the length you would like the line to be. With a little magic background-color, the line will appear.

Here is a working example

Create the Line

var line = new Surface({ 
    size:[80,1],
    properties: {
      backgroundColor: 'rgba(0,0,0,1.0)'
    }
});

Setting an angle for the line

Remember: We are starting with a horizontal line, so we rotate starting from that perspective.

  var angle = 45;
  var angleModifier = new Modifier({
    origin: [0, 0],
    align: [0.5, 0.5],
    transform: function() {
      var radians = Math.PI/180 * angle;
      return Transform.rotateAxis([0,0,1], radians);
    }
  });

Add to the context

 context.add(angleModifier).add(line);