Description
目前基本能还原transform。采取的方式是传递2d或者3d的matrix来更新transform。但是和别的东西联动起来有时有BUG。
-
目前SVG和Canvas的缺点是渲染的cropping切割问题,这是与AS3的最大兼容性问题:
举例,假如有一个 Shape 在坐标 (100,100),你绘制了一个
drawCircle(0,0,100)
(圆心在原点,半径为100的圆)那么,在AS3上你将看到一个完整的圆,而在Canvas或SVG上由于渲染层不能溢出,所以你只能看到圆的右下1/4。 -
为了解决Cropping问题,我们采取了一个一点也不机智的Hack:
在绘制SVG时,永远以 (0,0)放置SVG图层,但是在SVG图层里面放一个SVG组,绘制时绘制到SVG组里面,然后对整个组平移,这样就总能看到完整的圆了。
但是这有个BUG,就是如果把SVG图作为 child 添加到了一个 Sprite里面,那么SVG的相对坐标为(0,0)是相对父级对象的。而如果把这个Sprite放到 (100,100),把SVG放到Sprite里面的 (0,0) 则又只能看到1/4圆了。(图为半圆情况)
所以又机智的Hack了一下,即,每当SVG被当作子插入父级对象,则先向左平移SVG元素到相对于舞台的 (0,0),然后再把SVG里面的组平移,补齐位置差。
-
后来发现这个Hack会搞坏旋转:
假设有一个 Sprite 在(0,100)而一个SVG绘制了一个(0,0,100)的圆,那么确实能看到右上1/4了,但是当Sprite被旋转的时候,又会BUG掉,因为在 x=0 往左的图像被SVG裁掉了。
所以又增加了一层Hack,这次不是把SVG平移到相对 (0,0) 而是平移一倍舞台空间再移回来。这样旋转就不会出BUG还能看到完整的图了
-
最后BUG就是,SVG图变得很大了,而这时再3D旋转好像Perspective就错了!因为旋转轴不一样了,我了个槽。2D倒是没问题因为2D旋转可以直接派发给SVG内部解决。
不知各位有何建议,非常欢迎听取。此图为SVG解释,但是canvas也有一样的剪裁bug。。。
目前设想:
- 自动调整SVG大小来保证所有的图形正好都渲染,通过合并boundingbox实现。优点:最高的还原Flash的“素材”,所以各种性质也相同。缺点:处理耗时太大,如果用SVG每个操作都增加了又一次DOM操作,而如果采用的canvas,则需要开很大的doubule buffer和复杂的重绘操作(每次调整大小需要对以前的内容拷贝重绘,也是很大的开销)
- ???