CSS 样式

SpriteJS从v2.22开始支持使用CSS。在HTML页面上可以加载CSS，使用CSS3选择器给SpriteJS元素添加样式。

要支持CSS样式，只要在创建Scene时，将参数useDocumentCSS设置为true。

const scene = new Scene('#css-basic', {
  viewport: ['auto', 'auto'],
  resolution: [1540, 600],
  useDocumentCSS: true,
});

  sprite.circle {
    width: 100px;
    height: 100px;
    --sprite-anchor: 0.5;
    border-radius: 50px;
  }
  sprite.red {
    background: red;
    --sprite-pos: 300, 300;
  }
  sprite.blue {
    background: blue;
    --sprite-pos: 600, 300;
  }

const scene = new Scene('#css-basic', {
  viewport: ['auto', 'auto'],
  resolution: [1540, 600],
  useDocumentCSS: true,
});
const layer = scene.layer();
const s1 = new Sprite({
  class: 'red circle',
});
const s2 = new Sprite({
  class: 'blue circle',
});
layer.append(s1, s2);

注意：由于浏览器同源策略限制，ScriptJS不能读取跨域的css文件，只能是同域下的css文件或者inline css。

SpriteJS支持绝大多数css3选择器，但是不支持伪元素，不支持:hover,:atcive,:focus,:link,:visited,:lang等伪类。

SpriteJS选择器可以和DOM元素混用，例如：

body, 
group {
  background-color: blue;
  --sprite-pos: 100, 100;
}

上面的代码会将页面body和group的背景色同时设置为蓝色，当然，body会忽略—sprite-pos这个SpriteJS专用的规则。

SpriteJS支持一部分原生CSS属性以及另一部分只特殊的属性，特殊属性以—sprite-开头，目前支持的属性如下：

SpriteJS支持CSS Transition，所以我们可以添加CSS过度动画。你可以将鼠标移动到下面的红蓝小圆点上：

  sprite.circle {
    width: 100px;
    height: 100px;
    --sprite-anchor: 0.5;
    border-radius: 50px;
    --sprite-border: solid 3px green;
  }
  sprite.red {
    background: red;
    --sprite-pos: 300, 300;
  }
  sprite.blue {
    background: blue;
    --sprite-pos: 600, 300;
  }
  sprite.orange {
    background: orange;
    --sprite-pos: 300, 300;
    transition: all 0.2s;
  }
  sprite.cyan {
    background: cyan;
    --sprite-pos: 600, 300;
    transition: all 0.2s;
  }

const scene = new Scene('#css-transition', {
  viewport: ['auto', 'auto'],
  resolution: [1540, 600],
  useDocumentCSS: true,
});
const layer = scene.layer();
const s1 = new Sprite({
  class: 'red circle',
});
const s2 = new Sprite({
  class: 'blue circle',
});
layer.append(s1, s2);
s1.on('mouseenter', () => {
  s1.attr('class', 'orange circle');
});
s1.on('mouseleave', () => {
  s1.attr('class', 'red circle');
});
window.s1 = s1;
s2.on('mouseenter', () => {
  s2.attr('class', 'cyan circle');
});
s2.on('mouseleave', () => {
  s2.attr('class', 'blue circle');
});

如果你想要某个css规则只能运用于DOM元素，可以设置一个属性—sprite-ignore: 1。

.only-dom {
  --sprite-ignore: 1;
}

SpriteJS的CSS样式限制：

由于考虑性能问题，因此SpriteJS只会在初始化的时候自动加载当前页面上的CSS文件，如果你希望在程序执行过程中动态加载的CSS规则也应用到SpriteJS元素，可以手动调用：

// 在动态加载的css完成之后
spritejs.stylesheet.fromDocumentCSS();
scene.children[0].updateStyles();

同样出于性能考虑，SpriteJS应用css样式规则采用的是异步方式，因此给SpriteJS设置class或其他规则，如有导致样式变化，该变化在元素属性上不会立即体现，而是在下一次render时才会体现。

sprite.attr('class', 'myclass');
await layer.prepareRender(); // 经过一次render之后
console.log(sprite.attributes); // sprite新的样式属性才会生效