你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!

[]关于WebGL矢量图的遮罩问题

webGL下用矢量图做遮罩有时候会显示错误, 附上例子了

//开启WebGL, 遮罩会显示错误

//关闭WebGL, 遮罩会显示正确

let isWebGL = true



if (isWebGL)

{

	Laya.init(1024, 1024, Laya.WebGL);

}

else{

	Laya.init(1024, 1024);

}





//等待可调试

Laya.timer.once(1000, null, ()=>{



	let mask = new Laya.Sprite()

	let sprite = new Laya.Sprite()



	sprite.mask = mask

	Laya.stage.addChild(sprite)



	//正方形

	sprite.graphics.drawPoly(0, 0, [100, 100, 100, 200, 200, 200, 200, 100], "#ffffff")



	//一挑粗直线 遮挡正方形的左半部分

	mask.graphics.drawLines(0, 0, [100, 150, 150, 150], "#ff0000", 200)



	// drawPoly在WebGl下遮罩又是正确的

	//mask.graphics.drawPoly(0, 0, [100, 100, 100, 200, 150, 200, 150, 100], "#ff0000")

})

maskbug.zip

4 个回复

赞同来自:

这个就是线没有指定宽度，包围盒没法计算，需要你指定一下，其实你的需求就是模拟写字，不能用line 实现，得换一种方式

赞同来自:

尽量别用线做遮罩，线的宽度可能会有问题，你这个demo 没看出来你的问题在哪，不知道你预期什么效果，世纪什么效果，就用图形作为遮罩比较稳妥，有问题可以继续在下方回复。

赞同来自:

webgl和canvas下表现的效果不一样,
canvas下是预期效果
webgl下, 看起来遮罩整个没生效. 如果是线宽问题感觉不太可能会导致这样的效果

(我这边实现的动态演示书写汉字的功能, 主要原理利用drawlines画出肥一圈的部分笔画作为遮罩. 上面是一个简化后的demo)

赞同来自:

当没遮罩的时候, 显示为一个白色的正方形

利用drawlines绘制的遮罩如下图所示

canvans模式下,用drawlines加入遮罩后, 白色正方形的只有一半显示出来了, 这是期望的结果

canvans下带遮罩(期望结果).png

webgl模式下,用drawlines加入遮罩后, 白色正方形全部没显示出来了, 这是不符合期望的结果

webgl下带遮罩(非期望结果).png

该问题目前已经被锁定, 无法添加新回复

商务合作

商务合作