块元素

块元素是指有外盒（outer box）和内容盒（content box）的元素。

SpriteJS Next的块元素继承基类Block，主要有Sprite、Label、Group三大类。

锚点 anchor

与旧版的SpriteJS一样，块元素可以设置不同的anchor值，用来表示参考点，anchor值的变化会影响块元素的定位和默认的transformOrigin。

  1. const {Scene, Sprite, Gradient, Path} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 600,
  6.   height: 360,
  7. });
  8. const layer = scene.layer();
  10. const gradient = new Gradient({
  11.   vector: [0, 0, 150, 150],
  12.   colors: [
  13.     {offset: 0, color: 'red'},
  14.     {offset: 1, color: 'green'},
  15.   ],
  16. });
  18. const box = new Sprite({
  19.   anchor: [0.5, 0.5],
  20.   size: [150, 150],
  21.   pos: [300, 180],
  22.   bgcolor: gradient,
  23. });
  24. layer.append(box);
  26. const cross = new Path('M-5 0L5 0M0 5L0 -5');
  27. cross.attr({
  28.   pos: [300, 180],
  29.   lineWidth: 2,
  30.   strokeColor: 'blue',
  31. });
  32. layer.append(cross);
  34. box.animate([
  35.   {rotate: 0},
  36.   {rotate: 360},
  37. ], {
  38.   iterations: Infinity,
  39.   duration: 3000,
  40. });

在线运行

边框 border

与HTML元素类似，块元素可以设置边框，相关属性包括：

  • borderWidth 设置边框的宽度
  • borderColor 设置边框的颜色
  • borderDash 设置虚线框
  • borderDashOffset 设置虚线框偏移量
  • borderRadius 设置圆角
  1. const {Scene, Sprite} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 600,
  6.   height: 360,
  7. });
  8. const layer = scene.layer();
  10. const box = new Sprite({
  11.   anchor: [0.5, 0.5],
  12.   size: [150, 150],
  13.   pos: [300, 180],
  14.   bgcolor: 'white',
  15.   borderWidth: 1,
  16.   borderRadius: 20,
  17. });
  18. layer.append(box);

内边距 padding

与HTML元素类似，块元素可以设置内边距：

  • paddingTop
  • paddingRight
  • paddingBottom
  • paddingLeft
  1. const {Scene, Label} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 600,
  6.   height: 360,
  7.   // contextType: '2d',
  8. });
  9. const layer = scene.layer();
  11. const box = new Label({
  12.   text: 'SpriteJS',
  13.   fontSize: '2rem',
  14.   anchor: [0.5, 0.5],
  15.   pos: [300, 180],
  16.   bgcolor: 'white',
  17.   borderWidth: 1,
  18.   padding: 25,
  19. });
  20. layer.append(box);

盒子 boxSizing

与HTML元素类似，块元素可以通过修改boxSizing属性来设置元素宽高的计算方式。

块元素 - 图1

如图所示，一个块元素有四个“宽高”，分别是：

  • contentSize 内容的宽高
  • clientSize 内容的宽高+padding
  • borderSize 内容的宽高+padding+border的一半
  • offsetSize 内容的宽高+padding+border

当box-sizing值为content-size（默认值）时，元素的width和height属性分别为：

  1. el.attribute.width = contentSize[0];
  2. el.attribute.height = contentSize[1];

当box-sizing值为border-size时，元素的width和height属性分别为：

  1. el.attribute.width = offsetSize[0];
  2. el.attribute.width = offsetSize[1];

精灵 Sprite

Sprite元素是最常用的块元素，它可以设置texture属性。与旧版SpriteJS不同，旧版SpriteJS可以设置textures属性指定多张图片，新版 SpriteJS Next 则只能设置一张图片。

除了设置texture外，还可以设置sourceRect来剪裁图片，或者设置textureRect来将图片显示在精灵的指定位置。

