响应 DOM 事件

Scene 自动代理了 mouse 和 touch 相关事件，因此要监听这些事件非常简单，直接使用 spirte.on 方法即可。

移动鼠标：

行为 - 图1

  1. const scene = new Scene('#dom-events', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer('fglayer');
  4. const s1 = new Sprite();
  5. s1.attr({
  6.   anchor: [0.5, 0.5],
  7.   pos: [770, 300],
  8.   size: [300, 300],
  9.   rotate: 45,
  10.   bgcolor: '#3c7',
  11. });
  13. layer.append(s1);
  15. s1.on('mouseenter', (evt) => {
  16.   s1.attr('border', [4, 'blue']);
  17. });
  18. s1.on('mouseleave', (evt) => {
  19.   s1.attr('border', [0, '']);
  20. });
  22. const anchorCross = new Path('M0,10H10,20M10,0V10,20');
  23. anchorCross.attr({
  24.   anchor: [0.5, 0.5],
  25.   pos: [770, 300],
  26.   strokeColor: 'red',
  27.   rotate: 45,
  28.   lineWidth: 4,
  29. });
  31. layer.append(anchorCross);
  33. const label = new Label('鼠标位置：');
  35. label.attr({
  36.   pos: [20, 50],
  37.   font: '32px Arial',
  38.   lineHeight: 56,
  39. });
  41. layer.append(label);
  43. layer.on('mousemove', (evt) => {
  44.   const {x, y, targetSprites} = evt;
  46.   label.text = `鼠标位置：\n相对于 layer: ${Math.round(x)}, ${Math.round(y)}`;
  48.   if(targetSprites.length && targetSprites.includes(s1)) {
  49.     const [offsetX, offsetY] = s1.pointToOffset(x, y).map(Math.round);
  50.     label.text += `\n相对于元素：${offsetX}, ${offsetY}`;
  51.   }
  52. });

spritejs的事件触发规则是基于坐标位置（主要是mouse和touch坐标），在事件触发的坐标位置上所有精灵元素都会触发相应事件，事件触发的顺序是按照精灵的层级关系，zIndex大的元素先触发，如果两个元素的zIndex相同，那么比较zOrder，即元素添加到layer的次序，zOrder大或者说元素添加次序较晚的先触发。当所有应当触发事件的元素触发完成之后，最后是layer的事件被触发。。当layer的事件触发时，从layer的事件参数中可以拿到targetSprites数组，表示当前layer中之前已经触发过的所有元素的。

上面的例子里，我们通过layer的mousemove事件的targetSprites参数来判断s1是否被触发，如果触发，通过evt.x、evt.y拿到鼠标相对于layer的坐标，然后再通过s1.pointToOffset，可以得到鼠标相对于s1元素的相对坐标（以anchor point为坐标原点）。不过这样做有点麻烦，我们可以直接在s1上也注册mousemove事件，这样我们可以通过事件参数的offsetX、offsetY直接拿到鼠标的相对位置。但是，我们需要解决一个问题——

阻止事件继续传播

我们可以同时在layer和s1上注册mousemove事件，以修改label的提示文字。但是，如果鼠标停留在s1上时，我们不能让layer的mousemove事件仍被触发，否则的话文字就会被覆盖。在sprite提供的事件参数中，stopDispatch()方法正是用来阻止事件从当前的元素向下一个同级元素传播的。利用它就可以实现元素之间的遮挡。

行为 - 图2

  1. const scene = new Scene('#dom-events-stop-dispatch', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer('fglayer');
  4. const s1 = new Sprite();
  5. s1.attr({
  6.   anchor: [0.5, 0.5],
  7.   pos: [770, 300],
  8.   size: [300, 300],
  9.   rotate: 45,
  10.   bgcolor: '#3c7',
  11. });
  13. layer.append(s1);
  15. s1.on('mouseenter', (evt) => {
  16.   s1.attr('border', [4, 'blue']);
  17. });
  18. s1.on('mouseleave', (evt) => {
  19.   s1.attr('border', [0, '']);
  20. });
  22. const anchorCross = new Path('M0,10H10,20M10,0V10,20');
  23. anchorCross.attr({
  24.   anchor: [0.5, 0.5],
  25.   pos: [770, 300],
  26.   strokeColor: 'red',
  27.   rotate: 45,
  28.   lineWidth: 4,
  29. });
  31. layer.append(anchorCross);
  33. const label = new Label('鼠标位置：');
  35. label.attr({
  36.   pos: [20, 50],
  37.   font: '32px Arial',
  38.   lineHeight: 56,
  39. });
  41. layer.append(label);
  43. layer.on('mousemove', (evt) => {
  44.   const {x, y} = evt;
  46.   label.text = `鼠标位置：\n相对于 layer: ${Math.round(x)}, ${Math.round(y)}`;
  47. });
  49. s1.on('mousemove', (evt) => {
  50.   const {x, y, offsetX, offsetY} = evt;
  51.   label.text = `鼠标位置：\n相对于 layer: ${Math.round(x)}, ${Math.round(y)}\n相对于元素：${Math.round(offsetX)}, ${Math.round(offsetY)}`;
  53.   evt.stopDispatch();
  54. });

利用 zIndex 和 stopDispatch 遮挡

比如我们可以利用改变元素的zIndex和stopDispatch来实现元素间的拖拽。

注意下面的例子中stopDispatch()并不会阻止不同级的元素，因此阻止掉sprite元素的mousemove事件，并不会同时阻止掉它所在layer的mousemove事件。

行为 - 图3

  1. const scene = new Scene('#dragdrop', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer('fglayer');
  3. let zIndex = 1;
  5. function draggable(sprite) {
  6.   if(sprite.isDraggable) return;
  8.   sprite.isDraggable = true;
  10.   let x0,
  11.     y0,
  12.     startPos;
  14.   function onMouseMove(evt) {
  15.     const dx = evt.x - x0,
  16.       dy = evt.y - y0;
  18.     sprite.attr('pos', [startPos[0] + dx, startPos[1] + dy]);
  19.     evt.stopDispatch();
  20.   }
  22.   sprite.on('mouseenter', (evt) => {
  23.     sprite.attr('border', {width: 6, color: 'blue'});
  24.   });
  25.   sprite.on('mouseleave', (evt) => {
  26.     sprite.attr('border', {width: 0});
  27.   });
  29.   sprite.on('mousedown', (evt) => {
  30.     x0 = evt.x;
  31.     y0 = evt.y;
  32.     startPos = sprite.attr('pos');
  33.     sprite.attr('zIndex', zIndex++);
  34.     sprite.off('mousemove', onMouseMove);
  35.     sprite.setMouseCapture();
  36.     sprite.on('mousemove', onMouseMove);
  37.     evt.stopDispatch();
  38.   }).on('mouseup', (evt) => {
  39.     sprite.off('mousemove', onMouseMove);
  40.     sprite.releaseMouseCapture();
  41.   });
  43.   return sprite;
  44. }
  46. const s1 = new Sprite();
  47. s1.attr({
  48.   anchor: [0.5, 0.5],
  49.   pos: [770, 300],
  50.   size: [200, 200],
  51.   rotate: 45,
  52.   bgcolor: '#3c7',
  53. });
  55. const s2 = new Sprite();
  56. s2.attr({
  57.   anchor: [0.5, 0.5],
  58.   pos: [270, 300],
  59.   size: [200, 200],
  60.   bgcolor: '#c37',
  61. });
  63. const s3 = new Sprite();
  64. s3.attr({
  65.   anchor: [0.5, 0.5],
  66.   pos: [1270, 300],
  67.   size: [200, 200],
  68.   bgcolor: '#73c',
  69. });
  72. layer.append(...[s1, s2, s3].map(draggable));
  74. layer.on('mousemove', (evt) => {
  75.   if(evt.targetSprites.some(target => target.isDraggable)) {
  76.     scene.container.style.cursor = 'move';
  77.   } else {
  78.     scene.container.style.cursor = 'default';
  79.   }
  80. });