[已解决]求助:怀疑是CANVAS模式下,setSkew的bug

cocos2d-js 3.0 rc2

加载同一个图片,进行setSkew或者setRotation的操作

在webgl模式下和canvas模式下的结果完全不一样

测试的问题代码

    sprite.setSkewX(cc.radiansToDegrees( 186));

以为这firefox、chrome下和ie(不支持webgl)的显示效果完全不一样

问题图片可以看附件

自己回复下

canvas模式下貌似对setRotationX和setRotationY不支持

导致上面的问题

自己回答自己的问题。。。
如果有人遇到了同样的问题,可以如下解决

算是发现的一个bug

CCNode.js的 _p.getNodeToParentTransform 方法,用下述代码替换掉
原先版本的代码有问题,完全没有考虑rotateY方向的事情,

_p.getNodeToParentTransform = function () {
var _t = this;
if (_t._transformDirty) {
// Translate values
var x = _t._position.x;
var y = _t._position.y;
var apx = _t._anchorPointInPoints.x, napx = -apx;
var apy = _t._anchorPointInPoints.y, napy = -apy;
var scx = _t._scaleX, scy = _t._scaleY;

        // Firefox on Vista and XP crashes
        // GPU thread in case of scale(0.0, 0.0)
        scx = (scx < 0.000001 && scx > -0.000001) ? 0.000001 : scx;
        scy = (scy < 0.000001 && scy > -0.000001) ? 0.000001 : scy;

        if (_t._ignoreAnchorPointForPosition) {
            x += apx;
            y += apy;
        }

        // Rotation values
        // Change rotation code to handle X and Y
        // If we skew with the exact same value for both x and y then we're simply just rotating
        var cx = 1, sx = 0, cy = 1, sy = 0;
        if (_t._rotationX !== 0 || _t._rotationY !== 0) {
            cx = Math.cos(-_t._rotationRadiansX);
            sx = Math.sin(-_t._rotationRadiansX);
            cy = Math.cos(-_t._rotationRadiansY);
            sy = Math.sin(-_t._rotationRadiansY);
        }
        var needsSkewMatrix = ( _t._skewX || _t._skewY );

        // optimization:
        // inline anchor point calculation if skew is not needed
        // Adjusted transform calculation for rotational skew
        if (!needsSkewMatrix && (apx !== 0 || apy !== 0)) {
            x += cy * napx * scx + -sx * napy * scy;
            y += sy * napx * scx + cx * napy * scy;
        }

        // Build Transform Matrix
        // Adjusted transform calculation for rotational skew
        var t = _t._transform;
        t.a = cy * scx;
        t.b = sx * scy;
        t.c = -sy * scx;
        t.d = cx * scy;
        t.tx = x;
        t.ty = y;

        // XXX: Try to inline skew
        // If skew is needed, apply skew and then anchor point
        if (needsSkewMatrix) {
            t = cc.affineTransformConcat({a: 1.0, b: Math.tan(cc.degreesToRadians(180-_t._skewX)),
                c: Math.tan(cc.degreesToRadians(180-_t._skewY)), d: 1.0, tx: 0.0, ty: 0.0}, t);

            // adjust anchor point
            if (apx !== 0 || apy !== 0)
                t = cc.affineTransformTranslate(t, napx, napy);
        }

        if (_t._additionalTransformDirty) {
            t = cc.affineTransformConcat(t, _t._additionalTransform);
            _t._additionalTransformDirty = false;
        }
        _t._transform = t;
        _t._transformDirty = false;
    }
    return _t._transform;
};

感谢楼主的信息,我们确认下RC3的状态。

感谢楼主指出的问题哇~~

我刚刚在rc3试了试。貌似已经木有这个问题啦。~~

:4:

赶紧投向rc3的怀抱。哈哈~~