绘图尺寸

我们知道，画布canvas的坐标范围它的宽高属性决定，而在网页中，canvas呈现在文档中的大小则由canvas对象的css样式决定，两者不一定相同。对应于spritejs，用resolution表示画布的宽高，而用viewport表示canvas呈现在文档中的宽高。

  1. const scene = new Scene('#coordinate', {viewport:[770, 300], resolution: [1540, 600]})

在一般情况下我们可以不设置viewport，这样的话默认的viewport会根据容器自动调整，便于我们按照不同窗口来适配我们的canvas。

比如我们定义一个相对自适应的元素：

  1. #adaptive {
  2.   width: 50%;
  3.   padding-bottom: 50%;
  4. }

坐标 - 图1

  1. const scene = new Scene('#adaptive');
  2. const layer = scene.layer();
  4. const [width, height] = layer.resolution;
  6. const path = new Path('M 297.29747,550.86823 C 283.52243,535.43191 249.1268,505.33855 220.86277,483.99412 C 137.11867,420.75228 125.72108,411.5999 91.719238,380.29088 C 29.03471,322.57071 2.413622,264.58086 2.5048478,185.95124 C 2.5493594,147.56739 5.1656152,132.77929 15.914734,110.15398 C 34.151433,71.768267 61.014996,43.244667 95.360052,25.799457 C 119.68545,13.443675 131.6827,7.9542046 172.30448,7.7296236 C 214.79777,7.4947896 223.74311,12.449347 248.73919,26.181459 C 279.1637,42.895777 310.47909,78.617167 316.95242,103.99205 L 320.95052,119.66445 L 330.81015,98.079942 C 386.52632,-23.892986 564.40851,-22.06811 626.31244,101.11153 C 645.95011,140.18758 648.10608,223.6247 630.69256,270.6244 C 607.97729,331.93377 565.31255,378.67493 466.68622,450.30098 C 402.0054,497.27462 328.80148,568.34684 323.70555,578.32901 C 317.79007,589.91654 323.42339,580.14491 297.29747,550.86823 z');
  8. path.attr({
  9.   anchor: [0.5, 0.5],
  10.   pos: [width / 2, height / 2],
  11.   fillColor: 'red',
  12.   scale: width / 800,
  13. });
  15. layer.append(path);

不设置viewport自动适配容器大小，只会在scene初始化的时候执行，如果我们希望在窗口大小改变的同时保持scene大小继续适配容器大小，那么我们可以将viewport手动设置为['auto', 'auto']。

坐标 - 图2

