事件和坐标

在基础用法：事件里，我们介绍了sprite事件的基本原理和用法。但是在一些应用中，我们有一些非矩形的元素，比如一些Path或者利用元素圆角绘制的几何图形。如果是Path，我们可以通过事件参数event.targetPaths来判断元素中的Path路径是否在鼠标坐标之内。但是如果是利用元素圆角样式绘制的圆或圆环，我们就不能那么做了。

事件与自定义事件 - 图1

一个办法是我们可以使用坐标位置到圆心的距离来判断，但是这样比较麻烦，mousemove不断监听，而且还需要通过mouseleave事件处理，否则可能不能判断鼠标是否已经移出元素。

  1. const scene = new Scene('#point-collision', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const c1 = new Sprite();
  5. c1.attr({
  6.   anchor: [0.5, 0.5],
  7.   border: [100, 'red'],
  8.   pos: [770, 300],
  9.   borderRadius: 50,
  10.   opacity: 0.5,
  11. });
  12. layer.append(c1);
  14. const c2 = new Sprite();
  15. c2.attr({
  16.   anchor: [0.5, 0.5],
  17.   border: [50, 'rgb(192, 128, 0)'],
  18.   size: [100, 100],
  19.   pos: [470, 300],
  20.   borderRadius: 75,
  21.   opacity: 0.5,
  22. });
  23. layer.append(c2);
  25. const c3 = new Sprite();
  26. c3.attr({
  27.   anchor: [0.5, 0.5],
  28.   border: [20, 'green'],
  29.   pos: [1070, 300],
  30.   size: [160, 160],
  31.   borderRadius: 90,
  32.   opacity: 0.5,
  33. });
  34. layer.append(c3);
  36. function isPointCollision(sprite, x, y) {
  37.   const {width: borderWidth} = sprite.attr('border'),
  38.     width = sprite.contentSize[0];
  40.   const bounds = sprite.boundingRect,
  41.     [cx, cy] = [bounds[0] + bounds[2] / 2, bounds[1] + bounds[3] / 2];
  43.   const distance = Math.sqrt((x - cx) ** 2 + (y - cy) ** 2);
  44.   return distance >= width / 2 && distance <= width / 2 + borderWidth;
  45. }
  47. [c1, c2, c3].forEach((c) => {
  48.   c.on('mousemove', (evt) => {
  49.     const target = evt.target,
  50.       {offsetX, offsetY} = evt;
  52.     if(isPointCollision(target, offsetX, offsetY)) {
  53.       target.attr('opacity', 1);
  54.     } else {
  55.       target.attr('opacity', 0.5);
  56.     }
  57.   });
  58.   c.on('mouseleave', (evt) => {
  59.     const target = evt.target;
  60.     target.attr('opacity', 0.5);
  61.   });
  62. });

其实我们有另一个比较好的办法，那就是重新定义元素鼠标的事件响应区域，这可以通过重写元素的pointCollision方法来实现。

事件与自定义事件 - 图2

我们可以继承Sprite创建一个Circle类，然后重新定义一些属性，对于一些不需要配置，根据可配置属性决定的属性，我们可以在init的attr.setDefault里面确定，创建新的精灵类型是另一个话题，我们不在这里详细说。在这里，我们只关注通过重写pointCollision方法，我们给精灵重新指定了响应事件的范围，这样我们就只需简单把事件注册在mouseenter和mouseleave上即可。

  1. const scene = new Scene('#point-collision-override', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. function isPointCollision(circle, x, y) {
  5.   const [r1, r2] = circle.attr('r'),
  6.     width = circle.contentSize[0];
  8.   const bounds = circle.boundingRect,
  9.     [cx, cy] = [bounds[0] + bounds[2] / 2, bounds[1] + bounds[3] / 2];
  11.   const distance = Math.sqrt((x - cx) ** 2 + (y - cy) ** 2);
  12.   return distance >= width / 2 && distance <= width / 2 + r1 - r2;
  13. }
  15. class Circle extends Sprite {
  16.   pointCollision(evt) {
  17.     if(!super.pointCollision(evt)) {
  18.       return false;
  19.     }
  20.     const {offsetX, offsetY} = evt;
  21.     return isPointCollision(this, offsetX, offsetY);
  22.   }
  23. }
  25. Circle.defineAttributes({
  26.   init(attr) {
  27.     attr.setDefault({
  28.       r: [100, 0],
  29.       color: 'black',
  30.     });
  31.   },
  32.   r(attr, val) { // 定义半径属性 [外环，内环]
  33.     attr.clearCache();
  34.     if(!Array.isArray(val)) {
  35.       val = [val, 0];
  36.     }
  37.     const [r1, r2] = val;
  38.     attr.set('r', val);
  39.     attr.borderRadius = (r1 + r2) / 2;
  40.     attr.size = [2 * r2, 2 * r2];
  41.     attr.border = {width: r1 - r2, color: attr.color, style: 'solid'};
  42.   },
  43.   color(attr, val) {
  44.     attr.clearCache();
  45.     attr.set('color', val);
  46.     const [r1, r2] = attr.r;
  47.     attr.border = {width: r1 - r2, color: attr.color, style: 'solid'};
  48.   },
  49. });
  51. const c1 = new Circle();
  52. c1.attr({
  53.   anchor: [0.5, 0.5],
  54.   pos: [770, 300],
  55.   opacity: 0.5,
  56.   r: 100,
  57.   color: 'red',
  58. });
  59. layer.append(c1);
  61. const c2 = new Circle();
  62. c2.attr({
  63.   anchor: [0.5, 0.5],
  64.   color: 'rgb(192, 128, 0)',
  65.   r: [100, 50],
  66.   pos: [470, 300],
  67.   opacity: 0.5,
  68. });
  69. layer.append(c2);
  71. const c3 = new Circle();
  72. c3.attr({
  73.   anchor: [0.5, 0.5],
  74.   color: 'green',
  75.   pos: [1070, 300],
  76.   r: [100, 80],
  77.   opacity: 0.5,
  78. });
  79. layer.append(c3)
  81. ;[c1, c2, c3].forEach((c) => {
  82.   c.on('mouseenter', (evt) => {
  83.     evt.target.attr('opacity', 1);
  84.   });
  85.   c.on('mouseleave', (evt) => {
  86.     evt.target.attr('opacity', 0.5);
  87.   });
  88. });
  89. window.c1 = c1;

自定义事件

所有的sprite节点都可以通过dispatchEvent方法发送自定义事件。dispatchEvent有四个参数，含义分别如下：

参数名参数类型默认值说明
typeString派发事件的类型
evtArgsObject事件参数
collisionStateBooleanfalse如果这个参数为true，忽略pointCollision，默认判定为命中事件区域
swallowBooleanfalse如果这个参数为true，事件执行完之后不再向后面的元素传播，这个参数只对Group、Layer类型有效

自定义事件可以让我们以松耦合的方式来完成canvas内部与外部文档的交互。

事件与自定义事件 - 图3

  1. ;(async function () {
  2.   const chickRes = 'https://p5.ssl.qhimg.com/t01acd5010cb5a500d5.png',
  3.     chickJSON = 'https://s2.ssl.qhres.com/static/930e3b2e60496c6e.json';
  4.   const scene = new Scene('#custom-event', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  5.   const layer = scene.layer();
  7.   await scene.preload([chickRes, chickJSON]);
  9.   const claw = new Sprite('chickclaw.png');
  10.   claw.attr({
  11.     anchor: [0.5, 0],
  12.     pos: [770, 0],
  13.     zIndex: 100,
  14.   });
  15.   layer.append(claw);
  17.   for(let i = 1; i <= 4; i++) {
  18.     const chick = new Sprite(`chick0${i}.png`);
  19.     chick.attr({
  20.       anchor: [0.5, 1],
  21.       pos: [300 + (i - 1) * 350, 600],
  22.       scale: 0.5,
  23.     });
  24.     layer.append(chick);
  25.   }
  27.   let pressed = false;
  28.   let moving;
  30.   async function moveClaw(speed) {
  31.     while(pressed) {
  32.       const x0 = claw.attr('x');
  33.       const anim = claw.animate([
  34.         {x: x0},
  35.         {x: x0 + speed},
  36.       ], {
  37.         duration: 500,
  38.         fill: 'forwards',
  39.       });
  40.       /* eslint-disable no-await-in-loop */
  41.       await anim.finished;
  42.       /* eslint-enable no-await-in-loop */
  43.     }
  44.     const x0 = claw.attr('x');
  45.     await claw.animate([
  46.       {x: x0},
  47.       {x: x0 + speed / 5},
  48.     ], {
  49.       duration: 100,
  50.       fill: 'forwards',
  51.       easing: 'ease-out',
  52.     }).finished;
  53.     moving = null;
  54.   }
  56.   layer.on('buttonDown', async (evt) => {
  57.     pressed = true;
  58.     const buttonId = evt.buttonId;
  59.     if(!moving && buttonId === 'leftBtn') {
  60.       moving = moveClaw(-50);
  61.     } else if(!moving && buttonId === 'rightBtn') {
  62.       moving = moveClaw(50);
  63.     } else if(buttonId === 'downBtn') {
  64.       await moving;
  65.       moving = (async () => {
  66.         await claw.animate([
  67.           {y: 0},
  68.           {y: 400},
  69.         ], {
  70.           duration: 2000,
  71.           fill: 'forwards',
  72.         }).finished;
  73.         layer.children.forEach((child) => {
  74.           if(child !== claw && claw.OBBCollision(child)) {
  75.             child.attr('zIndex', 200);
  76.             child.animate([
  77.               {y: 600},
  78.               {y: 200},
  79.             ], {
  80.               duration: 3000,
  81.               fill: 'forwards',
  82.             }).finished.then(() => child.remove());
  83.           }
  84.         });
  85.         await claw.animate([
  86.           {y: 400},
  87.           {y: 0},
  88.         ], {
  89.           duration: 3000,
  90.           fill: 'forwards',
  91.         }).finished;
  92.         moving = null;
  93.       })();
  94.     }
  95.   });
  96.   layer.on('buttonUp', (evt) => {
  97.     pressed = false;
  98.   });
  100.   const ctrl = document.querySelector('#zwwctrl');
  101.   ctrl.addEventListener('mousedown', (evt) => {
  102.     const target = evt.target;
  103.     if(target.tagName === 'BUTTON') {
  104.       layer.dispatchEvent('buttonDown', {buttonId: target.id}, true, true);
  105.     }
  106.   });
  107.   document.documentElement.addEventListener('mouseup', (evt) => {
  108.     layer.dispatchEvent('buttonUp', {}, true, true);
  109.   });
  110. }())

元素和绘图事件

spritejs提供几个系统事件，包括append, remove, update, beforedraw, afterdraw, preload，这些系统事件的触发时机如下：

事件类型事件参数事件说明
append{parent, zOrder}当元素被append到layer上时触发
remove{parent, zOrder}当元素被从layer上remove时触发
update{context, target, renderTime, fromCache}当元素被重新绘制时触发，发生重绘操作有可能是元素本身属性发生改变，也有可能是其他元素属性改变需要重绘，影响到当前元素。target是要绘制的元素，renderTime是当前layer的timeline的时间，fromCache为true，则说明元素缓存未失效
beforedraw{context, target, renderTime, fromCache}当元素被重新绘制时触发，发生重绘操作有可能是元素本身属性发生改变，也有可能是其他元素属性改变需要重绘，影响到当前元素。target是要绘制的元素，renderTime是当前layer的timeline的时间，fromCache为true，则说明元素缓存未失效
afterdraw{context, target, renderTime, fromCache}当元素被重新绘制时触发，发生重绘操作有可能是元素本身属性发生改变，也有可能是其他元素属性改变需要重绘，影响到当前元素。target是要绘制的元素，renderTime是当前layer的timeline的时间，fromCache为true，则说明元素缓存未失效
preload{target, loaded, resources}这个事件只在scene预加载资源时触发，target是当前scene，loaded是已经加载的资源，resources是需要加载的所有资源

beforedraw、afterdraw和update的时机一次是先beforedraw，然后绘制精灵到缓存canvas，然后afterdraw，然后将缓存canvas绘制到输出canvas，然后是update。

事件与自定义事件 - 图4

利用afterdraw来处理图片，可以实现更灵活的滤镜。

  1. ;(async function () {
  2.   const scene = new Scene('#afterdraw', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  3.   const layer = scene.layer();
  5.   await scene.preload({
  6.     id: 'beauty',
  7.     src: 'https://p0.ssl.qhimg.com/t01300d8189b2edf8ca.jpg',
  8.   });
  10.   const image = new Sprite('beauty');
  11.   image.attr({
  12.     anchor: [0.5, 0.5],
  13.     pos: [770, 300],
  14.     scale: [-0.8, 0.8],
  15.     // bgcolor: 'red',
  16.   });
  17.   layer.append(image);
  19.   image.on('afterdraw', ({target, context}) => {
  20.     const [x, y, width, height] = target.renderRect;
  21.     const imageData = context.getImageData(x, y, width, height);
  22.     const [cx, cy] = [width / 2, height / 2];
  24.     for(let i = 0; i < imageData.data.length; i += 4) {
  25.       const x = (i / 4) % width,
  26.         y = Math.floor((i / 4) / width);
  28.       const dist = Math.sqrt((cx - x) ** 2 + (cy - y) ** 2);
  29.       imageData.data[i + 3] = 255 - Math.round(255 * dist / 600);
  30.     }
  31.     context.putImageData(imageData, x, y);
  32.   });
  33. }())

scene事件代理

DOM基本事件实际上是通过scene代理给sprite元素的，我们可以通过scene的delegateEvent方法代理新的事件。如果结合元素的pointCollison检测，可以做一些有趣的事情。

事件与自定义事件 - 图5

注意为了避免污染原生的事件参数，spritejs代理的事件，要拿到原始事件的参数，需要通过event.originalEvent获得

  1. const scene = new Scene('#event-delegate', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. class KeyButton extends Label {
  5.   pointCollision(evt) {
  6.     return evt.originalEvent.key === this.text;
  7.   }
  8. }
  9. KeyButton.defineAttributes({
  10.   init(attr) {
  11.     attr.setDefault({
  12.       font: '42px Arial',
  13.       border: {width: 4, color: 'black', style: 'solid'},
  14.       width: 50,
  15.       height: 50,
  16.       anchor: [0.5, 0.5],
  17.       textAlign: 'center',
  18.       lineHeight: 50,
  19.     });
  20.   },
  21. });
  23. const keys = [
  24.   'qwertyuiop',
  25.   'asdfghjkl',
  26.   'zxcvbnm',
  27. ];
  28. for(let i = 0; i < 3; i++) {
  29.   const keyButtons = [...keys[i]];
  30.   for(let j = 0; j < keyButtons.length; j++) {
  31.     const key = new KeyButton(keyButtons[j]);
  32.     key.attr({
  33.       pos: [250 + j * 80, 200 + i * 100],
  34.     });
  35.     key.on('keydown', (evt) => {
  36.       key.attr({
  37.         bgcolor: 'grey',
  38.         fillColor: 'white',
  39.       });
  40.     });
  41.     key.on('keyup', (evt) => {
  42.       key.attr({
  43.         bgcolor: 'transparent',
  44.         fillColor: 'black',
  45.       });
  46.     });
  47.     layer.append(key);
  48.   }
  49. }
  51. const label = new Label('轻敲键盘');
  52. label.attr({
  53.   anchor: [0.5, 0],
  54.   pos: [770, 50],
  55.   font: '42px Arial',
  56. });
  57. layer.append(label);
  59. scene.delegateEvent('keydown', document);
  60. scene.delegateEvent('keyup', document);

屏蔽代理给layer的事件

由于Scene默认代理了几乎所有的mouse、touch事件，这些事件都会被传递给layer，并排发给layer下的所有元素。如果layer的元素很多的话，这也会造成一定的性能开销。

假如明确当前layer不需要响应事件，可以将layer的handleEvent属性设置为false，这样的话scene就不会把事件传给这个layer。不过在layer和layer之下的元素上主动调用dispatchEvent以及前面提到的系统事件还是会正常触发。

  1. const layer = scene.layer('fglayer', {handleEvent: true})