嗨,您好!
在台式机上运行良好的Pixie代码在移动设备上的表现似乎很奇怪。
我是pixie.js的菜鸟,所以我很有可能在这里做错了事。
当我在移动设备上使用绘图代码时,画布似乎刷新异常。
我不是重画整个笔画,而是维护DrawingBuffer并向其中添加新的精灵。
无论我是否将“ legacy:”(遗产:)设置为false或true(如下所示),它都会给我相同的结果。
谢谢参观!
initializePixieCanvas() {
console.log("init canvas")
const cArea = this.canvasContainer;
const width = 1000;
const height = 1000;
this.stage = new PIXI.Container();
this.renderer = new PIXI.WebGLRenderer(
width,
height,
{
antialias: false,
transparent: true,
resolution: 2,
clearBeforeRender: false,
preserveDrawingBuffer: true,
premultipliedAlpha: false,
forceFXAA: true,
legacy: true
}
);
cArea.appendChild(this.renderer.view);
this.renderer.view.style.position = "absolute";
this.renderer.view.style.top = "0";
this.renderer.view.style.left = "0";
this.renderer.view.style.pointerEvents = "none";
this.renderer.view.style.zIndex = "99";
const cnvs = this.renderer.view;
const scaleForHighResDisplay = true;
if (scaleForHighResDisplay) {
cnvs.width = width * 2;
cnvs.height = height * 2;
cnvs.style.width = width + 'px';
cnvs.style.height = height + 'px';
}
this.pointer = new PIXI.Sprite(PIXI.Texture.fromCanvas(this.brushElement));
this.pointer.texture.destroy();
this.pointer.texture = PIXI.Texture.fromCanvas(this.brushElement);
this.pointer.anchor.x = 0.5;
this.pointer.anchor.y = 0.5;
this.renderer.clear();
this.stage.addChild(this.pointer);
}
您应该为这些高级功能编写本机应用程序。
网路应用程式速度惊人,而且速度如此之快-除了绘图缓冲区喜欢反覆旧资料以外,当然...
因此,好消息是,启用抗锯齿可修复此伪像。 但是显然打开抗锯齿仍然会对性能产生重大影响。 绕开/修复此错误的任何帮助均深表感谢。 谢谢!
你好! 看来这可能是一个精度问题,您是否尝试过将着色器的精度设置为highP?
我可以确认它启用了抗锯齿功能。
@GoodBoyDigital :尝试设置“ highP”,不幸的是没有效果
还有其他想法如何在不影响抗锯齿性能的情况下解决此问题?
@floepi
如果不需要该背景,可以尝试更改透明度。
{ transparent: 'notMultiplied'}
要么
{ transparent: false}
不幸的是,我们都需要这两个,因为这是一个透明的油漆层。
我们应该看看是否可以调试启用抗锯齿后为什么不会发生这种情况...
您要调试移动浏览器吗?
由于此问题最近没有活动,因此已被自动标记为陈旧。 如果没有进一步的活动,它将关闭。 感谢您的贡献。
该线程已被自动锁定,因为它关闭后没有任何近期活动。 请为相关错误打开新一期。
最有用的评论
因此,好消息是,启用抗锯齿可修复此伪像。 但是显然打开抗锯齿仍然会对性能产生重大影响。 绕开/修复此错误的任何帮助均深表感谢。 谢谢!