精灵 Sprite

在spritejs中，Sprite是最基础的一个类，一个Sprite对象相当于DOM中的一个元素Element。同Element在文档流中一样，Sprite在Canvas画布上占有一个特定的区域。一个Sprite有自己的盒模型，通过设置它的基本属性，可以让它在Canvas画布上呈现出不同的背景颜色、边框，也可以让它出现在不同的坐标位置。

设置边框和大小

spritejs里，一个不具有textures的Sprite元素默认大小为0，即使将它添加到指定Layer，也是不会被显示出来的。我们给元素设定大小，再设定一个边框，就能让它在画布上呈现出来。

元素 - 图1

不同线宽、大小、圆角的border：

  1. const scene = new Scene('#border-and-size', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const box1 = new Sprite({
  5.   size: [100, 100],
  6.   pos: [100, 100],
  7.   border: [2, '#f77'],
  8. });
  9. const box2 = new Sprite({
  10.   size: [200, 200],
  11.   pos: [300, 100],
  12.   border: [4, '#7c7'],
  13.   borderRadius: 20,
  14. });
  15. const box3 = new Sprite({
  16.   size: [300, 300],
  17.   pos: [600, 100],
  18.   border: [6, '#77c'],
  19.   borderRadius: 50,
  20. });
  21. const box4 = new Sprite({
  22.   size: [400, 400],
  23.   pos: [1000, 100],
  24.   border: [8, '#c7c'],
  25.   borderRadius: 200,
  26. });
  27. layer.append(box1, box2, box3, box4);

填充背景色

spritejs背景色填充只需要设置bgcolor属性，支持所有css允许的颜色类型，最常用的是rgb和rgba。

元素 - 图2

  1. const scene = new Scene('#bgcolor', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const box1 = new Sprite({
  5.   size: [100, 100],
  6.   pos: [100, 100],
  7.   bgcolor: 'red',
  8. });
  9. const box2 = new Sprite({
  10.   size: [200, 200],
  11.   pos: [300, 100],
  12.   bgcolor: '#7c7',
  13.   borderRadius: 20,
  14. });
  15. const box3 = new Sprite({
  16.   size: [300, 300],
  17.   pos: [600, 100],
  18.   bgcolor: 'rgba(192, 128, 192, 0.5)',
  19.   borderRadius: 50,
  20. });
  21. const box4 = new Sprite({
  22.   size: [400, 400],
  23.   pos: [1000, 100],
  24.   bgcolor: 'hsl(180,50%,50%)',
  25.   borderRadius: 200,
  26. });
  27. layer.append(box1, box2, box3, box4);

加载图片

在spritejs中，一个sprite元素可以加载一张或多张图片，加载图片最简单的方式就是直接设置Sprite元素的textures属性，将其中的内容设置为对应的图片的URL。

元素 - 图3

如果指定图片不设置元素大小，sprite元素默认宽高为图片宽高（微信小程序版除外），如果设置元素大小，sprite图片默认大小被缩放为元素大小。此外，我们可以通过指定rect，来控制图片被加载到元素的哪个位置，这样我们可以平铺加载多张图片。最后，我们还可以通过指定srcRect来裁剪要加载的图片。以上是精灵图片的基本用法，更多加载图片相关的内容，参考高级用法：资源加载与雪碧图。

  1. const scene = new Scene('#textures', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  3. const texture = 'https://p5.ssl.qhimg.com/t01a2bd87890397464a.png';
  5. const s1 = new Sprite(texture);
  6. s1.attr({
  7.   pos: [100, 20],
  8.   border: [2, 'grey'],
  9. });
  11. const s2 = new Sprite(texture);
  12. s2.attr({
  13.   size: [190, 269],
  14.   border: [2, 'grey'],
  15.   pos: [500, 20],
  16. });
  18. const s3 = new Sprite();
  19. s3.attr({
  20.   textures: [{src: texture, rect: [0, 0, 190, 268]}, {src: texture, rect: [192, 0, 190, 268]}],
  21.   border: [2, 'grey'],
  22.   pos: [500, 300],
  23. });
  25. const s4 = new Sprite();
  26. s4.attr({
  27.   textures: [
  28.     {src: texture, rect: [0, 0, 190, 268], srcRect: [0, 0, 190, 268]},
  29.     {src: texture, rect: [200, 278, 190, 268], srcRect: [191, 269, 190, 268]},
  30.     {src: texture, rect: [0, 278, 190, 268], srcRect: [0, 269, 190, 268]},
  31.     {src: texture, rect: [200, 0, 190, 268], srcRect: [191, 0, 190, 268]},
  32.   ],
  33.   border: [2, 'grey'],
  34.   pos: [1000, 20],
  35. });
  37. layer.append(s1, s2, s3, s4);

文字 Label

Label是用来显示文字的元素，可以显示单行或多行文字。通过Label的font属性可以改变字体样式、大小等，支持css font字符串。与加载图片的精灵元素类似，如果Label不指定宽高，可以自适应宽高。文字可以通过设置textAlign属性修改对齐方式，默认是居左对齐，可以支持居中和居右对齐。文字还可以支持行高lineHeight属性，如果不设置这个属性，默认行高是font指定字体像素大小的1.2倍。通过设置padding属性能够让文字周围保留一定的空白。

元素 - 图4

  1. const scene = new Scene('#label-text', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer('fglayer');
  4. const text1 = new Label('SpriteJS.org');
  5. text1.attr({
  6.   pos: [100, 40],
  7.   fillColor: '#707',
  8.   font: 'oblique small-caps bold 56px Arial',
  9.   border: [2.5, '#ccc'],
  10. });
  11. layer.append(text1);
  13. const text2 = new Label('从前有座\n灵剑山');
  14. text2.attr({
  15.   pos: [500, 40],
  16.   fillColor: '#077',
  17.   font: '64px "宋体"',
  18.   lineHeight: 112,
  19.   textAlign: 'center',
  20.   padding: [0, 30],
  21.   border: [2.5, '#ccc'],
  22. });
  23. layer.append(text2);
  25. const text3 = new Label('Hello');
  26. text3.attr({
  27.   pos: [100, 240],
  28.   strokeColor: '#fc7',
  29.   font: 'bold italic 70px Microsoft Yahei',
  30.   textAlign: 'center',
  31.   padding: [0, 30],
  32.   border: [2.5, '#ccc'],
  33. });
  34. layer.append(text3);
  36. function createClockTexts(text, x, y) {
  37.   const len = text.length;
  39.   for(let i = 0; i < len; i++) {
  40.     const char = text.charAt(i);
  41.     const label = new Label(char);
  42.     label.attr({
  43.       anchor: [0.5, 4.5],
  44.       pos: [x, y],
  45.       font: 'bold 44px Arial',
  46.       fillColor: '#37c',
  47.       rotate: i * 360 / len,
  48.     });
  50.     layer.append(label);
  51.   }
  52. }
  53. createClockTexts('Sprite.js JavaScript Canvas...', 1200, 300);

label能够自适应大小，但是对于指定大小的Label，超出大小的部分文字将被遮挡，目前无法做到自动换行、撑开box等高级功能。这块内容后续可以通过为spritejs开发专门的文字类扩展库来实现。

路径 Path

前面的例子里我们已经见过Path的使用，这是一个强大的用来绘制矢量图形的基础类。

Path支持SVG的Path路径，我们可以使用它来绘制复杂的几何图形。

元素 - 图5

  1. const scene = new Scene('#svgpath', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer('fglayer');
  4. const p1 = new Path();
  5. p1.attr({
  6.   path: {
  7.     d: 'M280,250A200,200,0,1,1,680,250A200,200,0,1,1,280,250Z',
  8.     transform: {
  9.       scale: 0.5,
  10.     },
  11.     trim: true,
  12.   },
  13.   strokeColor: '#033',
  14.   fillColor: '#839',
  15.   lineWidth: 12,
  16.   pos: [100, 50],
  17. });
  19. layer.appendChild(p1);
  21. const p2 = new Path();
  22. p2.attr({
  23.   path: {
  24.     d: 'M480,50L423.8,182.6L280,194.8L389.2,289.4L356.4,430L480,355.4L480,355.4L603.6,430L570.8,289.4L680,194.8L536.2,182.6Z',
  25.     transform: {
  26.       rotate: 45,
  27.     },
  28.     trim: true,
  29.   },
  30.   fillColor: '#ed8',
  31.   pos: [450, 100],
  32. });
  33. layer.appendChild(p2);
  35. const p3 = new Path();
  36. p3.attr({
  37.   path: {
  38.     d: 'M480,437l-29-26.4c-103-93.4-171-155-171-230.6c0-61.6,48.4-110,110-110c34.8,0,68.2,16.2,90,41.8C501.8,86.2,535.2,70,570,70c61.6,0,110,48.4,110,110c0,75.6-68,137.2-171,230.8L480,437z',
  39.     trim: true,
  40.   },
  41.   strokeColor: '#f37',
  42.   lineWidth: 20,
  43.   lineJoin: 'round',
  44.   lineCap: 'round',
  45.   pos: [1000, 100],
  46. });
  47. layer.appendChild(p3);

Path对象的path属性是一个非常重要而且强大的属性，通过它能够指定SVG Path的“d”属性，绘制一个矢量图形。path属性还包括transform，对矢量图进行变换。与精灵元素本身的transform不同的是，path的transform直接变换的是矢量路径，所以在进行缩放的时候能够保真。

元素 - 图6

可以看到左边的爱心在放大的时候会变模糊，右边则不会。因为右边是在放大的时候通过路径的transform重新生成的路径，这样可以保真，当然代价是运算量比较大，因此有利有弊，分场合使用。

  1. const scene = new Scene('#svgpath-transform', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer('fglayer');
  3. const d = 'M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2 c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z';
  5. const heart1 = new Path();
  6. heart1.attr({
  7.   anchor: [0.5, 0.5],
  8.   path: {
  9.     d,
  10.     transform: {
  11.       rotate: 45,
  12.     },
  13.     trim: true,
  14.   },
  15.   fillColor: '#f33',
  16.   pos: [300, 300],
  17. });
  18. layer.appendChild(heart1);
  20. heart1.animate([
  21.   {scale: 1},
  22.   {scale: 10},
  23. ], {
  24.   duration: 5000,
  25.   iterations: Infinity,
  26.   direction: 'alternate',
  27. });
  29. const heart2 = new Path();
  30. heart2.attr({
  31.   anchor: [0.5, 0.5],
  32.   path: {
  33.     d,
  34.     transform: {
  35.       rotate: 45,
  36.     },
  37.     trim: true,
  38.   },
  39.   fillColor: '#f33',
  40.   pos: [900, 300],
  41. });
  42. heart2.animate([
  43.   {path: {d, trim: true, transform: {rotate: 45, scale: 1}}},
  44.   {path: {d, trim: true, transform: {rotate: 45, scale: 10}}},
  45. ], {
  46.   duration: 5000,
  47.   iterations: Infinity,
  48.   direction: 'alternate',
  49. });
  50. layer.appendChild(heart2);

如上所见，使用Path对象可以绘制复杂的矢量图，不过我们需要对SVG的Path熟悉才会比较好用。spritejs本身不提供基础的简单图形的绘制，但我们可以使用自定义绘图或者通过创建自定义的精灵类型来解决这样的需求。在未来，我们考虑提供专业的绘图扩展库，来解决各种图形相关的问题。

分组 Group

就像DOM元素可以嵌套一样，当我们要批量操作多个元素时，我们可以使用Group元素将其他元素放到Group元素下。

元素 - 图7

对于Group元素的操作就像操作普通精灵那样，因此当我们把几个不同的元素放进Group之后，直接操作Group就可以让Group中的所有元素一起随着Group运动。

  1. const scene = new Scene('#group', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer('fglayer');
  3. const group = new Group();
  4. const arcD = 'M0 0L 50 0A50 50 0 0 1 43.3 25z';
  6. group.attr({
  7.   size: [300, 300],
  8.   pos: [770, 300],
  9.   anchor: [0.5, 0.5],
  10. });
  11. layer.append(group);
  13. for(let i = 0; i < 6; i++) {
  14.   const arc = new Path();
  15.   arc.attr({
  16.     path: {
  17.       d: arcD,
  18.       transform: {scale: 3, rotate: -15},
  19.       trim: true,
  20.     },
  21.     pos: [150, 150],
  22.     anchor: [0, 0.5],
  23.     strokeColor: 'red',
  24.     rotate: i * 60,
  25.   });
  26.   arc.attr('fillColor', `rgb(${i * 139 % 255}, 0, 0)`);
  27.   group.append(arc);
  28. }
  30. group.animate([
  31.   {rotate: 0},
  32.   {rotate: 360},
  33. ], {
  34.   duration: 3000,
  35.   iterations: Infinity,
  36. });

Group除了分组元素外，还有一个特别好的功能，那就是创建clip剪裁区域。

元素 - 图8

  1. ;(async function () {
  2.   const imgUrl = 'https://p4.ssl.qhimg.com/t01423053c4cb748581.jpg';
  3.   const scene = new Scene('#group-clip', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  4.   await scene.preload({id: 'beauty', src: imgUrl});
  6.   const layer = scene.layer('fglayer');
  7.   const group = new Group();
  8.   group.attr({
  9.     pos: [770, 300],
  10.     anchor: [0.5, 0.5],
  11.     clip: {d: 'M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2 c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z', transform: {scale: 15}},
  12.   });
  13.   layer.append(group);
  15.   const sprite = new Sprite('beauty');
  16.   sprite.attr({
  17.     pos: [-10, 0],
  18.     scale: 0.75,
  19.   });
  20.   group.append(sprite);
  21. }())

Group的clip属性和Path的path属性一样，可以设置d，表示剪裁区域，并且设置transform和trim。