Methods like OBBCollision aren't documented because these super classes aren't documented. It would be very useful to have them added to the API docs. :)

如果在没开服务器的情况下，我把textures设置为一张本地图片的url时，会报跨域错误，不知道目前有没有解决办法，之后会不会考虑一下使用imgDataUrl作为参数？

提一个不知道是不是 bug 的问题。。。

下面是 DSL：

<s-sprite size="400 400" pos="1000 100" border="4 #c7c" border-radius="300"></s-sprite>

JS（伪代码？） 大概如下：

const sprite = new Sprite()
sprite.size = [400, 400]
sprite.borderRadius = 300
sprite.borderColor = '#c7c'
sprite.borderWitdh = 4

结果如下图：

说是问题吧，确实是个问题。。可是严格来说，确实不算 bug，只不过和正常的 DOM & CSS 那一套不太一致而已。。。

影响mouseenter和mouseleave

Thanks for author ! It's a very nice frame.

My projects is using PIXI, I'd like to replace the Sprite with Sprite.js. Can it combine with PIXI.js?

我console.log了layer，对于这种数据如何保存到后端，大佬们能给个思路吗？

看到attrjs源码里只有translate、rotate、scale、skew、和matrix的2d变换，那么像rotate3d、translate3d、skew3d、perspective等或者rotateX，translateY等该如何实现，是只能引入threejs这样的库吗

有个项目要加载很多图片，所以加载了30秒后出现了
Uncaught (in promise) Error: load img timeout

于是我找到了 node_modules\spritejs\lib\resource.js 里面修改了 var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 30000;的时长，但是这样的话不是一个很好的解决办法，所以我再应用层该怎么设置。

官方文档的示例无法工作：

code from official document doesn't work.

const imgUrl = 'https://p4.ssl.qhimg.com/t01423053c4cb748581.jpg'
const scene = new Scene('#demo-quickStart', {viewport: ['auto', 'auto'], resolution: [1540, 600]})
const group = new Group()
const arcD = 'M0 0L 50 0A50 50 0 0 1 43.3 25z'
const layer = scene.layer();

group.attr({
  size: [300, 300],
  pos: [770, 300],
  anchor: [0.5, 0.5],
})
layer.append(group)

for(let i = 0; i < 6; i++) {
  const arc = new Path()
  arc.attr({
    path: {
      d:arcD,
      transform: {scale: 3, rotate: -15},
      trim: true,
    },
    pos: [150, 150],
    anchor: [0, 0.5],
    strokeColor: 'red',
    rotate: i * 60,
  })
  arc.attr('fillColor', `rgb(${i * 139 % 255}, 0, 0)`)
  group.append(arc)
}

need some modification

const imgUrl = 'https://p4.ssl.qhimg.com/t01423053c4cb748581.jpg'
const scene = new Scene('#demo-quickStart', {viewport: ['auto', 'auto'], resolution: [1540, 600]})
const group = new Group()
const arcD = 'M0 0L 50 0A50 50 0 0 1 43.3 25z'
const layer = scene.layer();

group.attr({
  size: [300, 300],
  pos: [770, 300],
  anchor: [0.5, 0.5],
})
layer.append(group)

for(let i = 0; i < 6; i++) {
  const arc = new Path(arcD)
  arc.attr({
    path: {
      transform: {scale: 3, rotate: -15},
      trim: true,
    },
    pos: [150, 150],
    anchor: [0, 0.5],
    strokeColor: 'red',
    rotate: i * 60,
  })
  arc.attr('fillColor', `rgb(${i * 139 % 255}, 0, 0)`)
  group.append(arc)
}

速查表->Layer->toLocalPos()
toLocalPos(x, y) 将相对于layer所在canvas的相对坐标### 还算成相对于layer的坐标
换算成

不知道这个算不算bug,path 线条加动画会自动闭合。我希望不闭合，可以处理么
https://codepen.io/anon/pen/BqwbYW

