如何制作风筝形表面

Question

我正在尝试使用形状像风筝的Famo.us构建表面。

风筝是四边形，其四边可以被分组为彼此相邻的两对等长边。我希望将表面形状的矩形变换为风筝形状。我可以通过skewX或skewY创建平行四边形。平行四边形也有两对等长边，但它们彼此相对而不是相邻（如在风筝中）。

表面是div，我想将表面的形状从正方形/矩形改为风筝。我试图制作一个十六进制网格。我很惊讶高度数学的JavaScript Famo.us网络平台没有三角形表面。我喜欢Famo.us唯一的解决方案，它可能。

Answer 1

您的问题是有效的，但有一点需要注意。此形状的曲面（div）要求我们使用after创建两部分样式。您的使用案例可能会限制此解决方案的使用。

没有Famo.us：使用div和css可以创建风筝形状。

<div class="kite-css"></div>

.kite-css {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 50px solid red;
  top: -40px;
  position: relative;
}
.kite-css:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid red;
  z-index: -1
}

使用Famo.us：使用上面的一些修改过的css并将类添加到Famo.us表面。我添加了background-color的一些Surface来突出显示将用于渲染大小的表面区域。我在曲面的内容中添加了一些文本，以显示文本如何受此方法的影响。

问题：

• 表面的真实中心是上图中阴影区域的中心。这是由Famo.us创建的element，下部是使用after的样式创建的。
• 可用内容从顶部的中心开始，因为边框挤出了正方形的四周。

.kite-shape {
  border: 50px solid transparent;
  border-bottom: 50px solid red;
  top: -40px;
}
.kite-shape:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid red;
  z-index: -1
}

  var kite = new Surface({ 
    size: [100, 100],
    classes: ['kite-shape','double-sided'],
    content: 'Famo.us Kite',
    properties: {
      backgroundColor: 'rgba(0,0,0,0.05)',
      fontSize: '0.9em'
    }
  });

注意事项：

• 您可以先在文字内容中放入风筝形状（示例摘录＃2）
• 您还可以使用ImageSurface并制作风筝图像以供地面使用。

下面带有旋转效果的示例代码段，因此您可以使用它。

define('main', function (require, exports, module) {
  var Engine = require('famous/core/Engine');
  var OptionsManager = require('famous/core/OptionsManager');	
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var RenderNode = require('famous/core/RenderNode');
  var Transform = require('famous/core/Transform');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

  var kite = new Surface({ 
    classes: ['kite-shape','double-sided'],
    content: 'Famo.us Kite',
    properties: {
      backgroundColor: 'rgba(0,0,0,0.05)',
      fontSize: '0.9em'
    }
  });

  var tt = new TransitionableTransform();
  mainContext.add(new Modifier({
    size: [100, 100],
    origin:[0.5, 0.5],
    align:[0.5, 0.5],
    transform: rotate
  })).add(kite);


  var initialTime = Date.now();
  
  function rotate() {
    var radians = 0.001 * (Date.now() - initialTime);
    tt.set(Transform.rotateAxis([0,1,0.25], Math.PI * radians));
    return tt.get();
  }
  
  });
require(['main']);

<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

<div class="kite-css">CSS</div>

<style>
.double-sided {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.kite-css {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 50px solid red;
  top: -40px;
  position: relative;
}
.kite-css:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid red;
  z-index: -1
}

.kite-shape {
  border: 50px solid transparent;
  border-bottom: 50px solid red;
  top: -40px;
}
.kite-shape:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid red;
  z-index: -1
}
</style>

示例代码段＃2。

表面内有风筝形状。

define('main', function (require, exports, module) {
  var Engine = require('famous/core/Engine');
  var OptionsManager = require('famous/core/OptionsManager');	
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var RenderNode = require('famous/core/RenderNode');
  var Transform = require('famous/core/Transform');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

  var kite = new Surface({ 
    size: [100, 300],
    classes: ['double-sided'],
    content: 'Famous Kite<div class="kite-css"></div>',
    properties: {
      backgroundColor: 'rgba(0,0,0,0.05)',
      fontSize: '0.9em',
      lineHeight: '12px'
    }
  });

  var tt = new TransitionableTransform();
  mainContext.add(new Modifier({
    size: [100, 100],
    origin:[0.5, 0.5],
    align:[0.5, 0.5],
    transform: rotate
  })).add(kite);

  var initialTime = Date.now();
  
  function rotate() {
    var radians = 0.001 * (Date.now() - initialTime);
    tt.set(Transform.rotateAxis([0,1,0.25], Math.PI * radians));
    return tt.get();
  }
  
  });
require(['main']);

<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

<div class="kite-css">CSS</div>

<style>
.double-sided {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.kite-css {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 50px solid red;
  top: -40px;
  position: relative;
}
.kite-css:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid red;
  z-index: -1
}

.kite-shape {
  border: 50px solid transparent;
  border-bottom: 50px solid red;
  top: -40px;
}
.kite-shape:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid red;
  z-index: -1
}
</style>