自定义元素

实际上我们在前面一些例子里已经看到过，我们能够继承Sprite一系列类来扩展新的精灵类型。很多例子里我们创建了一些简单的精灵类型。现在我们尝试创建一类更复杂的UI元素。

创建新的精灵类型 - 图1

我们可以很容易制作一组进度条UI组件，在这里我简单写了一个可以有三种展现类型的ProgressBar类（当然也可以将它拆分成3个不同的子类），可以看到通过spritejs实现UI组件是一件很容易的事情。

  1. const scene = new Scene('#progressbar', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. class ProgressBar extends Sprite {
  5.   get contentSize() {
  6.     let [width, height] = this.attr('size');
  7.     const {slotLength, slotWidth, type} = this.attr();
  9.     if(type === 'bar') {
  10.       if(width === '') {
  11.         width = slotLength;
  12.       }
  13.       if(height === '') {
  14.         height = slotWidth;
  15.       }
  16.     } else if(type === 'circle') {
  17.       if(width === '') {
  18.         width = Math.round(slotLength / Math.PI + slotWidth);
  19.       }
  20.       if(height === '') {
  21.         height = Math.round(slotLength / Math.PI + slotWidth);
  22.       }
  23.     } else if(type === 'hourglass') {
  24.       if(width === '') {
  25.         width = slotWidth;
  26.       }
  27.       if(height === '') {
  28.         height = slotLength;
  29.       }
  30.     }
  31.     return [width, height];
  32.   }
  34.   render(t, context) {
  35.     super.render(t, context);
  36.     const progress = this.attr('progress'),
  37.       slotColor = this.attr('slotColor'),
  38.       progressColor = this.attr('progressColor'),
  39.       type = this.attr('type');
  41.     const p = progress / 100;
  43.     const [width, height] = this.contentSize;
  45.     if(type === 'bar') {
  46.       context.beginPath();
  47.       context.rect(0, 0, width, height);
  48.       context.fillStyle = slotColor;
  49.       context.fill();
  51.       const progressRect = [0, 0, width * p, height];
  52.       context.beginPath();
  53.       context.rect(...progressRect);
  54.       context.fillStyle = progressColor;
  55.       context.fill();
  56.     } else if(type === 'circle') {
  57.       const slotWidth = this.attr('slotWidth');
  58.       const r = width / 2;
  60.       context.beginPath();
  61.       context.arc(r, r, r - slotWidth / 2, 0, 2 * Math.PI);
  62.       context.lineWidth = slotWidth;
  63.       context.strokeStyle = slotColor;
  64.       context.stroke();
  66.       context.beginPath();
  67.       context.arc(r, r, r - slotWidth / 2, -0.5 * Math.PI, (2 * p - 0.5) * Math.PI);
  68.       context.lineWidth = slotWidth;
  69.       context.strokeStyle = progressColor;
  70.       context.stroke();
  71.     } else if(type === 'hourglass') {
  72.       context.beginPath();
  73.       context.moveTo(width / 2, height / 2);
  74.       context.lineTo(0, 0);
  75.       context.lineTo(width, 0);
  76.       context.closePath();
  77.       context.fillStyle = slotColor;
  78.       context.fill();
  80.       context.beginPath();
  81.       context.moveTo(width / 2, height / 2);
  82.       context.lineTo(0, height);
  83.       context.lineTo(width, height);
  84.       context.closePath();
  85.       context.fillStyle = progressColor;
  86.       context.fill();
  88.       const dx = (1 - p ** 2) * width / 2,
  89.         dy = (1 - p ** 2) * height / 2;
  91.       context.beginPath();
  92.       context.moveTo(width / 2, height / 2);
  93.       context.lineTo(width / 2 - dx, height / 2 - dy);
  94.       context.lineTo(width / 2 + dx, height / 2 - dy);
  95.       context.closePath();
  96.       context.fillStyle = progressColor;
  97.       context.fill();
  99.       context.beginPath();
  100.       context.moveTo(width / 2, height / 2);
  101.       context.lineTo(width / 2 - dx, height / 2 + dy);
  102.       context.lineTo(width / 2 + dx, height / 2 + dy);
  103.       context.closePath();
  104.       context.fillStyle = slotColor;
  105.       context.fill();
  106.     }
  107.   }
  108. }
  110. ProgressBar.defineAttributes({
  111.   init(attr) {
  112.     attr.setDefault({
  113.       progress: 0,
  114.       slotColor: 'grey',
  115.       progressColor: 'green',
  116.       type: 'bar', // bar, circle, hourglass
  117.       slotLength: 200,
  118.       slotWidth: 25,
  119.     });
  120.   },
  121.   progress(attr, val) {
  122.     attr.clearCache();
  123.     attr.set('progress', val);
  124.   },
  125.   slotColor(attr, val) {
  126.     attr.clearCache();
  127.     attr.set('slotColor', parseColorString(val));
  128.   },
  129.   progressColor(attr, val) {
  130.     attr.clearCache();
  131.     attr.set('progressColor', parseColorString(val));
  132.   },
  133.   type(attr, val) {
  134.     attr.clearCache();
  135.     attr.set('type', val);
  136.   },
  137.   slotLength(attr, val) {
  138.     attr.clearCache();
  139.     attr.set('slotLength', val);
  140.   },
  141.   slotWidth(attr, val) {
  142.     attr.clearCache();
  143.     attr.set('slotWidth', val);
  144.   },
  145. });
  147. const p1 = new ProgressBar();
  148. p1.attr({
  149.   anchor: [0.5, 0.5],
  150.   progress: 45,
  151.   pos: [250, 300],
  152.   slotLength: 500,
  153.   type: 'circle',
  154. });
  155. layer.append(p1);
  157. p1.animate([
  158.   {progress: 0},
  159.   {progress: 100},
  160. ], {
  161.   duration: 10000,
  162.   iterations: Infinity,
  163.   easing: 'ease-in-out',
  164. });
  166. const label = new Label('0%');
  167. label.attr({
  168.   anchor: [0.5, 0.5],
  169.   pos: [250, 300],
  170.   font: '36px Arial',
  171. });
  172. layer.append(label);
  174. p1.on('update', (evt) => {
  175.   const progress = evt.target.attr('progress');
  176.   label.text = `${progress.toFixed(0)}%`;
  177. });
  179. const p2 = new ProgressBar();
  180. p2.attr({
  181.   anchor: [0.5, 0.5],
  182.   progress: 0,
  183.   pos: [770, 300],
  184.   slotLength: 300,
  185.   slotWidth: 45,
  186.   progressColor: 'rgb(192,0,0)',
  187.   borderRadius: 20,
  188. });
  189. layer.append(p2);
  191. Effects.progressColor = Effects.color;
  192. Effects.slotColor = Effects.color;
  194. p2.animate([
  195.   {progress: 0, progressColor: 'rgb(192,0,0)'},
  196.   {progress: 50, progressColor: 'rgb(192, 192, 0)'},
  197.   {progress: 100, progressColor: 'rgb(0, 192, 0)'},
  198. ], {
  199.   duration: 5000,
  200.   iterations: Infinity,
  201. });
  203. const p3 = new ProgressBar();
  204. p3.attr({
  205.   anchor: [0.5, 0.5],
  206.   progress: 0.5,
  207.   pos: [1150, 300],
  208.   slotLength: 100,
  209.   slotWidth: 50,
  210.   progressColor: '#cc6',
  211.   type: 'hourglass',
  212. });
  213. layer.append(p3);
  215. p3.attr({
  216.   progress: 0.5,
  217. });
  218. p3.animate([
  219.   {progress: 0},
  220.   {progress: 100},
  221. ], {
  222.   duration: 3000,
  223.   iterations: Infinity,
  224. });

我们可以看到，要扩展Sprite类，只需要继承Sprite、Label、Path或Group这四个类，通过静态方法defineAttributes定义一些新的属性。

  1. Sprite.defineAttributes({
  2.   init(attr) {
  3.     // 这是构造函数，在这里可以通过 setDefault 给属性设置初始值
  4.   },
  5.   foo(attr, val) {
  6.     // 添加一个叫做 foo 的属性
  7.     // 如果不需要其他处理，只需要将它保存在 attribute 对象中即可
  8.     attr.set('foo', val)
  9.     attr.clearCache()  // 如果这个属性需要清缓存，则调用 clearCache，什么属性需要清缓存，具体见“缓存策略”一节
  10.   }
  11. })

扩展了属性，我们要实现继承类的一些方法。一般来说，我们只要重写get contentSize和render方法，前者负责在不给元素设置size的情况下计算元素的大小，后者负责元素具体的渲染过程。

  1. class MyElement extends Sprite {
  2.   get contentSize() {
  3.     let [width, height] = this.attr('size')
  4.     if(width === '') {
  5.       // 当宽度为默认值时，处理
  6.     }
  7.     if(height === '') {
  8.       // 当宽度为默认值时，处理
  9.     }
  10.     return [width, height]
  11.   }
  12.   render(t, context) {
  13.     super.render(t, context)
  15.     // 处理具体绘制过程
  16.   }
  17. }

这样我们就可以很方便地扩展我们需要的新元素了。

除了initAttributes方法外，如果我们通过babel和webpack编译，我们还可以使用decorate来定义属性，我们可以继承Sprite.Attr类。

定义属性特殊操作

我们定义元素属性的时候，需要理解和使用一些概念：

  • reflow: 当定义了一个新属性，该属性改变会引起元素的contentSize、clientSize、offsetSize等box大小变化的时候，由于spritejs默认缓存了这些属性计算值，因此需要显式调用attr.clearFlow()来通知引擎清除这些元素缓存的值。

  • cache: 当定义了一个新属性，该属性改变会引起元素的外观呈现发生变化（包括改变size、color、border、shape等）时，由于spritejs缓存策略可能会将元素缓存，因此需要显式调用attr.clearCache()来通知引擎清除缓存。在大部分情况下，元素的属性都引起外观改变（除了pos、transform、layout相关的这类只做位置变换的属性），因此通常情况下自定义的属性都要进行clearCache操作。

  • quietSet: 如果定义一个属性，既不影响元素外观，又不影响box大小（如Path的bounding属性只影响事件的hit判断），那么可以使用attr.quietSet()来代替attr.set()设置元素属性，这样元素的这个属性变化的时候，不会通知layer做update操作，能够减少消耗，提升性能。

  • relayout: 当继承一个Group，定义的新属性如果是layout相关的属性，那么需要显式调用attr.subject.relayout()来通知元素清除layout，这样在绘制的时候才能重新计算layout。

插件封装

我们可以自定义spritejs的插件库，spritejs提供了use操作，能够载入并初始化插件。

use(component, options, merge = true)方法支持三个参数，返回插件对象。

  • component 要使用的组件，该组件暴露一个function或者{install:function}的接口。
  • options 传给接口的配置。
  • merge 默认值true，将该接口返回的内容merge到spritejs对象上。
  1. import * as MyElement from 'my-element';
  2. spritejs.use(MyElement);
  4. const el = new spritejs.MyElement();
  6. ...

MyElement插件的定义

  1. export function install({Sprite, registerNodeType}, options) {
  2.   class MyAttr extends Sprite.Attr {
  3.     constructor() {
  4.       this.setDefault({
  5.         // 设置默认属性
  6.       })
  7.     }
  8.     @attr
  9.     foo(val) {
  10.       this.set('foo', val)
  11.       this.clearCache()
  12.     }
  13.   }
  15.   class MyElement extends Sprite {
  16.     ...
  17.   }
  20.   registerNodeType('myelement', MyElement); // 定义新的nodeType名为myelement
  21.   return {MyElement}
  22. }

注意由于spritejs使用babel-transform-decorators-runtime和babel-decorators-runtime两个扩展来支持ES6的decorators特性，所以需要安装这两个依赖：

  1. npm i -D babel-transform-decorators-runtime
  2. npm i -S babel-decorators-runtime

对应的.babelrc推荐配置为：

  1. {
  2.   "presets": ["env"],
  3.   "plugins": ["transform-runtime",
  4.               "transform-decorators-runtime",
  5.               "transform-class-properties"]
  6. }

一个例子，通过继承Group类实现矢量图形的绘制。