如果要重复显示图片，可以设置精灵的textureRepeat属性为true，这个可以用来实现类似HTML中的平铺背景。

  1. const {Scene, Sprite} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const imgUrl = 'https://p5.ssl.qhimg.com/t01a2bd87890397464a.png';
  4. const scene = new Scene({
  5.   container,
  6.   width: 1200,
  7.   height: 600,
  8. });
  9. const layer = scene.layer();
  11. const s1 = new Sprite({
  12.   anchor: [0, 0.5],
  13.   pos: [20, 300],
  14.   bgcolor: 'white',
  15.   borderWidth: 1,
  16.   borderRadius: 20,
  17.   texture: imgUrl,
  18. });
  19. layer.append(s1);
  21. const srcParts = [
  22.   [0, 0, 190, 268],
  23.   [0, 269, 190, 268],
  24.   [191, 0, 190, 268],
  25.   [191, 269, 190, 268],
  26. ];
  27. for(let i = 0; i < 2; i++) {
  28.   for(let j = 0; j < 2; j++) {
  29.     const sourceRect = srcParts[i * 2 + j];
  30.     const x = 360 + i * 200;
  31.     const y = j * 278;
  32.     const s = new Sprite({
  33.       x,
  34.       y,
  35.       texture: imgUrl,
  36.       sourceRect,
  37.     });
  38.     layer.append(s);
  39.   }
  40. }
  42. const s2 = new Sprite({
  43.   anchor: [0, 0.5],
  44.   pos: [720, 300],
  45.   bgcolor: 'white',
  46.   borderWidth: 1,
  47.   borderRadius: 20,
  48.   texture: imgUrl,
  49.   textureRect: [0, 0, 190, 268],
  50.   textureRepeat: true,
  51. });
  53. layer.append(s2);

文字 Label

基于性能考虑，SpriteJS Next 的 Label 元素比旧版本的SpriteJS的Label元素要弱化了不少。

新版本只支持单行文本，不支持自动排版。

  1. const {Scene, Label} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 1200,
  6.   height: 600,
  7.   // contextType: '2d',
  8. });
  9. const layer = scene.layer();
  11. const text1 = new Label('SpriteJS.org');
  12. text1.attr({
  13.   pos: [100, 40],
  14.   fillColor: '#707',
  15.   font: 'oblique small-caps bold 56px Arial',
  16.   border: [2.5, '#ccc'],
  17. });
  18. layer.append(text1);
  20. const text2 = new Label('从前有座灵剑山');
  21. text2.attr({
  22.   pos: [500, 20],
  23.   fillColor: '#077',
  24.   font: '64px "宋体"',
  25.   lineHeight: 112,
  26.   textAlign: 'center',
  27.   padding: [0, 30],
  28.   border: [2.5, '#ccc'],
  29. });
  30. layer.append(text2);
  32. const text3 = new Label('Hello');
  33. text3.attr({
  34.   pos: [100, 240],
  35.   strokeColor: 'red',
  36.   font: 'bold oblique 70px Microsoft Yahei',
  37.   strokeWidth: 1,
  38.   textAlign: 'center',
  39.   padding: [0, 30],
  40.   border: [2.5, '#ccc'],
  41. });
  42. layer.append(text3);
  44. function createClockTexts(text, x, y) {
  45.   const len = text.length;
  47.   for(let i = 0; i < len; i++) {
  48.     const char = text.charAt(i);
  49.     const label = new Label(char);
  50.     label.attr({
  51.       anchor: [0.5, 4.5],
  52.       pos: [x, y],
  53.       font: 'bold 44px Arial',
  54.       fillColor: '#37c',
  55.       rotate: i * 360 / len,
  56.     });
  58.     layer.append(label);
  59.   }
  60. }
  61. createClockTexts('Sprite.js JavaScript Canvas...', 700, 360);

分组 Group

