Graphics 在真机上无法正常着色

[maksim.lin]

初步判断是 pixi 的 canvas2d 绘制白色纹理失效

	function createWhiteTexture()
	{
	    var canvas = document.createElement('canvas2d');

	    canvas.width = 16;
	    canvas.height = 16;
		canvas.type='canvas';

	    var context = canvas.getContext('2d');

	    context.fillStyle = 'white';
		context.fillRect(0, 0, 16, 16);


	    return new Texture(new BaseTexture(new CanvasResource(canvas)));
	}

目前暂时解决方案,自己做一个白色图片纹理

PIXI.Texture.WHITE = PIXI.Texture.from("/static/color.png");

[maksim.lin]

Graphics 绘制需要一个白色纹理，在 Graphics绘制前 直接使用PIXI.Texture.from 来创建 base64 白色纹理（只需要开始设置一次）

    PIXI.Texture.WHITE = PIXI.Texture.from("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzQ0QjYzNzk0OUJCMTFFQjg3NThGNDQwMTZENTk4OTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzQ0QjYzN0E0OUJCMTFFQjg3NThGNDQwMTZENTk4OTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNDRCNjM3NzQ5QkIxMUVCODc1OEY0NDAxNkQ1OTg5NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNDRCNjM3ODQ5QkIxMUVCODc1OEY0NDAxNkQ1OTg5NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnwhCbkAAAAcSURBVHjaYvz//z8DKYCJgUQwqmFUw9DRABBgAFVtAx3QxuIfAAAAAElFTkSuQmCC");

[qiaoce]

你这个应该是没有把那个canvas2d参数传进去，那个初始化PIXI那里，如果有需要用到graphics的，需要传入一个2d的canvas才能正常使用，看那个readme的说明就好

[maksim.lin]

你这个应该是没有把那个canvas2d参数传进去，那个初始化PIXI那里，如果有需要用到graphics的，需要传入一个2d的canvas才能正常使用，看那个readme的说明就好

已经传递
createPIXI(_canvas, _stageWidth, _canvas2d）

但渲染出来的是黑色的，问题出在使用canvas 创建 BaseTexture纹理问题。目前绘制出来是黑色的。

[qiaoce]

今天试了一下，是新版微信的webgl渲染改动导致的，之前版本的微信是正常显示的，微信更新后不正常了。刚更新了一个版本，修改了webgl渲染canvas的机制，在真机上测试了可以正常显示了。

[maksim.lin]

今天试了一下，是新版微信的webgl渲染改动导致的，之前版本的微信是正常显示的，微信更新后不正常了。刚更新了一个版本，修改了webgl渲染canvas的机制，在真机上测试了可以正常显示了。

太棒了！这个更新完美解决。

目前PIXI.Text 无法实现，主要还是由于canvas无法动态修改宽高。
但BitmapText 是无法做全量文本动态输入。PIXI.Text
我现在方式是使用一个 1000px*1000px的2d canvas来完成文本绘制后传递数据给PIXI.Text完成最终渲染。

[qiaoce]

canvas可以动态修改宽高的，主要是一个Text需要对应一个canvas，不能动态创建2d类型的canvas，你获取2d类型的canvas时候用上node，size参数就可以动态改宽高了，可以看看例子里面的获取方式

[qiaoce]

今天试了一下，是新版微信的webgl渲染改动导致的，之前版本的微信是正常显示的，微信更新后不正常了。刚更新了一个版本，修改了webgl渲染canvas的机制，在真机上测试了可以正常显示了。

太棒了！这个更新完美解决。

目前PIXI.Text 无法实现，主要还是由于canvas无法动态修改宽高。
但BitmapText 是无法做全量文本动态输入。PIXI.Text
我现在方式是使用一个 1000px*1000px的2d canvas来完成文本绘制后传递数据给PIXI.Text完成最终渲染。

重新改写了Text的渲染逻辑，新引入一个2d类型的canvas就可以正常显示了。具体可以参考例子的做法。

[qiaoce]

问题已修复