把viewport设置为['auto', 'auto']，scene会自动注册一个resize事件到window上，当窗口大小改变时，触发viewport的更新。

  1. const scene = new Scene('#coordinate', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const [width] = scene.resolution;
  6. const label = new Label(`resolution: ${[...scene.resolution]} | viewport: ${[...scene.viewport]}`);
  8. label.attr({
  9.   anchor: [0.5, 0],
  10.   pos: [width / 2, 10],
  11.   font: '32px Arial',
  12.   fillColor: '#aaa',
  13. });
  15. layer.append(label);
  17. function createBox(x, size) {
  18.   const box = new Label(`${size}px`);
  19.   const bgcolor = `rgb(${size % 128 + 100}, ${size % 66}, ${size % 77})`;
  21.   box.attr({
  22.     anchor: [0.5, 0],
  23.     pos: [x, 100],
  24.     size: [size, size],
  25.     bgcolor,
  26.     fillColor: '#eee',
  27.     font: '24px Arial',
  28.     textAlign: 'center',
  29.   });
  30.   return box;
  31. }
  33. for(let i = 1, x = 200; i <= 4; i++) {
  34.   const box = createBox(x, i * 100);
  35.   x += 100 * (i + 1);
  36.   layer.append(box);
  37. }
  39. window.addEventListener('resize', () => {
  40.   label.text = `resolution: ${[...scene.resolution]} | viewport: ${[...scene.viewport]}`;
  41. });

有时候，我们需要让canvas的宽度或高度其中一项自适应，但是我们又希望精灵元素保持宽高比例不变，此时我们可以在窗口大小改变的时候同动态修改Scene的resolution属性，一旦它被改变，所有Layer的resolution一同改变，并重新绘制元素。

坐标 - 图3

尝试改变窗口大小，可以看到绘制的鹬鸵的大小比例并没有被改变。

  1. const scene = new Scene('#adaptivesvg');
  2. scene.viewport = ['auto', 'auto'];
  3. const layer = scene.layer();
  5. function createKiwi(x) {
  6.   const kiwi = new Sprite('https://s1.ssl.qhres.com/static/e6a7d82354f52374.svg');
  8.   kiwi.attr({
  9.     pos: [x, 10],
  10.     size: [120, 100],
  11.   });
  13.   return kiwi;
  14. }
  16. for(let i = 0; i < 7; i++) {
  17.   const kiwi = createKiwi(10 + i * 120);
  18.   layer.append(kiwi);
  19. }
  21. window.addEventListener('resize', () => {
  22.   const [w, h] = scene.viewport;
  23.   scene.resolution = [w, h];
  24. });

注意：微信小程序版spritejs采用不同于标准版的方式来管理绘图尺寸，具体可参考高级用法：屏幕适配

锚点 anchor

在前面的例子中，我们看到Sprite元素有不同的定位方式，具体表现为不同的anchor值。比如例1是anchor:[0.5, 0.5]，例2是anchor:[0.5, 0]，例3没有设定，是默认值anchor:[0, 0]。

在spritejs中，元素的anchor属性用来表示它的参考点，坐标定位、transform都是根据anchor值来设定的，默认值为[0, 0]，即以元素的左上角位置为参考点，正常值取0~1之间，表示参考点坐标相对于元素宽高的比例，因此如果设置为[1, 1]则为右下角。

调整anchor值，看看元素有什么变化：

anchor-x: anchor-y:

坐标 - 图4

  1. const scene = new Scene('#anchor', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  3. const box = new Sprite({
  4.   anchor: [0.5, 0.5],
  5.   size: [200, 200],
  6.   pos: [770, 300],
  7.   gradients: {
  8.     bgcolor: {
  9.       vector: [0, 0, 200, 200],
  10.       colors: [
  11.         {offset: 0, color: 'red'},
  12.         {offset: 1, color: 'green'},
  13.       ],
  14.     },
  15.   },
  16. });
  17. layer.append(box);
  19. const cross = new Path('M0 10L20 10M10 0L10 20');
  20. cross.attr({
  21.   anchor: [0.5, 0.5],
  22.   pos: [770, 300],
  23.   strokeColor: 'blue',
  24.   lineWidth: 3,
  25. });
  26. layer.append(cross);
  28. const label = new Label('anchorX: 0.5, anchorY: 0.5');
  29. label.attr({
  30.   pos: [20, 20],
  31.   font: '26px Arial',
  32.   fillColor: '#aaa',
  33. });
  34. layer.append(label);
  36. box.animate([
  37.   {rotate: 0},
  38.   {rotate: 360},
  39. ], {
  40.   iterations: Infinity,
  41.   duration: 3000,
  42. });
  44. const anchorX = document.getElementById('anchorX'),
  45.   anchorY = document.getElementById('anchorY');
  47. anchorX.addEventListener('change', (evt) => {
  48.   const target = evt.target,
  49.     y = box.attr('anchor')[1];
  50.   const value = target.value / 100;
  52.   box.attr('anchor', [value, y]);
  53.   label.text = `anchorX: ${value}, anchorY: ${y}`;
  54. });
  55. anchorY.addEventListener('change', (evt) => {
  56.   const target = evt.target,
  57.     x = box.attr('anchor')[0];
  58.   const value = target.value / 100;
  60.   box.attr('anchor', [x, value]);
  61.   label.text = `anchorX: ${x}, anchorY: ${value}`;
  62. });