From 78db8f4749b217ebf8584625f838f5692003e93b Mon Sep 17 00:00:00 2001 From: dingpinglv Date: Thu, 30 Oct 2014 17:22:05 +0800 Subject: [PATCH] Fixed #2421: Fill sprite with repeating texture in Canvas mode --- cocos2d/core/base-nodes/CCNode.js | 15 ++-- cocos2d/core/platform/CCMacro.js | 29 +++++++ cocos2d/core/renderer/RendererCanvas.js | 102 +++++++++++++----------- cocos2d/core/textures/CCTexture2D.js | 25 +++++- 4 files changed, 114 insertions(+), 57 deletions(-) diff --git a/cocos2d/core/base-nodes/CCNode.js b/cocos2d/core/base-nodes/CCNode.js index 24bcdb1aab..acaaaf9f0f 100644 --- a/cocos2d/core/base-nodes/CCNode.js +++ b/cocos2d/core/base-nodes/CCNode.js @@ -2668,16 +2668,11 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) { worldT.b = t.a * pt.b + t.b * pt.d; //b worldT.c = t.c * pt.a + t.d * pt.c; //c worldT.d = t.c * pt.b + t.d * pt.d; //d - if(!this._skewX || this._skewY){ - var plt = this._parent._transform; - var xOffset = -(plt.b + plt.c) * t.ty ; - var yOffset = -(plt.b + plt.c) * t.tx; - worldT.tx = (t.tx * pt.a + t.ty * pt.c + pt.tx + xOffset); //tx - worldT.ty = (t.tx * pt.b + t.ty * pt.d + pt.ty + yOffset); //ty - }else{ - worldT.tx = (t.tx * pt.a + t.ty * pt.c + pt.tx); //tx - worldT.ty = (t.tx * pt.b + t.ty * pt.d + pt.ty); //ty - } + var plt = this._parent._transform; + var xOffset = -(plt.b + plt.c) * t.ty; + var yOffset = -(plt.b + plt.c) * t.tx; + worldT.tx = (t.tx * pt.a + t.ty * pt.c + pt.tx + xOffset); //tx + worldT.ty = (t.tx * pt.b + t.ty * pt.d + pt.ty + yOffset); //ty } else { worldT.a = t.a; worldT.b = t.b; diff --git a/cocos2d/core/platform/CCMacro.js b/cocos2d/core/platform/CCMacro.js index adb7e453f4..2f94ced6cf 100644 --- a/cocos2d/core/platform/CCMacro.js +++ b/cocos2d/core/platform/CCMacro.js @@ -348,6 +348,7 @@ cc.rectPointsToPixels = cc.IS_RETINA_DISPLAY_SUPPORTED ? function (point) { return p; }; +//some gl constant variable /** * @constant * @type Number @@ -426,6 +427,34 @@ cc.ONE_MINUS_CONSTANT_ALPHA = 0x8004; */ cc.ONE_MINUS_CONSTANT_COLOR = 0x8002; +/** + * the constant variable equals gl.LINEAR for texture + * @constant + * @type Number + */ +cc.LINEAR = 0x2601; + +/** + * the constant variable equals gl.REPEAT for texture + * @constant + * @type Number + */ +cc.REPEAT = 0x2901; + +/** + * the constant variable equals gl.CLAMP_TO_EDGE for texture + * @constant + * @type Number + */ +cc.CLAMP_TO_EDGE = 0x812f; + +/** + * the constant variable equals gl.MIRRORED_REPEAT for texture + * @constant + * @type Number + */ +cc.MIRRORED_REPEAT = 0x8370; + /** * Check webgl error.Error will be shown in console if exists. * @function diff --git a/cocos2d/core/renderer/RendererCanvas.js b/cocos2d/core/renderer/RendererCanvas.js index e5e9582d25..65062121e8 100644 --- a/cocos2d/core/renderer/RendererCanvas.js +++ b/cocos2d/core/renderer/RendererCanvas.js @@ -172,9 +172,6 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) { image, curColor, contentSize; var blendChange = (node._blendFuncStr !== "source"), alpha = (node._displayedOpacity / 255); - /*if(cc.renderer.contextSession.globalAlpha !== alpha){ - cc.renderer.contextSession.globalAlpha = context.globalAlpha = alpha; //TODO - }*/ if (t.a !== 1 || t.b !== 0 || t.c !== 0 || t.d !== 1 || node._flippedX || node._flippedY) { context.save(); @@ -197,29 +194,36 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) { if (node._texture) { image = node._texture._htmlElementObj; - //TODO should move '* scaleX/scaleY' to transforming - if (node._colorized) { - context.drawImage(image, - 0, - 0, - locTextureCoord.width, - locTextureCoord.height, - locX * scaleX, - locY * scaleY, - locWidth * scaleX, - locHeight * scaleY - ); + if(node._texture._pattern != ""){ + context.save(); + context.fillStyle = context.createPattern(image, node._texture._pattern); + context.fillRect(locX * scaleX, locY * scaleY, locWidth * scaleX, locHeight * scaleY); + context.restore(); } else { - context.drawImage(image, - locTextureCoord.renderX, - locTextureCoord.renderY, - locTextureCoord.width, - locTextureCoord.height, - locX * scaleX, - locY * scaleY, - locWidth * scaleX, - locHeight * scaleY - ); + //TODO should move '* scaleX/scaleY' to transforming + if (node._colorized) { + context.drawImage(image, + 0, + 0, + locTextureCoord.width, + locTextureCoord.height, + locX * scaleX, + locY * scaleY, + locWidth * scaleX, + locHeight * scaleY + ); + } else { + context.drawImage(image, + locTextureCoord.renderX, + locTextureCoord.renderY, + locTextureCoord.width, + locTextureCoord.height, + locX * scaleX, + locY * scaleY, + locWidth * scaleX, + locHeight * scaleY + ); + } } } else { contentSize = node._contentSize; @@ -239,27 +243,35 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) { context.globalAlpha = alpha; if (node._texture) { image = node._texture.getHtmlElementObj(); - if (node._colorized) { - context.drawImage(image, - 0, - 0, - locTextureCoord.width, - locTextureCoord.height, - (t.tx + locX) * scaleX, - (-t.ty + locY) * scaleY, - locWidth * scaleX, - locHeight * scaleY); + if(node._texture._pattern != ""){ + context.save(); + context.transform(t.a, t.c, t.b, t.d, t.tx * scaleX, -t.ty * scaleY); + context.fillStyle = context.createPattern(image, node._texture._pattern); + context.fillRect(locX * scaleX, locY * scaleY, locWidth * scaleX, locHeight * scaleY); + context.restore(); } else { - context.drawImage( - image, - locTextureCoord.renderX, - locTextureCoord.renderY, - locTextureCoord.width, - locTextureCoord.height, - (t.tx + locX) * scaleX, - (-t.ty + locY) * scaleY, - locWidth * scaleX, - locHeight * scaleY); + if (node._colorized) { + context.drawImage(image, + 0, + 0, + locTextureCoord.width, + locTextureCoord.height, + (t.tx + locX) * scaleX, + (-t.ty + locY) * scaleY, + locWidth * scaleX, + locHeight * scaleY); + } else { + context.drawImage( + image, + locTextureCoord.renderX, + locTextureCoord.renderY, + locTextureCoord.width, + locTextureCoord.height, + (t.tx + locX) * scaleX, + (-t.ty + locY) * scaleY, + locWidth * scaleX, + locHeight * scaleY); + } } } else { contentSize = node._contentSize; diff --git a/cocos2d/core/textures/CCTexture2D.js b/cocos2d/core/textures/CCTexture2D.js index 236280cd81..dbdc03ee4d 100644 --- a/cocos2d/core/textures/CCTexture2D.js +++ b/cocos2d/core/textures/CCTexture2D.js @@ -127,10 +127,13 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) { url: null, + _pattern: null, + ctor: function () { this._contentSize = cc.size(0, 0); this._isLoaded = false; this._htmlElementObj = null; + this._pattern = ""; }, /** @@ -338,8 +341,26 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) { return false; }, - setTexParameters: function (texParams) { - //support only in WebGl rendering mode + setTexParameters: function (texParams, magFilter, wrapS, wrapT) { + if(magFilter !== undefined) + texParams = {minFilter: texParams, magFilter: magFilter, wrapS: wrapS, wrapT: wrapT}; + + if(texParams.wrapS === cc.REPEAT && texParams.wrapT === cc.REPEAT){ + this._pattern = "repeat"; + return; + } + + if(texParams.wrapS === cc.REPEAT ){ + this._pattern = "repeat-x"; + return; + } + + if(texParams.wrapT === cc.REPEAT){ + this._pattern = "repeat-y"; + return; + } + + this._pattern = ""; }, setAntiAliasTexParameters: function () {