skyfish-qc / pixi-miniprogram

一个可运行于微信小程序的PIXI引擎,通过模拟window环境,有些功能小程序无法模拟,就直接修改了PIXI引擎代码,最终使得PIXI引擎正常运行在小程序上
MIT License
141 stars 36 forks source link

Graphics 在真机上无法正常着色 #6

Closed lqloveball closed 3 years ago

lqloveball commented 3 years ago

初步判断是 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");
lqloveball commented 3 years ago

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


    PIXI.Texture.WHITE = PIXI.Texture.from("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzQ0QjYzNzk0OUJCMTFFQjg3NThGNDQwMTZENTk4OTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzQ0QjYzN0E0OUJCMTFFQjg3NThGNDQwMTZENTk4OTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNDRCNjM3NzQ5QkIxMUVCODc1OEY0NDAxNkQ1OTg5NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNDRCNjM3ODQ5QkIxMUVCODc1OEY0NDAxNkQ1OTg5NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnwhCbkAAAAcSURBVHjaYvz//z8DKYCJgUQwqmFUw9DRABBgAFVtAx3QxuIfAAAAAElFTkSuQmCC");
skyfish-qc commented 3 years ago

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

lqloveball commented 3 years ago

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

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

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

skyfish-qc commented 3 years ago

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

lqloveball commented 3 years ago

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

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

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

skyfish-qc commented 3 years ago

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

skyfish-qc commented 3 years ago

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

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

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

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

skyfish-qc commented 3 years ago

问题已修复