famo.usに線を引く方法は？ - famo.us

単純にfamo.usで線を引くためにいくつかのことを試みた場合（キャンバス上ではありません）。

それをする可能性はありますか？

回答：

キャンバスなしでDOMに線を引くことは、実際には線を引いたような錯覚を引き起こすほど線を引くことではありません。この例は、表面を線のように見せる方法を示しています。

Famo.usを使うと、サーフェスを作成することができます。 height または width 1の代替は、あなたがその行になりたい長さであるということです。ちょっとした魔法で background-colorラインが表示されます。

ここに実例があります

線を作成する

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