如何在 famo.us 中简单地画一条线？答案

【问题标题】：How to simply draw a line in famo.us?如何在 famo.us 中简单地画一条线？
【发布时间】：2015-01-15 06:26:13
【问题描述】：

如果尝试了几件事来简单地用 famo.us 方法画一条线（不在画布上）。

有没有可能做到这一点？

【问题讨论】：

标签： famo.us

【解决方案1】：

在没有画布的情况下在 DOM 中绘制一条线并不是真正地绘制一条线，而是产生一种已经绘制了一条线的错觉。这个例子展示了如何使表面看起来像一条线。

Famo.us 将允许您创建一个具有 1 的 height 或 width 的曲面，或者您希望线条的长度。用一点魔法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);

【讨论】：