Skip to content

Commit 9aed43a

Browse files
dingpinglvdingpinglv
committed
Merge pull request cocos2d#2426 from dingpinglv/Iss2421_TextureRepeating
Fixed cocos2d#2421: Fill sprite with repeating texture in Canvas mode
2 parents 8761c71 + 769c508 commit 9aed43a

File tree

4 files changed

+114
-57
lines changed

4 files changed

+114
-57
lines changed

‎cocos2d/core/base-nodes/CCNode.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2668,16 +2668,11 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) {
26682668
worldT.b = t.a * pt.b + t.b * pt.d; //b
26692669
worldT.c = t.c * pt.a + t.d * pt.c; //c
26702670
worldT.d = t.c * pt.b + t.d * pt.d; //d
2671-
if(!this._skewX || this._skewY){
2672-
var plt = this._parent._transform;
2673-
var xOffset = -(plt.b + plt.c) * t.ty ;
2674-
var yOffset = -(plt.b + plt.c) * t.tx;
2675-
worldT.tx = (t.tx * pt.a + t.ty * pt.c + pt.tx + xOffset); //tx
2676-
worldT.ty = (t.tx * pt.b + t.ty * pt.d + pt.ty + yOffset); //ty
2677-
}else{
2678-
worldT.tx = (t.tx * pt.a + t.ty * pt.c + pt.tx); //tx
2679-
worldT.ty = (t.tx * pt.b + t.ty * pt.d + pt.ty); //ty
2680-
}
2671+
var plt = this._parent._transform;
2672+
var xOffset = -(plt.b + plt.c) * t.ty;
2673+
var yOffset = -(plt.b + plt.c) * t.tx;
2674+
worldT.tx = (t.tx * pt.a + t.ty * pt.c + pt.tx + xOffset); //tx
2675+
worldT.ty = (t.tx * pt.b + t.ty * pt.d + pt.ty + yOffset); //ty
26812676
} else {
26822677
worldT.a = t.a;
26832678
worldT.b = t.b;

‎cocos2d/core/platform/CCMacro.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,7 @@ cc.rectPointsToPixels = cc.IS_RETINA_DISPLAY_SUPPORTED ? function (point) {
348348
return p;
349349
};
350350

351+
//some gl constant variable
351352
/**
352353
* @constant
353354
* @type Number
@@ -426,6 +427,34 @@ cc.ONE_MINUS_CONSTANT_ALPHA = 0x8004;
426427
*/
427428
cc.ONE_MINUS_CONSTANT_COLOR = 0x8002;
428429

430+
/**
431+
* the constant variable equals gl.LINEAR for texture
432+
* @constant
433+
* @type Number
434+
*/
435+
cc.LINEAR = 0x2601;
436+
437+
/**
438+
* the constant variable equals gl.REPEAT for texture
439+
* @constant
440+
* @type Number
441+
*/
442+
cc.REPEAT = 0x2901;
443+
444+
/**
445+
* the constant variable equals gl.CLAMP_TO_EDGE for texture
446+
* @constant
447+
* @type Number
448+
*/
449+
cc.CLAMP_TO_EDGE = 0x812f;
450+
451+
/**
452+
* the constant variable equals gl.MIRRORED_REPEAT for texture
453+
* @constant
454+
* @type Number
455+
*/
456+
cc.MIRRORED_REPEAT = 0x8370;
457+
429458
/**
430459
* Check webgl error.Error will be shown in console if exists.
431460
* @function

‎cocos2d/core/renderer/RendererCanvas.js‎

Lines changed: 57 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -172,9 +172,6 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) {
172172
image, curColor, contentSize;
173173

174174
var blendChange = (node._blendFuncStr !== "source"), alpha = (node._displayedOpacity / 255);
175-
/*if(cc.renderer.contextSession.globalAlpha !== alpha){
176-
cc.renderer.contextSession.globalAlpha = context.globalAlpha = alpha; //TODO
177-
}*/
178175

179176
if (t.a !== 1 || t.b !== 0 || t.c !== 0 || t.d !== 1 || node._flippedX || node._flippedY) {
180177
context.save();
@@ -197,29 +194,36 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) {
197194
if (node._texture) {
198195
image = node._texture._htmlElementObj;
199196

200-
//TODO should move '* scaleX/scaleY' to transforming
201-
if (node._colorized) {
202-
context.drawImage(image,
203-
0,
204-
0,
205-
locTextureCoord.width,
206-
locTextureCoord.height,
207-
locX * scaleX,
208-
locY * scaleY,
209-
locWidth * scaleX,
210-
locHeight * scaleY
211-
);
197+
if(node._texture._pattern != ""){
198+
context.save();
199+
context.fillStyle = context.createPattern(image, node._texture._pattern);
200+
context.fillRect(locX * scaleX, locY * scaleY, locWidth * scaleX, locHeight * scaleY);
201+
context.restore();
212202
} else {
213-
context.drawImage(image,
214-
locTextureCoord.renderX,
215-
locTextureCoord.renderY,
216-
locTextureCoord.width,
217-
locTextureCoord.height,
218-
locX * scaleX,
219-
locY * scaleY,
220-
locWidth * scaleX,
221-
locHeight * scaleY
222-
);
203+
//TODO should move '* scaleX/scaleY' to transforming
204+
if (node._colorized) {
205+
context.drawImage(image,
206+
0,
207+
0,
208+
locTextureCoord.width,
209+
locTextureCoord.height,
210+
locX * scaleX,
211+
locY * scaleY,
212+
locWidth * scaleX,
213+
locHeight * scaleY
214+
);
215+
} else {
216+
context.drawImage(image,
217+
locTextureCoord.renderX,
218+
locTextureCoord.renderY,
219+
locTextureCoord.width,
220+
locTextureCoord.height,
221+
locX * scaleX,
222+
locY * scaleY,
223+
locWidth * scaleX,
224+
locHeight * scaleY
225+
);
226+
}
223227
}
224228
} else {
225229
contentSize = node._contentSize;
@@ -239,27 +243,35 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) {
239243
context.globalAlpha = alpha;
240244
if (node._texture) {
241245
image = node._texture.getHtmlElementObj();
242-
if (node._colorized) {
243-
context.drawImage(image,
244-
0,
245-
0,
246-
locTextureCoord.width,
247-
locTextureCoord.height,
248-
(t.tx + locX) * scaleX,
249-
(-t.ty + locY) * scaleY,
250-
locWidth * scaleX,
251-
locHeight * scaleY);
246+
if(node._texture._pattern != ""){
247+
context.save();
248+
context.transform(t.a, t.c, t.b, t.d, t.tx * scaleX, -t.ty * scaleY);
249+
context.fillStyle = context.createPattern(image, node._texture._pattern);
250+
context.fillRect(locX * scaleX, locY * scaleY, locWidth * scaleX, locHeight * scaleY);
251+
context.restore();
252252
} else {
253-
context.drawImage(
254-
image,
255-
locTextureCoord.renderX,
256-
locTextureCoord.renderY,
257-
locTextureCoord.width,
258-
locTextureCoord.height,
259-
(t.tx + locX) * scaleX,
260-
(-t.ty + locY) * scaleY,
261-
locWidth * scaleX,
262-
locHeight * scaleY);
253+
if (node._colorized) {
254+
context.drawImage(image,
255+
0,
256+
0,
257+
locTextureCoord.width,
258+
locTextureCoord.height,
259+
(t.tx + locX) * scaleX,
260+
(-t.ty + locY) * scaleY,
261+
locWidth * scaleX,
262+
locHeight * scaleY);
263+
} else {
264+
context.drawImage(
265+
image,
266+
locTextureCoord.renderX,
267+
locTextureCoord.renderY,
268+
locTextureCoord.width,
269+
locTextureCoord.height,
270+
(t.tx + locX) * scaleX,
271+
(-t.ty + locY) * scaleY,
272+
locWidth * scaleX,
273+
locHeight * scaleY);
274+
}
263275
}
264276
} else {
265277
contentSize = node._contentSize;

‎cocos2d/core/textures/CCTexture2D.js‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,13 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) {
127127

128128
url: null,
129129

130+
_pattern: null,
131+
130132
ctor: function () {
131133
this._contentSize = cc.size(0, 0);
132134
this._isLoaded = false;
133135
this._htmlElementObj = null;
136+
this._pattern = "";
134137
},
135138

136139
/**
@@ -338,8 +341,26 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) {
338341
return false;
339342
},
340343

341-
setTexParameters: function (texParams) {
342-
//support only in WebGl rendering mode
344+
setTexParameters: function (texParams, magFilter, wrapS, wrapT) {
345+
if(magFilter !== undefined)
346+
texParams = {minFilter: texParams, magFilter: magFilter, wrapS: wrapS, wrapT: wrapT};
347+
348+
if(texParams.wrapS === cc.REPEAT && texParams.wrapT === cc.REPEAT){
349+
this._pattern = "repeat";
350+
return;
351+
}
352+
353+
if(texParams.wrapS === cc.REPEAT ){
354+
this._pattern = "repeat-x";
355+
return;
356+
}
357+
358+
if(texParams.wrapT === cc.REPEAT){
359+
this._pattern = "repeat-y";
360+
return;
361+
}
362+
363+
this._pattern = "";
343364
},
344365

345366
setAntiAliasTexParameters: function () {

0 commit comments

Comments
 (0)