纹理坐标原点为左下角,对图片进行缩放时,如果希望指点一个中心,比如指点(0.2,0.3)为中心对图片进行缩放,那就需要先将纹理坐标系原点移到( 0.2,0.3)的位置处理。到最后画图的时候要再将坐标系转换回原坐标系。
假设原坐标系中某一点为x,y, 则其在新坐标系中坐标为(x-0.2, y-0.3):
vec2 uv = v_texCoord;
uv.x = uv.x-0.3;
uv.y = uv.y - 0.2;
在新坐标系对纹理进行缩放,假设缩放为t倍,则
uv = uv*0.8;(这里t=0.8,显然t<1时为放大,t>1时缩小)
最后要将坐标系还原,因为放大操作是在新坐标系做的,真实的坐标是原坐标系,因此有
uv =uv+vec2( 0.3, 0.2); ( 新坐标系某点(x,y)在原坐标系中坐标为( x+0.2, y+0.3 ) )
最后将放大后的坐标的纹理颜色给原坐标位置的纹理颜色:
gl_FragColor = texture2D( CC_Texture0, uv ).rgba;
片段着色器代码:
module.exports =
#ifdef GL_ES
precision lowp float;
#endif
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
void main()
{
vec4 src_color = texture2D(CC_Texture0, v_texCoord).rgba;
vec2 uv = v_texCoord;
uv.x = uv.x-0.3;
uv.y = uv.y - 0.2;
uv = uv*0.8+vec2( 0.3, 0.2);
gl_FragColor = texture2D( CC_Texture0, uv ).rgba;
}