貌似是因为 默认 import 引入的是 es6版本，不是 编译完的版本，请问，这样的话，babel需要如何配置，安装哪些插件，才能在vue中使用sprite.js

大佬，文档里面说支持svg-path。
stroke-linecap转换后是lineCap。请问stroke-dasharray转换后是什么呢，我试了dasharray、dashArray都不行。

//代码如下：
if (!this.walk.animate) {
//没有调用过的时候
var a = (0, _index.walk)();
this.walk.animate = this.animate(a.frame, a.opt);
this.currentStatus = Object.assign(this.currentStatus, this.STATUS.walk, { type: "walk" });
} else if (this.walk.animate && this.walk.animate.playState !== "running") {
// console.log("pase!!!!!!!!")
//调用过，并且已经停止
this.walk.animate.timeline.currentTime = 0;//报错的行
this.walk.animate.pause(); //必须pause后才能play ;;;
this.walk.animate.play();
this.currentStatus = Object.assign(this.currentStatus, this.STATUS.walk, { type: "walk" });
}

报错如下：
Uncaught TypeError: Cannot read property 'resolve' of undefined
at (anonymous function).reverseTimerID.timeline.setTimeout.delay (http://localhost:3000/static/js/spritejs.js:3761:34)
at spritejs.js:667
at Array.forEach ()
at Timeline.set (spritejs.js:651)
at Sprite.walk (tree.js:840)
at Object.Action (tree.js:2606)
at Object.parallel (tree.js:2562)
at Object.Sequence (tree.js:2545)
at Object.probability (tree.js:2588)
at Object.Filter (tree.js:2650)

请问这个是什么原因，我经常会遇到这个问题。但是不知道是什么回事

p1.on('touchstart', evt => {
      startX = evt.layerX
      startY = evt.layerY
      sprites = p1.attr('pos')
    })
    p1.on('touchmove', evt => {
      const dx = evt.layerX - startX,
        dy = evt.layerY - startY
      p1.attr({
        'pos': [sprites[0] + dx, sprites[1] + dy]
      })
    })

在touchstart 保存 起始位置 移动时监听 位置变化
精灵移动慢些还好 如果 移动快了 会出现丢帧 的 情况
有没有 办法 优化啊?

a2.attr({ rotate:10, filter:{ blur:'10px' }, shadow: { }, });

这样的话元素会消失，只看得到到阴影。

sprite.on('update', (evt) => {
rangeBar.value = animation.progress * 100
})

如果在evt中直接包含 progress 或者 animation.progress 或者 animation ，从使用的角度来说，会更方便。

如题

请问一下，与 fabric.js有何异同呢？

问题：
load多个JSON文件的时候后面的json里面的图片无法识别

下面源码：
grenadeJSON2里面的图片找不到
textures: "Grenade_000.png", ///直接在项目根目录找这个文件

已经确认的确有这个图片

const grenadePNG = require("../static/sprite/dead.png"),
grenadeJSON = require("../static/sprite/dead.json");
//第二次加载json和精灵片
` const grenadePNG2 = require("../static/sprite/grenade-0.png"),
grenadeJSON2 = require("../static/sprite/grenade.json");

await scene.preload([grenadePNG, grenadeJSON,grenadePNG2, grenadeJSON2]);  

//,grenadePNG,grenadeJSON
// await load();
const layer = scene.layer();
const group = new Group();
group.attr({
pos: [10, 0],
size: [321, 484],
anchor: [0, 0],
border: {
style: "solid",
width: 6,
color: '#37c',
}
});
const abcd = new Sprite();
abcd.attr({
textures: "Dead (1).png",
anchor: [0, 0],
size: [321, 450],
x: -115 / 2,
y: -26,
border: {
style: "solid",
width: 1,
color:"green"
}
});

const grenade = new Sprite();
grenade.attr({
textures: "Grenade_000.png", ///直接在项目根目录找这个文件
anchor: [0, 0],
size: [321, 450],
x: 100,
y: -26,
border: {
style: "solid",
width: 1,
color:"green"
}
});

group.append(abcd);
group.append(grenade);
layer.append(group);`

Chrome浏览器下正常，但IE下，只能让内容渲染出来，但是无法触发点击，移入移出的事件。是本来就不考虑IE，还是我需要再配置哪些插件。

感觉目前的文档还不够详细，像Layer就没具体介绍。
然后是API文档，也是很简陋，可以的话增加点示例代码吧，而且还没有中文版的。

ios和pc流畅，安卓卡顿。有什么解决方案吗？

比如我写了一个load.js，里面是预加载，但是预加载完成的texture数据我不知道存在哪里，只能在异步function里面使用吗？我能不能在layer里面拿到这些加载完成的数据？

问题：
一个group里面的子弹sprite和另外一个group里面的怪物sprite碰撞了但是没有检测到
疑惑：
我需要做什么额外的配置么
还是不同group里面的sprite不能检测碰撞
感谢：
期待回复，非常谢谢。

源码
bullet.js(子弹):
const grenade = new Sprite();
export { grendeInit, PNG, JSON, grenade, shoot };

Grenade.js（人物和子弹放到一个group）:
import {grendeInit as bulltInit, PNG as bulltPng,JSON as bulltJSON,grenade as bulltGrenade,shoot as bulltShoot} from "../bullet/bullet.js"

const group = new Group();
const grenade = new Sprite();

group.append(grenade); //添加人物
group.append(bulltGrenade); //添加子弹

export { grendeInit, grenadePNG,grenadeJSON,grenade,shoot,group,bulltGrenade};

group.js（组合页面）:
import { grendeInit, grenadePNG, grenadeJSON,grenade,shoot, group as ggroup,bulltGrenade} from "./group/Grenade.js";;

//...
const scene = new Scene( ....
//...
const layer = scene.layer();
const group = new Group(); //包含怪物一个分组
//...
group.append(abcd);
layer.append(group);
layer.append(ggroup); //ggroup是包含子弹和人物的另外一个分组

//碰撞检测=======
const collision = function(obj, obj2) {
if (obj.OBBCollision(obj2)) {
console.log("中枪！疼!")

     }

}
layer.on('update', (evt) => {
//检测子弹和怪物abcd的碰撞
collision(bulltGrenade,abcd);
});

问题描述

使用最新的 1.15.0 （master 分支 readme 中提供的 cdn url）来跑 Path 的 demo，发现没有渲染出来。

相关 demo

1. 原文档demo地址：https://code.h5jun.com/nalu

2. 我的 demo 地址：https://code.h5jun.com/zami/

Recently, I am looking for a simple canvas library with bitmap font feature which is compatible with wechat mini app.

http://spritejs.org/#/ 我很好奇！！！

运行命令 npm test,32 passed,1 failed.报错信息如下：

使用yarn add spritejs引入
使用yarn start能正常使用
使用yarn build报错

yarn run v1.3.2
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

        ./node_modules/spritejs/src/spritejs.esm.js:7

Read more here: http://bit.ly/2tRViJ9

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

是否能改为es5的编译版本？

建议增加一个removeAllChildren方法，这样就不用去遍历所有子节点然后删除了，这种操作都是常有的，清空节点内所有子节点。
所以建议写在spritejs内部。

一开始遇到的问题

我一开始使用的scene配置

 const scene = new Scene('#plane', {
      resolution: [632, 421],
      viewport: ['auto', 'auto'],
});

这时候canvas的width、height与style里的width、height是一样的。

渲染的图片存在模糊的问题(左边是绘制的，右边是网页dom)

后面的解决方案

网上找了资料发现是因为高倍屏的缘故导致canvas模糊，需要乘设备像素比
于是修改了scene配置

 const scene = new Scene('#plane', {
      resolution: [1264, 842],
      viewport: ['auto', 'auto'],
});

并修改外部div的height和width

这时候显示倒是正常了，但是所有的sprite，label坐标和大小等等都要重新修改

真正的问题

spritejs有没有对针对高倍屏的相关配置可以简化这些操作？

http://spritejs.org/demo/#animations

http://spritejs.org/demo/#events 无法用wasd键盘控制飞行

windows系统下，yarn start / yarn doc 报错，Linux mac正常
Error occured while trying to proxy to: localhost:9090/

webpack-dev-server -d --quiet --port 9090 & http-server example -c-1 -p 9091 (node:56736) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56 parseQuery() will be replaced with getOptions() in the next major version of loader-utils. [HPM] Error occurred while trying to proxy request / from localhost:9090 to http://localhost:9091 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) [HPM] Error occurred while trying to proxy request /favicon.ico from localhost:9090 to http://localhost:9091 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

目前可以通过依次设置各个精灵的位置，使消失在舞台的精灵重新显示出来。请问有没有更好的办法，比如改变视口和scene的相对位置？

反馈下官网 D3 demo 中的一些细节 ——

链接：官网 D3 demo

原因：未知。（performance？bug？accuracy issue？）

example 01

鼠标快速移动时，从外部进入靠近边缘的圆圈，出现如下现象（问题：城市选中而省份却没选中）：

example 02

操作路径：空白 -> 甘肃 -> 武威 -> （停留一阵）-> (常规速度移动) 哈尔滨 -> 牡丹江 -> 浙江绍兴

example 03

操作方式：Mac 下选中江苏，然后滑动到另外一屏，接着滑回到页面移动鼠标至另一省份，如是操作再三即可出现类似如下效果。

SpriteJS 不支持RN么

问题

为 layer 设置 layer.timeline.playbackRate = 0 后，其中的 Group 动画以及 group 中的 sprites 动画并未停止。

预期

设置 layer.timeline.playbackRate = 0 后， group 自身动画以及 group 中的 sprites 动画应该都停下来。

demo

https://code.h5jun.com/vesif

后期有对typescript相关支持么，如添加类型描述文件等

首先感谢spritejs这个框架，目前已经写了两个比较有趣的项目了。

const scrawlLayer = this.scene.layer('scrawl', {autoRender: false});
// do something

this.scene.snapshot().then(res=>{
  // never run here
}).catch(e=>{
  // never run here too
})

这是在项目中偶然发现的，发现移除改配置或者在截图前移除该layer后，才可截图成功，具体bug原因等我这两天忙完了再看下

提一个不成熟的想法。
执行 npm install 时因为 node-canvas 的缘故常常失败。况且此种服务端渲染并非通用需求。建议逻辑独立成一个新的项目。

事件里面使用了startsWith

就是一下基础的UI组件，Button、List之类的组件

I have a sky with blinks stars to render which is able to scroll horizontally, but don't find anything about this.

如题

库版本：master分支的dist里的库文件

如题，mousedown事件的回调并没有在鼠标按下时触发，而是在弹起的时候触发了，
紧接着是mouseup事件触发。
是不是有bug？

追加：按下后拖动鼠标，再弹起鼠标，就不会有任何事件触发。

can you help me ?

现在我是用一个 createstage.js 来创建舞台，再index.js中引入 createstage.js

import {Scene} from 'spritejs';

console.log('in frame window height:' + window.innerHeight);
window.onload = function(){
    console.log('out frame window onloaded height:' + window.innerHeight); 
}
const stage = new Scene('#stage', {
    viewport: [750, 1334-110],  
    resolution: [750,1334-110],
    stickMode: '', 
    stickExtend :true,
}
);
const stageprop = {
    width:stage.resolution[0],
    height:stage.resolution[1],
};

export {stage,stageprop}

这样在场景页面我就能通过stageprop拿到场景的宽高，但是这个宽高其实是设计宽高，手机实际宽高window.innerHeight需要在window.onload里面拿的才是真实的，所以我想问有没有解决方法在window.onload之后再创建舞台？