SpriteJS Next 的Group比旧版简单一些，性能好很多，但功能上也不再有的clip和剪裁区域的功能。

  1. const {Scene, Group, Path} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 1200,
  6.   height: 600,
  7. });
  8. const layer = scene.layer();
  9. const arcD = 'M0 0L 50 0A50 50 0 0 1 43.3 25z';
  11. const group = new Group();
  12. group.attr({
  13.   size: [300, 300],
  14.   pos: [600, 300],
  15.   anchor: [0.5, 0.5],
  16.   bgcolor: '#cec',
  17.   borderRadius: 150,
  18. });
  19. layer.append(group);
  21. for(let i = 0; i < 6; i++) {
  22.   const arc = new Path();
  23.   arc.attr({
  24.     d: arcD,
  25.     scale: 3,
  26.     anchor: [0, 0.5],
  27.     strokeColor: 'red',
  28.     fillColor: `rgb(${i * 99 % 255}, 0, 0)`,
  29.     rotate: i * 60,
  30.   });
  31.   group.append(arc);
  32. }
  34. group.animate([
  35.   {rotate: 0},
  36.   {rotate: 360},
  37. ], {
  38.   duration: 3000,
  39.   iterations: Infinity,
  40. });

SpriteSvg

SpriteSvg 元素继承自 Sprite 元素，可以给定一个 Svg 图片。

SpriteSvg 元素可以和 D3 配合，方便地渲染坐标轴。

  1. /* globals d3 */
  2. const {Scene, SpriteSvg} = spritejs;
  3. const container = document.getElementById('stage');
  4. const scene = new Scene({
  5.   container,
  6.   width: 1200,
  7.   height: 1200,
  8. });
  10. const dataset = [125, 121, 127, 193, 309];
  12. const scale = d3.scaleLinear()
  13.   .domain([100, d3.max(dataset)])
  14.   .range([0, 500]);
  16. const colors = ['#fe645b', '#feb050', '#c2af87', '#81b848', '#55abf8'];
  18. const fglayer = scene.layer('fglayer');
  19. const s = d3.select(fglayer);
  21. document.querySelector('#stage canvas').style.backgroundColor = '#eee';
  23. const chart = s.selectAll('sprite')
  24.   .data(dataset)
  25.   .enter()
  26.   .append('sprite')
  27.   .attr('x', 450)
  28.   .attr('y', (d, i) => {
  29.     return 200 + i * 95;
  30.   })
  31.   .attr('width', 0)
  32.   .attr('height', 80)
  33.   .attr('bgcolor', '#ccc');
  35. chart.transition()
  36.   .duration(2000)
  37.   .attr('width', (d, i) => {
  38.     return scale(d);
  39.   })
  40.   .attr('bgcolor', (d, i) => {
  41.     return colors[i];
  42.   });
  44. const axis = d3.axisBottom(scale).tickValues([100, 200, 300, 400]);
  45. const axisNode = new SpriteSvg({
  46.   x: 420,
  47.   y: 680,
  48. });
  49. d3.select(axisNode.svg)
  50.   .attr('width', 600)
  51.   .attr('height', 60)
  52.   .append('g')
  53.   .attr('transform', 'translate(30, 0)')
  54.   .call(axis);
  56. axisNode.svg.children[0].setAttribute('font-size', 20);
  57. fglayer.append(axisNode);
  59. chart.on('click', (data) => {
  60.   /* eslint-disable no-console */
  61.   console.log(data, d3.event);
  62.   /* eslint-enable no-console */
  63. });

此外，我们可以将SpriteSvg元素的flexible属性设为true，让SVG自适应元素大小。

  1. const container = document.getElementById('container');
  2. const scene = new spritejs.Scene({
  3.   container,
  4.   displayRatio: 2,
  5.   width: 1200,
  6.   height: 600,
  7.   mode: 'stickyHeight',
  8. });
  10. const svgURL = 'https://s1.ssl.qhres.com/static/9bd74da7f533f462.svg';
  13. const fglayer = scene.layer('fglayer');
  14. const root = new spritejs.SpriteSvg(svgURL);
  15. root.attr({
  16.   x: 100,
  17.   y: 100,
  18.   flexible: true,
  19.   scale: 0.5,
  20. });
  22. fglayer.append(root);