如何在famo.us中简单划一条线？

Question

如果尝试使用famo.us方法（不在画布上）绘制一条线就可以做几件事。

这样做有可能吗？

Answer 1

在没有画布的情况下在DOM中绘制一条线并不像绘制线条那样创造一条线条。此示例显示如何使曲面看起来像一条线。

Famo.us将允许您创建一个height或width为1的曲面，其替代方式是您希望该线的长度。如果有一点魔法background-color，就会显示该行。

<强> Here is a working example

创建行

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

设置线条的角度

记住：我们从水平线开始，所以我们从那个角度开始旋转。

  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);
    }
  });

添加到上下文

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