Flex 布局

感谢 @Winter 同学的支持，现在SpriteJS能够使用Flex布局了。

在Group上可以设置属性display: flex，开启flex布局。

布局 - FlexLayout - 图1

  1. ;(async function () {
  2.   const scene = new Scene('#flex-basic', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  3.   await scene.preload([
  4.     'https://p5.ssl.qhimg.com/t01f47a319aebf27174.png',
  5.     'https://s3.ssl.qhres.com/static/a6a7509c33a290a6.json',
  6.   ]);
  8.   const layer = scene.layer(),
  9.     layout = new Group();
  11.   layout.attr({
  12.     display: 'flex',
  13.     alignItems: 'flex-start',
  14.     justifyContent: 'space-around',
  15.     flexWrap: 'wrap',
  16.     // size: [300, 500],
  17.     width: 1200,
  18.     pos: [770, 50],
  19.     anchor: [0.5, 0],
  20.     border: [6, '#aaa'],
  21.   });
  23.   layer.append(layout);
  25.   const s1 = new Sprite('guanguan1.png'),
  26.     s2 = new Sprite('guanguan2.png'),
  27.     s3 = new Sprite('guanguan3.png'),
  28.     s4 = new Sprite('guanguan3.png');
  30.   s4.attr({
  31.     anchor: 0.5,
  32.     scale: [-1, 1],
  33.   });
  35.   layout.append(s1, s2, s3, s4);
  37.   layout.animate([
  38.     {width: 1200},
  39.     {width: 400},
  40.   ], {
  41.     duration: 3000,
  42.     direction: 'alternate',
  43.     iterations: Infinity,
  44.   });
  45. }())

容器属性

以下5个属性设置在容器上：

  • flexDirection
  • flexWrap
  • justifyContent
  • alignItems
  • alignContent

flexDirection

flexDirection属性决定主轴的方向（即项目的排列方向）。

flexDirection

它可能取4个值：

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

布局 - FlexLayout - 图3

  1. const scene = new Scene('#flex-direction', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const s1 = new Sprite();
  5. s1.attr({
  6.   size: [50, 50],
  7.   bgcolor: 'red',
  8. });
  9. const s2 = s1.cloneNode();
  10. s2.attr({bgcolor: 'blue'});
  11. const s3 = s1.cloneNode();
  12. s3.attr({bgcolor: 'green'});
  14. const g1 = new Group();
  15. g1.attr({
  16.   anchor: 0.5,
  17.   pos: [200, 300],
  18.   width: 200,
  19.   bgcolor: 'grey',
  20.   display: 'flex',
  21.   flexDirection: 'row',
  22. });
  23. layer.append(g1);
  25. g1.append(s1, s2, s3);
  27. const g2 = g1.cloneNode();
  28. g2.attr({
  29.   x: 500,
  30.   flexDirection: 'row-reverse',
  31. });
  32. g2.append(...[s1, s2, s3].map(s => s.cloneNode()));
  33. layer.append(g2);
  35. const g3 = g1.cloneNode();
  36. g3.attr({
  37.   x: 800,
  38.   flexDirection: 'column',
  39.   width: '',
  40.   height: 200,
  41. });
  42. g3.append(...[s1, s2, s3].map(s => s.cloneNode()));
  43. layer.append(g3);
  45. const g4 = g1.cloneNode();
  46. g4.attr({
  47.   x: 1100,
  48.   flexDirection: 'column-reverse',
  49.   width: '',
  50.   height: 200,
  51. });
  52. g4.append(...[s1, s2, s3].map(s => s.cloneNode()));
  53. layer.append(g4);

flexWrap

默认情况下，项目都排在一条线（又称”轴线”）上。flexWrap属性定义，如果一条轴线排不下，如何换行。

flexWrap

它可能取3个值：

  • nowrap（默认值）：不换行
  • wrap：换行，第一行在上方
  • wrap-reverse：换行，第一行在下方

布局 - FlexLayout - 图5

  1. const scene = new Scene('#flex-wrap', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const s1 = new Sprite();
  5. s1.attr({
  6.   size: [100, 100],
  7.   bgcolor: 'red',
  8. });
  9. const s2 = s1.cloneNode();
  10. s2.attr({bgcolor: 'blue'});
  11. const s3 = s1.cloneNode();
  12. s3.attr({bgcolor: 'green'});
  14. const g1 = new Group();
  15. g1.attr({
  16.   anchor: 0.5,
  17.   pos: [300, 300],
  18.   width: 200,
  19.   bgcolor: 'grey',
  20.   display: 'flex',
  21.   flexDirection: 'row',
  22.   flexWrap: 'nowrap',
  23. });
  24. layer.append(g1);
  26. g1.append(s1, s2, s3);
  28. const g2 = g1.cloneNode();
  29. g2.attr({
  30.   x: 800,
  31.   flexWrap: 'wrap',
  32. });
  33. g2.append(...[s1, s2, s3].map(s => s.cloneNode()));
  34. layer.append(g2);
  36. const g3 = g1.cloneNode();
  37. g3.attr({
  38.   x: 1300,
  39.   flexWrap: 'wrap-reverse',
  40. });
  41. g3.append(...[s1, s2, s3].map(s => s.cloneNode()));
  42. layer.append(g3);

justifyContent

justifyContent属性定义了项目在主轴上的对齐方式。

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右：

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

布局 - FlexLayout - 图6

  1. const scene = new Scene('#flex-justify', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const s1 = new Sprite();
  5. s1.attr({
  6.   size: [50, 50],
  7.   bgcolor: 'red',
  8. });
  9. const s2 = s1.cloneNode();
  10. s2.attr({bgcolor: 'blue'});
  11. const s3 = s1.cloneNode();
  12. s3.attr({bgcolor: 'green'});
  14. const g1 = new Group();
  15. g1.attr({
  16.   anchor: 0.5,
  17.   pos: [770, 100],
  18.   width: 300,
  19.   bgcolor: 'grey',
  20.   display: 'flex',
  21.   justifyContent: 'flex-start',
  22. });
  23. layer.append(g1);
  25. g1.append(s1, s2, s3);
  27. const g2 = g1.cloneNode();
  28. g2.attr({
  29.   y: 200,
  30.   justifyContent: 'flex-end',
  31. });
  32. g2.append(...[s1, s2, s3].map(s => s.cloneNode()));
  33. layer.append(g2);
  35. const g3 = g1.cloneNode();
  36. g3.attr({
  37.   y: 300,
  38.   justifyContent: 'center',
  39. });
  40. g3.append(...[s1, s2, s3].map(s => s.cloneNode()));
  41. layer.append(g3);
  43. const g4 = g1.cloneNode();
  44. g4.attr({
  45.   y: 400,
  46.   justifyContent: 'space-between',
  47. });
  48. g4.append(...[s1, s2, s3].map(s => s.cloneNode()));
  49. layer.append(g4);
  51. const g5 = g1.cloneNode();
  52. g5.attr({
  53.   y: 500,
  54.   justifyContent: 'space-around',
  55. });
  56. g5.append(...[s1, s2, s3].map(s => s.cloneNode()));
  57. layer.append(g5);

alignItems

alignItems属性定义项目在交叉轴上如何对齐。

它可能取4个值，具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

布局 - FlexLayout - 图7

  1. const scene = new Scene('#flex-alignItems', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const s1 = new Sprite();
  5. s1.attr({
  6.   size: [50, 100],
  7.   bgcolor: 'red',
  8. });
  9. const s2 = s1.cloneNode();
  10. s2.attr({bgcolor: 'blue', height: 200});
  11. const s3 = new Label('中\n国');
  12. s3.attr({
  13.   fillColor: 'cyan',
  14.   font: '2rem "宋体"',
  15.   bgcolor: 'green',
  16. });
  18. const g1 = new Group();
  19. g1.attr({
  20.   anchor: 0.5,
  21.   pos: [200, 300],
  22.   width: 200,
  23.   bgcolor: 'grey',
  24.   display: 'flex',
  25.   justifyContent: 'space-around',
  26.   alignItems: 'flex-start',
  27. });
  28. layer.append(g1);
  30. g1.append(s1, s2, s3);
  32. const g2 = g1.cloneNode();
  33. g2.attr({
  34.   x: 550,
  35.   alignItems: 'flex-end',
  36. });
  37. g2.append(...[s1, s2, s3].map(s => s.cloneNode()));
  38. layer.append(g2);
  40. const g3 = g1.cloneNode();
  41. g3.attr({
  42.   x: 900,
  43.   alignItems: 'center',
  44. });
  45. g3.append(...[s1, s2, s3].map(s => s.cloneNode()));
  46. layer.append(g3);
  48. const g4 = g1.cloneNode();
  49. g4.attr({
  50.   x: 1250,
  51.   alignItems: 'stretch',
  52. });
  53. g4.append(...[s1, s2, s3].map(s => s.cloneNode()));
  54. layer.append(g4);

alignContent

alignContent属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

该属性可能取6个值：

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

布局 - FlexLayout - 图8

  1. const scene = new Scene('#flex-alignContent', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const s1 = new Sprite();
  5. s1.attr({
  6.   size: [100, 100],
  7.   bgcolor: 'red',
  8. });
  9. const s2 = s1.cloneNode();
  10. s2.attr({bgcolor: 'blue'});
  11. const s3 = s1.cloneNode();
  12. s3.attr({bgcolor: 'green'});
  14. const g1 = new Group();
  15. g1.attr({
  16.   anchor: 0.5,
  17.   pos: [200, 300],
  18.   width: 200,
  19.   height: 300,
  20.   bgcolor: 'grey',
  21.   display: 'flex',
  22.   flexDirection: 'row',
  23.   flexWrap: 'wrap',
  24.   alignContent: 'stretch',
  25. });
  26. layer.append(g1);
  28. g1.append(s1, s2, s3);
  30. const g2 = g1.cloneNode();
  31. g2.attr({
  32.   x: 500,
  33.   alignContent: 'flex-start',
  34. });
  35. g2.append(...[s1, s2, s3].map(s => s.cloneNode()));
  36. layer.append(g2);
  38. const g3 = g1.cloneNode();
  39. g3.attr({
  40.   x: 800,
  41.   alignContent: 'flex-end',
  42. });
  43. g3.append(...[s1, s2, s3].map(s => s.cloneNode()));
  44. layer.append(g3);
  46. const g4 = g1.cloneNode();
  47. g4.attr({
  48.   x: 1100,
  49.   alignContent: 'space-between',
  50. });
  51. g4.append(...[s1, s2, s3].map(s => s.cloneNode()));
  52. layer.append(g4);
  54. const g5 = g1.cloneNode();
  55. g5.attr({
  56.   x: 1400,
  57.   alignContent: 'space-around',
  58. });
  59. g5.append(...[s1, s2, s3].map(s => s.cloneNode()));
  60. layer.append(g5);

元素属性

以下5个属性设置在元素上：

  • order：决定元素的排序方式
  • flexGrow：当元素被拉伸时，决定它被拉伸的比例
  • flexShrink：当元素被压缩时，决定它被压缩的比例
  • flexBasis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。spritejs根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
  • alignSelf：覆盖容器的alignItems属性通过设置order来排序：

布局 - FlexLayout - 图9

  1. const scene = new Scene('#flex-order', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const s1 = new Label('1');
  5. s1.attr({
  6.   lineHeight: 100,
  7.   fillColor: 'white',
  8.   font: 'bold 2rem "宋体"',
  9.   textAlign: 'center',
  10.   size: [100, 100],
  11.   bgcolor: 'red',
  12. });
  13. const s2 = s1.cloneNode();
  14. s2.attr({bgcolor: 'blue', text: '2'});
  15. const s3 = s1.cloneNode();
  16. s3.attr({bgcolor: 'green', text: '3'});
  18. const g1 = new Group();
  19. g1.attr({
  20.   anchor: 0.5,
  21.   pos: [300, 300],
  22.   width: 200,
  23.   bgcolor: 'grey',
  24.   display: 'flex',
  25.   flexDirection: 'row',
  26.   flexWrap: 'wrap',
  27. });
  28. layer.append(g1);
  30. g1.append(s1, s2, s3);
  32. const g2 = g1.cloneNode();
  33. g2.attr({
  34.   x: 800,
  35. });
  36. g2.append(...[s1, s2, s3].map((s, i) => s.cloneNode().attr({order: 2 - i})));
  37. layer.append(g2);
  39. const g3 = g1.cloneNode();
  40. g3.attr({
  41.   x: 1300,
  42. });
  43. g3.append(...[s1, s2, s3].map((s, i) => s.cloneNode().attr({order: Math.abs(1 - i)})));
  44. layer.append(g3);

通过设置flex-grow来决定元素占据的空间：

布局 - FlexLayout - 图10

  1. const scene = new Scene('#flex-flex', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const s1 = new Label('1');
  5. s1.attr({
  6.   lineHeight: 100,
  7.   fillColor: 'white',
  8.   font: 'bold 2rem "宋体"',
  9.   textAlign: 'center',
  10.   size: [100, 100],
  11.   bgcolor: 'red',
  12.   flexGrow: 1,
  13. });
  14. const s2 = s1.cloneNode();
  15. s2.attr({bgcolor: 'blue', text: '2'});
  16. const s3 = s1.cloneNode();
  17. s3.attr({bgcolor: 'green', text: '3'});
  19. const g1 = new Group();
  20. g1.attr({
  21.   anchor: 0.5,
  22.   pos: [770, 150],
  23.   width: 600,
  24.   bgcolor: 'grey',
  25.   display: 'flex',
  26.   flexDirection: 'row',
  27. });
  28. layer.append(g1);
  30. g1.append(s1, s2, s3);
  32. const g2 = g1.cloneNode();
  33. g2.attr({
  34.   y: 300,
  35. });
  36. g2.append(...[s1, s2, s3].map((s, i) => s.cloneNode().attr({flexGrow: i})));
  37. layer.append(g2);
  39. const g3 = g1.cloneNode();
  40. g3.attr({
  41.   y: 450,
  42. });
  43. g3.append(...[s1, s2, s3].map((s, i) => s.cloneNode().attr({flexGrow: Math.abs(1 - i)})));
  44. layer.append(g3);