如何创建风筝形表面

Question

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

风筝是一个四边形，它的四个边可以组合成两对相邻的等长边。我正在寻找将表面形状的矩形转换为风筝形状。我可以通过 skewX 或 skewY 创建平行四边形。平行四边形也有两对等长的边，但它们是相对的而不是相邻的（就像风筝一样）。

曲面是 div，我想将曲面的形状从 square/rectangle 更改为风筝。我试图制作一个六角网格。我很惊讶一个高度数学化的 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
}

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

问题：

表面的真正中心是上图中阴影区域的中心。这是由 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>

如何创建风筝形表面

How to create a kite shaped surface

transform

famo.us

注意事项：

下面的示例代码片段具有旋转效果，因此您可以尝试一下。

示例代码片段 #2。